<template>
  <div class="app-container">
    <!-- 顶部搜索区域 -->
    <el-form :inline="true" :model="queryData">
      <el-form-item label="专家姓名">
        <el-input
            v-model="queryData.name"
            placeholder="请输入关键字"
            style="width: 150px"
        ></el-input>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select
            v-model="queryData.examineStatus"
            class="m-2"
            placeholder="请选择"
            style="width: 100px"
        >
          <el-option :value="0" label="待审核"/>
          <el-option :value="1" label="已审核"/>
          <el-option :value="2" label="已拒绝"/>
        </el-select>
      </el-form-item>

      <el-form-item style="float: right">
        <el-button
            icon="search"
            size="default"
            type="primary"
            @click="handleQuery"
        >搜索
        </el-button>
        <el-button icon="refresh" size="default" @click="resetQuery"
        >重置
        </el-button>
      </el-form-item>
    </el-form>

    <!--表格区域-->
    <el-table :data="dataList" border style="width: 100%">
      <el-table-column align="center" label="专家姓名" prop="name"/>
      <el-table-column align="center" label="研究领域">
        <template #default="{ row }">
          <div>{{ row.industryStr }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="学历" prop="education">
        <template #default="{row}">
          {{ educationOptions.find((el) => el.key === row.education)?.text ?? "无" }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="个人备注" show-overflow-tooltip>
        <template #default="{ row }">
          <div v-html="row.introduce"></div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="毕业院校" prop="school"/>
      <el-table-column align="center" label="职务" prop="post"/>
      <el-table-column align="center" label="所在地" prop="address"/>
      <el-table-column align="center" label="审核状态" prop="examineStatus">
        <template #default="{ row }">
          <dict-tag :options="auditStatusDict" :value="row.examineStatus"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="申请时间" prop="createTime"/>
      <el-table-column align="center" label="操作" prop="">
        <template #default="{ row }">
          <el-button size="small" type="text" @click="btnAudit(row.id)"
          >审核
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <pagination
        v-show="total > 0"
        v-model:limit="queryData.page_size"
        v-model:page="queryData.pageNum"
        :total="total"
        @pagination="getList"
    />
  </div>
</template>

<script setup>
import {expertList} from "@/api/expert/expert";
import {useRouter} from "vue-router";
import useUserStore from "@/store/modules/user";
import DictTag from "@/components/DictTag/index.vue";
import {auditStatusDict} from "@/constant/dict";
import {reactive, ref, toRefs} from "vue";
import {educationOptions} from "@/utils/parameter";

const router = useRouter();
const data = reactive({
  queryData: {
    pageNum: 1,
    pageSize: 10,
    examineStatus: "",
  },
});
const total = ref(0);
const dataList = ref([]);
const {queryData} = toRefs(data);

// 获取专家列表
const getList = async () => {
  const res = await expertList(queryData.value);
  dataList.value = res.rows;
  total.value = res.total;
};

// 搜索查询
const handleQuery = () => {
  getList(queryData.value);
};

// 重置按钮
const resetQuery = () => {
  queryData.value = {
    pageNum: 1,
    pageSize: 10,
    examineStatus: "",
  };
  getList();
};
// 审核按钮
const btnAudit = (id) => {
  router.push({
    path: "/approval/dataList/expert",
    query: {id},
  });
};
getList();

useUserStore().getUnApprovedExpert();
</script>
<style></style>
