<!-- 证书详情 -->
<script name="CertDetail" lang="ts" setup>
import { dayjs } from 'element-plus'
import type { IStaffVerifierDetail } from '../register/person-regitster'
import type { ICertInfo } from './cert-interface'
import { getCertDetailList } from '@/api/resource/certRemind'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import FilePreviewDialog from '@/components/filePreview/filePreviewDialog.vue'
import ImagePreviewDialog from '@/components/ImagePreview/imagePreviewDialog.vue'

const type = ref<string>('')
const id = ref<string>('')

const route = useRoute()
const router = useRouter()

const refFilePreviewDlg = ref()
const refImagePreviewDlg = ref()

const loading = ref<boolean>(false)

const certInfo = ref<ICertInfo>({
  id: '',
  staffId: '',
  staffNo: '',
  staffName: '',
  gender: '',
  genderName: '',
  staffType: '',
  staffTypeName: '',
  officerNo: '',
  deptId: '',
  deptName: '',
  station: '',
  major: '',
  engageDate: '',
  certNo: '',
  certName: '',
  certType: '',
  certTypeName: '',
  grantDate: '',
  effectiveDate: '',
  grantCompany: '',
  file: '',
})
const fileList = ref<Array<string>>([])

const detailColumns = ref<Array<TableColumn>>([
  { text: '持证参数', value: 'certificateParameters', align: 'center' },
  { text: '可开展检定项工作', value: 'identifiableWork', align: 'center' },
  { text: '发证日期', value: 'certificationDate', align: 'center', width: '200' },

]) // 表头

const verifierDetailList = ref<IStaffVerifierDetail[]>([]) // 表格数据

// 逻辑
// 关闭
const resetForm = () => {
  sessionStorage.removeItem('certInfo')
  router.go(-1)
}

const gerCertParamDetailList = (verifierId: string) => {
  loading.value = true
  getCertDetailList({ id: verifierId }).then((res) => {
    if (res.code === 200) {
      verifierDetailList.value = res.data.map((item: any) => ({
        ...item,
        certificationDate: dayjs(item.grantDate).format('YYYY-MM-DD'),
      }))
    }
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

const openFilePreviewDialog = (filename: string) => {
  if (filename.lastIndexOf('.pdf') > 0) {
    refFilePreviewDlg.value.initDialog(filename)
  }
  else {
    refImagePreviewDlg.value.initDialog(filename)
  }
}

const initDialog = (params: any) => {
  type.value = params.type
  id.value = params.id

  switch (params.type) {
    case 'detail':
      certInfo.value = JSON.parse(sessionStorage.getItem('certInfo')!)
      fileList.value = certInfo.value.file === '' ? [] : certInfo.value.file!.split(',')
      if (certInfo.value.certType === '1') {
        gerCertParamDetailList(certInfo.value.id!)
      }

      break
    default:

      break
  }
}

onMounted(async () => {
  initDialog(route.query)
})
</script>

<template>
  <app-container>
    <detail-page title="证书管理详情">
      <template #btns>
        <el-button type="info" @click="resetForm()">
          关闭
        </el-button>
      </template>

      <el-form ref="basicStaffFormRef" :model="certInfo" label-position="right" label-width="110px" border stripe>
        <el-row :gutter="24">
          <!-- 第一行 第一列 -->
          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model="certInfo.staffName" :disabled="true" />
            </el-form-item>

            <el-form-item label="工作部门">
              <el-input v-model="certInfo.deptName" :disabled="true" />
            </el-form-item>
          </el-col>

          <!-- 第一行 第二列 -->
          <el-col :span="6">
            <el-form-item label="性别">
              <el-input v-model="certInfo.genderName" :disabled="true" />
            </el-form-item>

            <el-form-item label="岗位">
              <el-input v-model="certInfo.station" :disabled="true" />
            </el-form-item>
          </el-col>

          <!-- 第一行 第三列 -->
          <el-col :span="6">
            <el-form-item label="人员类别">
              <el-input v-model="certInfo.staffTypeName" :disabled="true" />
            </el-form-item>

            <el-form-item label="从事专业">
              <el-input v-model="certInfo.major" :disabled="true" />
            </el-form-item>
          </el-col>

          <!-- 第一行 第四列 -->
          <el-col :span="6">
            <el-form-item label="军官/文职证号">
              <el-input v-model="certInfo.officerNo" :disabled="true" />
            </el-form-item>

            <el-form-item label="从事专业时间">
              <el-input v-model="certInfo.engageDate" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-form ref="basicCertFormRef" :model="certInfo" label-position="right" label-width="110px" border stripe>
        <el-row :gutter="24">
          <!-- 第一行 第一列 -->
          <el-col :span="6">
            <el-form-item label="证书类型">
              <el-input v-model="certInfo.certTypeName" :disabled="true" />
            </el-form-item>

            <el-form-item label="有效日期">
              <el-input v-model="certInfo.effectiveDate" :disabled="true" />
            </el-form-item>
          </el-col>

          <!-- 第一行 第二列 -->
          <el-col :span="6">
            <el-form-item label="证书号">
              <el-input v-model="certInfo.certNo" :disabled="true" />
            </el-form-item>

            <el-form-item label="发放单位">
              <el-input v-model="certInfo.grantCompany" :disabled="true" />
            </el-form-item>
          </el-col>

          <!-- 第一行 第三列 -->
          <el-col :span="6">
            <el-form-item label="证书名称">
              <el-input v-model="certInfo.certName" :disabled="true" />
            </el-form-item>
          </el-col>

          <!-- 第一行 第四列 -->
          <el-col :span="6">
            <el-form-item label="发放日期">
              <el-input v-model="certInfo.grantDate" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="附件">
              <template v-if="fileList.length > 0">
                <el-tag
                  v-for="file in fileList" :key="file" size="large" style="margin-right: 10px; margin-bottom: 10px; cursor: pointer;"
                  @click="openFilePreviewDialog(file)"
                >
                  {{ file }}
                </el-tag>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-form ref="certFormRef" label-position="right" label-width="110px" border stripe>
        <table-container v-if="certInfo.certType === '1'" v-loading="loading" title="持证参数列表" style="margin-top: 20px;">
          <!-- 表格区域 -->
          <el-table :data="verifierDetailList" :columns="detailColumns" border>
            <el-table-column align="center" label="序号" width="55" type="index" />
            <el-table-column
              v-for="item in detailColumns"
              :key="item.value"
              :prop="item.value"
              :label="item.text"
              :width="item.width"
              align="center"
            >
              <template #header>
                <span>{{ item.text }}</span>
              </template>
            </el-table-column>
          </el-table>
        </table-container>
      </el-form>
    </detail-page>

    <file-preview-dialog ref="refFilePreviewDlg" />
    <image-preview-dialog ref="refImagePreviewDlg" />
  </app-container>
</template>