<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="7">技术需求</el-radio-button> -->
      <el-radio-button label="8"
        ><!--实验室-->
        {{ t("admin.common.lab") }}
      </el-radio-button>
    </el-radio-group>

    <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
            :data="item"
            v-else-if="queryParams.searchType == 6"
          ></serviceDemandItem>
          <TechnologyDemandItem
            :data="item"
            v-else-if="queryParams.searchType == 7"
          ></TechnologyDemandItem> -->
        </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 AchievementItem from "@/views/website/searchList/components/achievementItem.vue";
import { useRoute, useRouter } from "vue-router";
import { computed, reactive, ref, toRefs, watch } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
// import { watch } from "vue";

const route = useRoute();
const router = useRouter();

// console.log(userStore.userId);
const dataList = ref([]);
const loading = ref(true);
const total = ref(0);

const queryType = computed(() => {
  console.log(queryParams.value.searchType);
  if (queryParams.value.searchType == 1) {
    return 2;
  } else if (queryParams.value.searchType == 2) {
    return 1;
  } else if (queryParams.value.searchType == 4) {
    return 2;
  } else if (queryParams.value.searchType == 5) {
    return 2;
  } else if (queryParams.value.searchType == 8) {
    return 2;
  }
  // } else if (queryParams.value.searchType == 7) {
  //   return 1;
  // }
});

// router.replace({
//   path: "/extension/results",
//   query: {
//     keyword: route.query.keyword,
//     queryType: queryType,
//   },
// });
watch(
  queryType,
  (val) => {
    console.log(val);
    router.replace({
      path: route.path,
      query: {
        keyword: route.query.keyword,
        queryType: val,
      },
    });
  },
  { immediate: true }
);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    query: route.query.keyword,
    searchType: "1",
    queryType: queryType,
  },
});

const { queryParams } = toRefs(data);

/** 查询列表 */
async function getList() {
  const resp = await search(queryParams.value);
  // if()
  dataList.value = resp.list;
  total.value = resp.total;
  loading.value = false;
}

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

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>
