<script setup name="expertStore">
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import ElTree from '@/components/elTree/index.vue'
import store from '@/store'
import { storeToRefs } from 'pinia'
import { delivery, getExpertList } from '@/http/apis/expertManage/expertStore'
import { getIsShowRegionTree, getTreeParams } from '@/utils/getIsShowRegionTree'

const
  { dictList } = storeToRefs(store.dictStore),
  router = useRouter(),
  { proxy } = getCurrentInstance(),
  searchForm = reactive({
    expertName: undefined,
    company: undefined,
    expertTypeDictionaryCode: undefined,
    status: undefined,
    maxDeclareAmount: undefined,
    maxApprovalAmount: undefined
  }),
  tableListRef = ref(),
  total = ref(0),
  // 列表数据
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '60'
    },
    {
      label: '专家姓名',
      key: 'expertName',
      prop: 'expertName',
      minWidth: '80',
      showOverflowTooltip: true
    },
    {
      label: '工作单位',
      key: 'company',
      prop: 'company',
      minWidth: '150',
      showOverflowTooltip: true
    },
    {
      label: '手机号码',
      key: 'phoneNo',
      prop: 'phoneNo',
      width: '120'
    },
    {
      label: '专家类型',
      key: 'expertType[0].dictionaryName',
      prop: 'expertType[0].dictionaryName',
      width: '80'
    },
    {
      label: '创建时间',
      key: 'createTime',
      prop: 'createTime',
      width: '180'
    },
    {
      label: '操作',
      slot: 'action',
      width: '240',
      fixed: 'right'
    }
  ]),
  data = ref([]),
  areaCode = ref(),
  getTree = (value) => {
    searchForm.intentionRegionInfo = {
      regionCode: value.regionCode,
      regionLevel: value.regionLevel
    }
    tableListRef.value.pageParams.pageNumber = 1
    getTableData()
  },
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await getExpertList({
      ...pageParams,
      ...searchForm,
      year: searchForm.year * 1 || undefined,
      areaCode: areaCode.value || undefined
    })
    data.value = res.data.records
    total.value = res.data.total
  },
  search = () => {
    getTableData()
  },
  reset = () => {
    searchForm.expertName = undefined
    searchForm.company = undefined
    searchForm.expertTypeDictionaryCode = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  toAddorEditExpert = (row) => {
    if (row.userId) {
      router.push({ name: 'addOrEditExpert', query: { id: row.userId }})
    } else {
      router.push({ name: 'addOrEditExpert' })
    }
  },
  checkDetail = (row) => {
    router.push({ name: 'expertDetail', query: { id: row.userId }})
  },
  checkDeputyActivityRecord = (row) => {
    router.push({ name: 'deputyActivityRecord', query: { id: row.userId, name: row.expertName }})
  },
  expertApply = () => {
    const timestamp = new Date().getTime()
    const time = window.btoa(timestamp)
    const routeData = router.resolve({
      name: 'expertEnroll',
      query: { time }
    })
    window.open(routeData.href, '_blank')
  },
  del = (data) => {
    proxy.$messageBox
      .confirm(`确定要删除${data.expertName}专家吗?`, '提示！', {
        type: 'warning'
      }).then(async () => {
        await delivery(data.userId)
        proxy.$message.success('删除成功')
        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.company"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="专家类型">
                <el-select
                  v-model="searchForm.expertTypeDictionaryCode"
                  placeholder="全部"
                  class="w-full"
                >
                  <el-option
                    v-for="(item,index) in dictList &&
                      dictList.length &&
                      dictList.find(i => i.dictionaryName === 'expert_type')
                        .dictionaryList"
                    :key="index"
                    :label="item.describe"
                    :value="item.dictionaryCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <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">
        <template #header>
          <div class="flex justify-between">
            <span>列表</span>
            <div>
              <el-button
                type="primary"
                plain
                size="small"
                icon="Plus"
                @click="toAddorEditExpert"
              >新增专家</el-button>
              <el-button
                type="primary"
                size="small"
                @click="expertApply"
              >专家报名</el-button>
            </div>
          </div>
        </template>
        <table-list
          ref="tableListRef"
          :column="column"
          :data="data"
          :total="total"
          @get-table-data="getTableData"
        >
          <template #action="{ scope }">
            <a @click="toAddorEditExpert(scope.row)">编辑</a>
            <a @click="checkDetail(scope.row)">详情</a>
            <a @click="checkDeputyActivityRecord(scope.row)">履职记录</a>
            <a class="text-danger" @click="del(scope.row)">删除</a>
          </template>
        </table-list>
      </el-card>
    </el-col>
  </el-row>
</template>
<style lang='less' scoped>
</style>
