<script setup name='verifyDetail'>
import { getCurrentInstance, ref, reactive, watch, onMounted, nextTick } from 'vue'
import {
  getExpertVerifyDetail,
  submitVerifyResult,
  getExpertDetail,
  modifyDetail
} from '@/http/apis/expertManage/expertVerify'
import { useRouter, useRoute } from 'vue-router'
import Accessory from '@/components/accessory/index.vue'
import store from '@/store'
const { expertAuditStatusOptions } = store.dictStore.globalDicts
const activeName = ref('basicInfo'),
  { proxy } = getCurrentInstance(),
  dialogFormVisible = ref(false),
  route = useRoute(),
  router = useRouter(),
  routeName = ref(''),
  form = reactive({
    applyId: route.query.applyId
  }),
  rules = reactive({
    auditOpinion: [
      { required: true, message: '请填写审核意见', trigger: 'blur' }
    ]
  }),
  ruleFormRef = ref(''),
  submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
      if (valid) {
        if (recommendTitle.value === '通过') {
          form.applyResult = true
        } else {
          form.applyResult = false
        }
        await submitVerifyResult(form)
        form.auditOpinion = undefined
        dialogFormVisible.value = false
        proxy.$message.success('审核意见提交成功！')
        router.push({ name: 'expertVerify' })
      } else {
        console.log('error submit!', fields)
      }
    })
  },
  recommendTitle = ref(''),
  adopt = (title) => {
    recommendTitle.value = title
    dialogFormVisible.value = true
    nextTick(() => {
      ruleFormRef.value.resetFields()
    })
  },
  goBack = () => {
    router.push({ name: 'expertVerify' })
  },
  expertDetail = ref({ basicInfo: {}, eduInfo: {}, jobInfo: {}, professionalInfo: {}, recommendInfo: {}}),
  verifyInfo = ref(),
  getVerifyDetail = async () => {
    const res = await getExpertVerifyDetail({ applyId: route.query.applyId })
    verifyInfo.value = res.data
  },
  getExpertDetailRequest = async () => {
    const apiFn = route.query.applyType === 'expert_info_modify_admin' ? modifyDetail : getExpertDetail
    const res = await apiFn({ expertUserId: verifyInfo.value.expertUserId })
    expertDetail.value = res.data
  },
  // 查看文件
  view = (data) => {
    const routeUrl = router.resolve({
      path: '/fileView',
      query: { id: data }
    })
    window.open(routeUrl.href, '_blank')
  }
onMounted(async () => {
  await getVerifyDetail()
  await getExpertDetailRequest()
})
watch(
  route,
  (val) => {
    routeName.value = route.meta.title
  },
  { immediate: true, deep: true }
)
</script>

<template>
  <div class="footerPage">
    <el-card
      v-if="routeName ==='专家审核详情'"
      shadow="never"
      class="mb-16"
    >
      <div>
        <div class="flex justify-between items-center">
          <div class="flex-1">
            <p class="font-bold">关于{{ expertDetail.basicInfo.name }}的专家审核结果</p>
            <div class="mt-8 search">
              <el-form label-suffix=":">
                <el-row :gutter="24">
                  <el-col :span="6">
                    <el-form-item label="审核人">{{ verifyInfo?.auditor||'-' }}</el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="审核时间">{{ verifyInfo?.auditTime||'-' }}</el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="审核意见">{{ verifyInfo?.auditOption||'-' }}</el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
          <div class="textRight">
            <p>
              <span :class="`dot mr-4 bg-${verifyInfo&&verifyInfo.auditStatus&&expertAuditStatusOptions[verifyInfo.auditStatus]?.color}`"></span>
              <span :class="`font-semibold text-${verifyInfo&&verifyInfo.auditStatus&&expertAuditStatusOptions[verifyInfo.auditStatus]?.color}`">{{ verifyInfo&&verifyInfo.auditStatus&&expertAuditStatusOptions[verifyInfo.auditStatus]?.name }}</span>
            </p>
            <p>审核结果</p>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="tab-card" shadow="never">
      <template #header>
        <el-tabs v-model="activeName">
          <el-tab-pane label="基本信息" name="basicInfo" />
          <el-tab-pane label="学历信息" name="eduInfo" />
          <el-tab-pane label="职业信息" name="professionInfo" />
          <el-tab-pane label="专业信息" name="majorInfo" />
          <el-tab-pane label="推荐信息" name="recommendInfo" />
          <el-tab-pane label="其他信息" name="expertOtherInfo" />
        </el-tabs>
      </template>
      <el-descriptions
        v-if="activeName==='basicInfo'"
        :column="2"
        border
      >
        <el-descriptions-item
          label="专家名称"
          span="1"
          width="200px"
        >
          {{ expertDetail.basicInfo.name }}
        </el-descriptions-item>
        <el-descriptions-item label="是否在浙政钉组织" width="200px">
          {{ expertDetail.basicInfo.isDingUser?'是':'否' }}
        </el-descriptions-item>
        <el-descriptions-item
          label="手机号码"
          width="200px"
        >
          {{ expertDetail.basicInfo.phoneNo }}
        </el-descriptions-item>
        <el-descriptions-item label="性别">
          {{ expertDetail.basicInfo.gender === '1' ? '男': '女' }}
        </el-descriptions-item>
        <el-descriptions-item label="籍贯">
          {{ expertDetail.basicInfo.hometown }}
        </el-descriptions-item>
        <el-descriptions-item label="民族">
          {{ expertDetail.basicInfo.nationality }}
        </el-descriptions-item>
        <el-descriptions-item label="政治面貌">
          {{ expertDetail.basicInfo.political?.[0].dictionaryName }}
        </el-descriptions-item>
        <el-descriptions-item label="身份证号">
          {{ expertDetail.basicInfo.idCard }}
        </el-descriptions-item>
        <el-descriptions-item label="办公电话">
          {{ expertDetail.basicInfo.officePhone }}
        </el-descriptions-item>
        <el-descriptions-item label="出生年月">
          {{ expertDetail.basicInfo.birth }}
        </el-descriptions-item>
        <el-descriptions-item label="银行卡号">
          {{ expertDetail.basicInfo.bankNo }}
        </el-descriptions-item>
        <el-descriptions-item label="开户银行">
          {{ expertDetail.basicInfo.bank }}
        </el-descriptions-item>
        <el-descriptions-item span="1" label="电子邮箱">
          {{ expertDetail.basicInfo.email }}
        </el-descriptions-item>
        <el-descriptions-item label="专家级别">
          {{ expertDetail.basicInfo?.expertRegionInfo?.regionName.split('@@').map(i=>i.split('##')[1]).join('-') }}
        </el-descriptions-item>
        <el-descriptions-item label="专家来源">
          {{ expertDetail.basicInfo.expertSource?.[0].tagName }}
        </el-descriptions-item>
        <el-descriptions-item label="专家类型">
          {{ expertDetail.basicInfo.expertType?.[0].dictionaryName }}
        </el-descriptions-item>
        <el-descriptions-item label="履职意向">
          {{ expertDetail.basicInfo.expertIntentionWorkRegions?.map(i=>i.regionName.split('@@').map(j=>j.split('##')[1]).join('-')).join(';') }}
        </el-descriptions-item>
        <el-descriptions-item
          label="头像（免冠照）"
          span="2"
        >
          <a target="_blank" @click="view(expertDetail.basicInfo.avatarFile.fileId)">{{ expertDetail.basicInfo.avatarFile?.fileName }}</a>

        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        v-if="activeName==='eduInfo'"
        :column="2"
        border
      >
        <el-descriptions-item
          label="毕业院校"
          span="2"
          width="200px"
        >
          {{ expertDetail.eduInfo.school }}
        </el-descriptions-item>
        <el-descriptions-item label="毕业时间">
          {{ expertDetail.eduInfo.graduatedAt }}
        </el-descriptions-item>
        <el-descriptions-item
          label="所学专业"
          width="200px"
        >
          {{ expertDetail.eduInfo.academicTitle }}
        </el-descriptions-item>
        <el-descriptions-item label="学位">
          {{ expertDetail.eduInfo.degree?.[0].dictionaryName }}
        </el-descriptions-item>
        <el-descriptions-item label="学历">
          {{ expertDetail.eduInfo.edu?.[0].dictionaryName }}
        </el-descriptions-item>
        <el-descriptions-item label="毕业证书">
          <p v-for="(file,fileIndex) in expertDetail.eduInfo.graduationCertificateFile" :key="fileIndex" class="mb-4">
            <accessory :file-name="file.fileName" :file-id="file.fileId" />
          </p>
        </el-descriptions-item>
        <el-descriptions-item label="学位证书">
          <p v-for="(file,fileIndex) in expertDetail.eduInfo.degreeCertificateFile" :key="fileIndex" class="mb-4">
            <accessory :file-name="file.fileName" :file-id="file.fileId" />
          </p>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        v-if="activeName==='professionInfo'"
        :column="2"
        border
      >
        <el-descriptions-item
          label="工作单位"
          width="200px"
        >
          {{ expertDetail.jobInfo.company }}
        </el-descriptions-item>
        <el-descriptions-item label="工作单位code" width="200px">
          {{ expertDetail.jobInfo.companyUniqCode }}
        </el-descriptions-item>
        <el-descriptions-item
          label="单位法人编号"
          width="200px"
        >
          {{ expertDetail.jobInfo.legalEntityCode	}}
        </el-descriptions-item>
        <el-descriptions-item label="行政职务">
          {{ expertDetail.jobInfo.administrativeDuties }}
        </el-descriptions-item>
        <el-descriptions-item label="开始工作日期">
          {{ expertDetail.jobInfo.startWorkAt }}
        </el-descriptions-item>
        <el-descriptions-item label="行政职级">
          {{ expertDetail.jobInfo.administrativeRank?.[0].dictionaryName }}
        </el-descriptions-item>
        <el-descriptions-item label="在职状态">
          {{ expertDetail.jobInfo.jobStatus?.[0].dictionaryName }}
        </el-descriptions-item>
        <el-descriptions-item label="退休日期">
          {{ expertDetail.jobInfo.retiredAt }}
        </el-descriptions-item>
        <el-descriptions-item label="单位类型">
          {{ expertDetail.jobInfo.companyAttribute?.[0].dictionaryName }}
        </el-descriptions-item>
        <el-descriptions-item label="工作地址">
          {{ expertDetail.jobInfo.address }}
        </el-descriptions-item>
        <el-descriptions-item label="工作经历">
          {{ expertDetail.jobInfo.experience }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        v-if="activeName==='majorInfo'"
        :column="2"
        border
      >
        <el-descriptions-item
          label="技术职称"
          width="200px"
        >
          {{ expertDetail.professionalInfo.technicalTitles }}
        </el-descriptions-item>
        <el-descriptions-item label="职称级别" width="200px">
          {{ expertDetail.professionalInfo.titleLevel?.[0].dictionaryName }}
        </el-descriptions-item>
        <el-descriptions-item
          label="擅长方向"
          width="200px"
        >
          {{ expertDetail.professionalInfo.goodAt?.map(i=>i.tagName).join('、')||'-' }}
        </el-descriptions-item>
        <el-descriptions-item label="技术专长">
          {{ expertDetail.professionalInfo.technicalExpertise?.[0].tagName }}
        </el-descriptions-item>
        <el-descriptions-item label="行业领域">
          {{ expertDetail.professionalInfo.industrySector?.[0].tagName }}
        </el-descriptions-item>
        <el-descriptions-item label="获奖情况">
          {{ expertDetail.professionalInfo.awards }}
        </el-descriptions-item>
        <el-descriptions-item label="表彰奖励">
          {{ expertDetail.professionalInfo.recognitionReward }}
        </el-descriptions-item>
        <el-descriptions-item label="回避单位">
          <span v-for="(item,index) in expertDetail.professionalInfo.avoidCompanyList" :key="index">{{ item.companyName }}&nbsp;&nbsp;</span>
        </el-descriptions-item>
        <el-descriptions-item label="职称证明">
          <p v-for="(file,fileIndex) in expertDetail.professionalInfo.titleCertificateFile" :key="fileIndex" class="mb-4">
            <accessory :file-name="file.fileName" :file-id="file.fileId" />
          </p>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        v-if="activeName==='recommendInfo'"
        :column="2"
        border
      >
        <el-descriptions-item
          label="推荐类型"
          width="200px"
        >
          {{ expertDetail.recommendInfo.recommendedWay?.[0].dictionaryName }}
        </el-descriptions-item>
        <el-descriptions-item
          width="200px"
          label="推荐证明"
        >
          <p v-for="(file,fileIndex) in expertDetail.recommendInfo.recommendationProofFile" :key="fileIndex" class="mb-4">
            <accessory :file-name="file.fileName" :file-id="file.fileId" />
          </p>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        v-if="activeName==='expertOtherInfo'"
        :column="2"
        border
      >
        <el-descriptions-item
          label="其他标签"
          width="200px"
        >
          {{ expertDetail.expertOtherInfo?.other?.map(i=>i.tagName)?.join('、') ||'-' }}
        </el-descriptions-item>
        <el-descriptions-item
          width="200px"
          label="备注"
        >
          {{ expertDetail.expertOtherInfo?.remark ||'-' }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <div class="footer">
      <el-button
        v-if="routeName !=='专家审核详情'"
        type="primary"
        @click="adopt('通过')"
      >通过</el-button>
      <el-button
        v-if="routeName !=='专家审核详情'"
        plain
        type="danger"
        @click="adopt('驳回')"
      >驳回</el-button>
      <el-button
        @click="goBack"
      >返回</el-button>
    </div>
  </div>
  <el-dialog
    v-model="dialogFormVisible"
    :title="recommendTitle"
  >
    <el-form
      ref="ruleFormRef"
      :model="form"
      :rules="rules"
      status-icon
    >
      <el-form-item
        label="审核意见"
        label-width="auto"
        prop="auditOpinion"
      >
        <el-input
          v-model="form.auditOpinion"
          maxlength="200"
          placeholder="请输入"
          show-word-limit
          type="textarea"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="primary"
          @click="submitForm(ruleFormRef)"
        >
          提交
        </el-button>
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<style lang='less' scoped> </style>
