<!-- 证书逾期提醒详情 -->
<script name="RemindList" lang="ts" setup>
import { dayjs } from 'element-plus'
import type { IStaffVerifierInfo } from '../register/person-regitster'
import type { ICertInfo } from './remind-interface'
import { getVerifierList } from '@/api/resource/register'
import type { TableColumn } from '@/components/NormalTable/table_interface'

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

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

const certInfo = ref<ICertInfo>({
  id: '',
  certNo: '',
  certName: '',
  staffId: '',
  staffNo: '',
  staffName: '',
  deptId: '',
  deptName: '',
  station: '',
  major: '',
  staffType: '',
  staffTypeName: '',
})

const certColumns = ref<Array<TableColumn>>([
  { text: '证书号', value: 'certNo', align: 'center', width: '160' },
  { text: '证书名称', value: 'certName', align: 'center' },
  { text: '发放日期', value: 'grantDate', align: 'center', width: '160' },
  { text: '有效日期', value: 'effectiveDate', align: 'center', width: '160' },
  { text: '发放单位', value: 'grantCompany', align: 'center' },
  { text: '附件', value: 'file', align: 'center' },
]) // 表头

const staffCertList = ref<IStaffVerifierInfo[]>([]) // 表格数据

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

const getCertListByStaffId = (staffId: string) => {
  getVerifierList({ id: staffId, limit: 1200, offset: 1 }).then((res) => {
    if (res.code === 200) {
      staffCertList.value = res.data.rows.map((item: any) => ({
        ...item,
        grantDate: dayjs(item.grantDate).format('YYYY-MM-DD'),
        effectiveDate: dayjs(item.effectiveDate).format('YYYY-MM-DD'),
      }))
    }
  })
}

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

  switch (params.type) {
    case 'detail':
      certInfo.value = JSON.parse(sessionStorage.getItem('certInfo')!)
      getCertListByStaffId(certInfo.value.staffId)

      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="basicFormRef" :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.staffNo" :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.staffName" :disabled="true" />
            </el-form-item>
            <el-form-item label="人员类别">
              <el-input v-model="certInfo.staffTypeName" :disabled="true" />
            </el-form-item>
          </el-col>

          <!-- 第一行 第三列 -->
          <el-col :span="6">
            <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.station" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-form ref="certFormRef" label-position="right" label-width="110px" border stripe>
        <table-container title="检定员证书" style="margin-top: 20px;">
          <!-- 表格区域 -->
          <el-table :data="staffCertList" :columns="certColumns" border>
            <el-table-column align="center" label="序号" width="55" type="index" />
            <el-table-column
              v-for="item in certColumns"
              :key="item.value"
              :prop="item.value"
              :label="item.text"
              align="center"
            >
              <template #header>
                <span>{{ item.text }}</span>
              </template>
            </el-table-column>
          </el-table>
        </table-container>
      </el-form>
    </detail-page>
  </app-container>
</template>