<template>
  <div class="index">
    <searchContainer
      bannerKey="首页>专家库>专家列表"
      :title="t('webSearch.expertLibrary')"
      @handleQuery="handleQuery"
    >
      <template v-slot>
        <el-row type="flex" style="padding: 20px 0">
          <div style="flex: 1">
            <div style="position: relative">
              <!-- <industrySelect @industryChange="industryChange"></industrySelect> -->
              <div class="total">
                {{ t("webSearch.findNum") }} <span>{{ total }}</span>
                {{ t("webSearch.findExpertNum") }}
              </div>
              <div v-loading="loading">
                <section v-for="item in searchResults" :key="item.id">
                  <expertItem
                    style="width: 661px; margin-bottom: 10px"
                    :data="item"
                  ></expertItem>
                </section>
              </div>

              <!-- :pageSizes="queryParams.pageSizes" -->
              <pagination
                class="pagination"
                :total="total"
                :pageSizes="[5, 10, 10 << 1, 10 << 2, 10 << 3]"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                :autoScroll="false"
                @pagination="getDataList"
              />
            </div>
          </div>
          <div class="r">
            <WebContact />
          </div>
        </el-row>
      </template>
    </searchContainer>
  </div>
</template>

<script setup>
import WebContact from "@/components/webContact/index.vue";
import { reactive, ref } from "vue";
import { search } from "@/api/website/home/index";
import searchContainer from "./components/searchContainer.vue";
// import industrySelect from "./components/industrySelect.vue";
import expertItem from "./components/expertItem.vue";
// import wordcloud from "./components/wordcloud.vue";
import { useRoute } from "vue-router";

import { useI18n } from "vue-i18n";

const { t } = useI18n();
// const router = useRouter();
const route = useRoute();
const searchResults = ref([]);
const total = ref(0);
const loading = ref(true);
const queryParams = reactive({
  pageNum: 1,
  pageSize: 5,
  searchType: 5,
  queryType: route.query.queryType,
  query: route.query.keyword,
});

// function handleDetail(id) {
//   let routeData = router.resolve({
//     path: `/searchList/expert/detail/${id}`,
//     query: { keyword: queryParams.query },
//   });
//   window.open(routeData.href, "_blank");
// }

// const state = reactive({
//   pageNum: 1,
//   total: 1,
//   pageSize: 10,
//   pageSizes: [10, 10 << 1, 10 << 2, 10 << 3],
//   keyword: "",
//   industryList: [],
// });

// function createdData(arr) {
//   let l = [];
//   let snap = JSON.parse(JSON.stringify(arr));
//   snap.map((e) => {
//     l.push({ name: e, value: 30 });
//     return { name: e, value: 30 };
//   });
//   return l;
// }

function handleQuery(state) {
  // state.keyword = keyword;
  queryParams.query = state.currentKeyword;
  queryParams.queryType = state.queryType;
  getDataList();
}

const getDataList = async () => {
  loading.value = true;
  try {
    const resp = await search(queryParams);
    searchResults.value = resp.list;
    total.value = resp.total;
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
</script>

<style lang="scss" scoped>
.total {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #333333;
  margin-bottom: 20px;

  span {
    font-size: 30px;
    color: #0054ff;
  }
}

.r {
  display: inline-block;
  width: 325px;
  margin-left: 14px;
  min-height: 200px;
  background-color: #fff;
}
</style>
