<template>
  <div class="app-container">
    <el-radio-group
      v-model="queryParams.searchType"
      size="small"
      @change="handleQuery"
    >
      <el-badge :hidden="true" :value="12" class="count-badge">
        <el-radio-button label="1"
          ><!--企业-->
          {{ t("admin.common.company") }}
        </el-radio-button>
      </el-badge>
      <el-radio-button label="2"
        ><!--成果-->
        {{ t("admin.common.achievement") }}
      </el-radio-button>
      <el-radio-button label="4"
        ><!--专利-->
        {{ t("admin.common.patent") }}
      </el-radio-button>
      <el-radio-button label="5"
        ><!--专家-->
        {{ t("admin.common.expert") }}
      </el-radio-button>
      <!-- <el-radio-button label="6">服务需求</el-radio-button> -->
      <el-radio-button label="8"
        ><!--实验室-->
        {{ t("admin.common.lab") }}
      </el-radio-button>
      <el-radio-button v-if="route.path != '/demand/results'" label="7"
        >{{ t("routes.company.technicalDemand") }}
      </el-radio-button>
    </el-radio-group>

    <!-- <el-row :gutter="20">
        <el-col
          :xs="12"
          :sm="6"
          :lg="4"
          style="margin-top: 20px"
          v-for="item in 10"
          :key="item"
        >
          <div style="border: 1px solid #787878">
            <div style="text-align: right">
              <el-tag type="warning" effect="dark" style="border-radius: 0">
                7.8万
              </el-tag>
            </div>
            <div style="padding: 10px">
              <div class="ellipsis">
                高碳当量高强度灰铁材质研发高碳当量高强度灰铁材质研发
              </div>
              <div
                style="
                  margin: 10px 0;
                  display: flex;
                  justify-content: space-between;
                "
              >
                <el-tag type="info" effect="plain">所属领域</el-tag>
                <el-tag type="info" effect="plain">普通企业需求</el-tag>
              </div>
              <div style="margin-bottom: 10px">研发类型:</div>
              <div>截止时间:</div>
            </div>
            <div class="btn_info pointer">查看详情</div>
          </div>
        </el-col>
      </el-row> -->
    <!-- <el-empty v-if=""></el-empty> -->
    <div v-if="dataList.length" v-loading="loading" style="margin-top: 20px">
      <section v-for="item in dataList" :key="item.id">
        <div style="border: 1px solid #dcdcdc; margin-bottom: 10px">
          <enterpriseItem
            v-if="queryParams.searchType == 1"
            :data="item"
          ></enterpriseItem>
          <AchievementItem
            v-else-if="queryParams.searchType == 2"
            :data="item"
          ></AchievementItem>
          <gainItem
            v-else-if="queryParams.searchType == 4"
            :data="item"
          ></gainItem>
          <expertItem
            v-else-if="queryParams.searchType == 5"
            :data="item"
          ></expertItem>
          <serviceDemandItem
            v-else-if="queryParams.searchType == 6"
            :data="item"
          ></serviceDemandItem>
          <TechnologyDemandItem
            v-else-if="queryParams.searchType == 7"
            :data="item"
          ></TechnologyDemandItem>
          <LaboratoryItem
            v-else-if="queryParams.searchType == 8"
            :data="item"
          ></LaboratoryItem>
        </div>
      </section>
    </div>
    <el-empty v-else></el-empty>

    <pagination
      v-show="total > 0"
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNum"
      :total="total"
      @pagination="getList"
    />
  </div>
</template>

<script name="Post" setup>
import { search } from "@/api/website/home/index";
import gainItem from "@/views/website/searchList/components/gainItem.vue";
import expertItem from "@/views/website/searchList/components/expertItem.vue";
import serviceDemandItem from "@/views/website/searchList/components/serviceDemandItem.vue";
import enterpriseItem from "../../components/enterpriseItem.vue";
import TechnologyDemandItem from "@/views/website/searchList/components/technologyDemandItem.vue";

import { useI18n } from "vue-i18n";
import AchievementItem from "@/views/website/searchList/components/achievementItem.vue";
import { useRoute, useRouter } from "vue-router"; // import useUserStore from "@/store/modules/user";
import LaboratoryItem from "@/views/website/searchList/components/laboratoryItem.vue";
import { reactive, ref, toRefs } from "vue";

const { t } = useI18n();
const route = useRoute();
const router = useRouter();
// const router = useRouter();
const dataList = ref([]);
const loading = ref(true);
const total = ref(0);
// const userStore = useUserStore();
// const queryType = computed(() => {
//   console.log(queryParams.value.searchType);
//   if (queryParams.value.searchType == 1) {
//     return 2;
//   } else if (queryParams.value.searchType == 2) {
//     return 2;
//   } else if (queryParams.value.searchType == 4) {
//     return 2;
//   } else if (queryParams.value.searchType == 5) {
//     return 2;
//   } else if (queryParams.value.searchType == 6) {
//     return 2;
//   } else if (queryParams.value.searchType == 7) {
//     return 2;
//   } else if (queryParams.value.searchType == 8) {
//     return 2;
//   }
// });

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    query: route.query.keyword,
    searchType: "1",
    queryType: "2",
    isMatch: route.meta.isMatch,
  },
});

const { queryParams } = toRefs(data);

router.replace({
  path: route.path,
  query: {
    keyword: route.query.keyword,
    queryType: 2,
  },
});

// watch(
//   queryType,
//   (val) => {
//     router.replace({
//       path: route.path,
//       query: {
//         keyword: route.query.keyword,
//         queryType: val,
//       },
//     });
//   },
//   { immediate: true }
// );
/** 查询列表 */
async function getList() {
  const resp = await search(queryParams.value);
  // console.log(userStore.enterprise.id);
  dataList.value = resp.list;
  // 排除自己企业
  // if (queryParams.value.searchType === "1") {
  //   dataList.value = dataList.value.filter(
  //     (el) => el.id != userStore.enterprise?.id
  //   );
  // }
  // 成果排除专家自己
  // if (queryParams.value.searchType === "2") {
  //   dataList.value = dataList.value.filter(
  //     (el) => el.expertId != userStore.userId
  //   );
  // }
  total.value = resp.total;
  loading.value = false;
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 删除按钮操作 */
// function handleDelete(id) {
//   proxy.$modal
//     .confirm('是否确认删除订单号为"' + id + '"的数据项？')
//     .then(function () {
//       return delPost(postIds);
//     })
//     .then(() => {
//       getList();
//       proxy.$modal.msgSuccess(t('admin.common.deleteSuccess'))
//     })
//     .catch(() => {});
// }
// function handleResults(id) {
//   router.push({ path: "./results" });
// }
handleQuery();
</script>
<style lang="scss" scoped>
.btn_info {
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #fff;
  background-color: #787878;
}

:deep(.count-badge) {
  z-index: 99;
}
</style>
