<script setup name='expertVerify'>
import elTree from '@/components/elTree/index.vue'
import { reactive, ref, onMounted, h } from 'vue'
import { useRouter } from 'vue-router'
import { getExpertVerifyList } from '@/http/apis/expertManage/expertVerify'
import { getIsShowRegionTree, getTreeParams } from '@/utils/getIsShowRegionTree'
import store from '@/store'

const tableListRef = ref(),
  router = useRouter(),
  searchForm = reactive({
    expertName: undefined,
    companyName: undefined,
    expertType: undefined,
    applyStatusList: ['pending_review'],
    maxDeclareAmount: undefined,
    maxApprovalAmount: undefined
  }),
  total = ref(0),
  // 列表数据
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '60'
    },
    {
      label: '专家姓名',
      key: 'name',
      prop: 'name',
      minWidth: '80',
      showOverflowTooltip: true
    },
    {
      label: '工作单位',
      key: 'company',
      prop: 'company',
      minWidth: '150',
      showOverflowTooltip: true
    },
    {
      label: '手机号码',
      key: 'phoneNo',
      prop: 'phoneNo',
      width: '120'
    },
    {
      label: '专家类型',
      key: 'expertType',
      prop: 'expertType',
      width: '80',
      render: row => h('span', row?.expertType?.[0].dictionaryName || '-')
    },
    {
      label: '报名时间',
      key: 'applyTime',
      prop: 'applyTime',
      width: '180'
    },
    {
      label: '操作',
      slot: 'action',
      width: '200',
      fixed: 'right'
    }
  ]),
  data = ref([]),
  areaCode = ref(),
  getTree = (value) => {
    searchForm.expertRegionInfo = {
      regionCode: value.regionCode,
      regionLevel: value.regionLevel
    }
    tableListRef.value.pageParams.pageNumber = 1
    getTableData()
  },
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await getExpertVerifyList({
      ...pageParams,
      ...searchForm,
      year: searchForm.year * 1 || undefined,
      maxDeclareAmount: searchForm.maxDeclareAmount * 1 || undefined,
      maxApprovalAmount: searchForm.maxApprovalAmount * 1 || undefined,
      startTime: searchForm.times?.[0] || undefined,
      endTime: searchForm.times?.[1] || undefined,
      areaCode: areaCode.value || undefined
    })
    data.value = res.data.records
    total.value = res.data.total
  },
  activeName = ref('待审核'),
  search = () => {
    getTableData()
  },
  reset = () => {
    searchForm.expertName = undefined
    searchForm.companyName = undefined
    searchForm.expertType = undefined
    searchForm.maxDeclareAmount = undefined
    searchForm.maxApprovalAmount = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  checkDetail = (data) => {
    if (activeName.value === '待审核') {
      router.push({ name: 'expertVerifyAction', query: { applyId: data.id, applyType: data.applyType }})
    } else {
      router.push({ name: 'verifyDetail', query: { applyId: data.id }})
    }
  },
  handleClick = ({ props: { name }}) => {
    if (name === '待审核') {
      searchForm.applyStatusList = ['pending_review']
      getTableData()
    } else {
      searchForm.applyStatusList = ['passed', 'refused', 'revoked']
      getTableData()
    }
  }
onMounted(() => {
  if (!getIsShowRegionTree(['SUPER_ADMIN', 'REGION_MANAGER', 'EXPERT_ADMIN'])) getTableData()
})
</script>

<template>
  <el-row>
    <el-col
      v-if="getIsShowRegionTree(['SUPER_ADMIN','REGION_MANAGER','EXPERT_ADMIN'])"
      style="padding-right: 16px"
      :span="4"
    >
      <elTree :params="getTreeParams({'SUPER_ADMIN':false,'REGION_MANAGER':false,'EXPERT_ADMIN':false})" @get-tree="getTree" />
    </el-col>
    <el-col :span="getIsShowRegionTree(['SUPER_ADMIN','REGION_MANAGER','EXPERT_ADMIN'])?20:24">
      <el-card class="w-full search">
        <el-form
          :model="searchForm"
          size="small"
          label-suffix=":"
        >
          <el-row
            :gutter="16"
            class="mb-16"
          >
            <el-col :span="8">
              <el-form-item label="专家姓名">
                <el-input
                  v-model="searchForm.expertName"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工作单位">
                <el-input
                  v-model="searchForm.companyName"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="专家类型">
                <el-select
                  v-model="searchForm.expertType"
                  placeholder="全部"
                  class="w-full"
                  value-key="dictionaryCode"
                >
                  <el-option
                    v-for="(item,index) in store.dictStore.expertTypeDict"
                    :key="index"
                    :label="item.dictionaryName"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row
            :gutter="16"
          >
            <el-col :span="24">
              <el-form-item class="btn">
                <div class="flex">
                  <el-button
                    type="primary"
                    @click="search"
                  >查询</el-button>
                  <el-button
                    @click="reset"
                  >重置</el-button>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="w-full mt-8 tab-card">
        <template #header>
          <el-tabs
            v-model="activeName"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane
              label="待审核"
              name="待审核"
            />
            <el-tab-pane
              label="已审核"
              name="已审核"
            />
          </el-tabs>
        </template>
        <table-list
          ref="tableListRef"
          :column="column"
          :data="data"
          :total="total"
          @get-table-data="getTableData"
        >
          <template #action="{ scope }">
            <a @click="checkDetail(scope.row)">{{ activeName==='待审核'?'处理':'详情' }}</a>
          </template>
        </table-list>
      </el-card>
    </el-col>
  </el-row>
</template>

<style lang='less' scoped>

</style>
