<!-- 人员证书编辑弹窗 -->
<script name="VerifierDialog" lang="ts" setup>
import { ElLoading, ElMessage, dayjs } from 'element-plus'
import type { IStaffVerifierDetail, IStaffVerifierInfo } from '../person-regitster'
import VerifierDetailDialog from './verifierDetailDialog.vue'
import type { IDictType } from '@/commonInterface/resource-interface'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { UploadFile } from '@/api/file'
import { addVerifierRec, updateVerifierRec } from '@/api/resource/register'

const props = defineProps({
  staffId: { type: String, default: '' },
})

const emit = defineEmits(['recordSaved'])

const verifierFormRef = ref()
const refVerifierDetail = ref()
const refFilePreviewDlg = ref()
const refImagePreviewDlg = ref()

const title = ref<string>('')
const disabled = ref<boolean>()
const verifierDetailSelected = ref<Array<IStaffVerifierDetail>>([])
const fileList = ref<Array<string>>([])

const staffVerifier = ref<IStaffVerifierInfo>({
  id: '',
  staffId: '',
  certNo: '',
  certName: '',
  certType: '',
  certTypeName: '',
  grantDate: '',
  effectiveDate: '',
  grantCompany: '',
  file: '',
  verifierDetailList: [],
})

const staffVerifierRules = ref({
  certType: [{ required: true, message: '证书类型不能为空', trigger: ['change', 'blur'] }],
  certNo: [{ required: true, message: '证书号不能为空', trigger: 'blur' }],
  certName: [{ required: true, message: '证书名称不能为空', trigger: 'blur' }],
  grantDate: [{ required: true, message: '发放日期不能为空', trigger: 'blur' }],
  effectiveDate: [{ required: true, message: '有效日期不能为空', trigger: 'blur' }],
  grantCompany: [{ required: true, message: '发放单位不能为空', trigger: 'blur' }],
}) // 表单验证规则

const verifierColumns = ref<Array<TableColumn>>([
  { text: '持证参数', value: 'certificateParameters', align: 'center', width: '240' },
  { text: '可开展检定项工作', value: 'identifiableWork', align: 'center' },
  { text: '发证日期', value: 'certificationDate', align: 'center', width: '120' },
]) // 表头

const showDialog = ref(false)

const certTypeDict = ref<Array<IDictType>>([])

// 逻辑
const initCertTypeDict = () => {
  if (sessionStorage.getItem('bizCertType') !== null && sessionStorage.getItem('bizCertType') !== '') {
    certTypeDict.value = JSON.parse(sessionStorage.getItem('bizCertType')!)
  }
}

const showRecordDialog = (show: boolean, tableTitle = '', operType = 'update') => {
  showDialog.value = show
  title.value = tableTitle
  disabled.value = operType === 'detail'

  initCertTypeDict()

  nextTick(() => {
    verifierFormRef.value.clearValidate()
  })

  if (show === false) {
    staffVerifier.value = {
      id: '',
      staffId: '',
      certNo: '',
      certName: '',
      certType: '',
      certTypeName: '',
      grantDate: '',
      effectiveDate: '',
      grantCompany: '',
      file: '',
      verifierDetailList: [],
    }
  }
}

const initRecordData = (record: IStaffVerifierInfo) => {
  staffVerifier.value = { ...record }
  fileList.value = staffVerifier.value.file === '' ? [] : staffVerifier.value.file.split(',')
  staffVerifier.value.verifierDetailList = staffVerifier.value.verifierDetailList.map((detail: IStaffVerifierDetail) => {
    return {
      ...detail,
      certificationDate: dayjs(detail.certificationDate).format('YYYY-MM-DD'),
    }
  })
}

const uploadVerifierFile: any = (file: any) => {
  const fd = new FormData()
  fd.append('multipartFile', file.file)
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  UploadFile(fd).then((res) => {
    if (res.code === 200) {
      ElMessage.success('附件上传成功')
      fileList.value.push(res.data[0]) // 支持多个文件
      staffVerifier.value.file = fileList.value.join(',')
      loading.close()
    }
  }).catch(() => {
    loading.close()
    ElMessage.error('附件上传失败')
  })
}

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

const removeUploadedFile = (filename: string) => {
  const index = fileList.value.indexOf(filename)
  fileList.value = fileList.value.slice(0, index).concat(fileList.value.slice(index + 1))
  staffVerifier.value.file = fileList.value.join(',')
}

const saveStaffVerifier = async () => {
  await verifierFormRef.value.validate((valid: boolean) => {
    if (valid === true) {
      if (staffVerifier.value.id === '') {
        staffVerifier.value.staffId = props.staffId
        addVerifierRec(staffVerifier.value).then((res) => {
          if (res.code === 200) {
            ElMessage.success('人员证书保存成功')
            emit('recordSaved')
            showRecordDialog(false)
          }
          else {
            ElMessage.success(`人员证书保存失败：${res.message}`)
          }
        })
      }
      else {
        updateVerifierRec(staffVerifier.value).then((res) => {
          if (res.code === 200) {
            ElMessage.success('人员证书保存成功')
            emit('recordSaved')
            showRecordDialog(false)
          }
          else {
            ElMessage.success(`人员证书保存失败：${res.message}`)
          }
        })
      }
    }
  })
}

const showVerifierDetail = () => {
  refVerifierDetail.value.showDialog(true, '新增')
}

const delVerifierDetail = () => {
  verifierDetailSelected.value.forEach((select) => {
    const index = staffVerifier.value.verifierDetailList.indexOf(select)
    staffVerifier.value.verifierDetailList = staffVerifier.value.verifierDetailList.slice(0, index).concat(staffVerifier.value.verifierDetailList.slice(index + 1))
  })
}

const verDetailMultiSelect = (e: any) => {
  verifierDetailSelected.value = e
}

const editVerifierDetail = (detail: IStaffVerifierDetail) => {
  refVerifierDetail.value.initVerifierDetail(detail)
  refVerifierDetail.value.showDialog(true, '编辑')
}

const verifierDetailHandler = (record: IStaffVerifierDetail) => {
  if (record.id === '') {
    // 新建的持证参数
    staffVerifier.value.verifierDetailList.push(record)
  }
  else {
    // 遍历数组 更新指定的属性
    staffVerifier.value.verifierDetailList.forEach((item) => {
      if (item.id === record.id) {
        item.certificateParameters = record.certificateParameters
        item.identifiableWork = record.identifiableWork
        item.certificationDate = record.certificationDate
      }
    })
  }
}

defineExpose({
  showRecordDialog,
  initRecordData,
})
</script>

<template>
  <el-dialog v-model="showDialog" :title="`${title}人员证书`" :append-to-body="true" :close-on-click-modal="false" width="60%">
    <detail-block title="">
      <el-form ref="verifierFormRef" :model="staffVerifier" :rules="staffVerifierRules" label-position="right" label-width="110px" border stripe>
        <el-row :gutter="24">
          <el-col :span="9" :offset="3">
            <el-form-item label="证书类型" prop="certType">
              <el-select v-model="staffVerifier.certType" placeholder="请选择证书类型" clearable :disabled="disabled" style="width: 100%;">
                <el-option v-for="dict in certTypeDict" :key="dict.id" :value="dict.value" :label="dict.name" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="9">
            <el-form-item label="证书号" prop="certNo">
              <el-input v-model="staffVerifier.certNo" placeholder="请输入证书号" clearable :disabled="disabled" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="9" :offset="3">
            <el-form-item label="证书名称" prop="certName">
              <el-input v-model="staffVerifier.certName" placeholder="请输入证书名称" clearable :disabled="disabled" />
            </el-form-item>
          </el-col>

          <el-col :span="9">
            <el-form-item label="发放日期" prop="grantDate">
              <el-date-picker
                v-model="staffVerifier.grantDate" placeholder="请选择发放日期" :disabled="disabled"
                format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="9" :offset="3">
            <el-form-item label="有效日期" prop="effectiveDate">
              <el-date-picker
                v-model="staffVerifier.effectiveDate" placeholder="请选择有效日期" :disabled="disabled"
                format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" style="width: 100%;"
              />
            </el-form-item>
          </el-col>

          <el-col :span="9">
            <el-form-item label="发放单位" prop="grantCompany">
              <el-input v-model="staffVerifier.grantCompany" placeholder="请输入发放单位" :disabled="disabled" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="附件">
              <el-input v-model="staffVerifier.file" type="hidden" />

              <el-upload
                :show-file-list="false"
                multiple
                :http-request="uploadVerifierFile"
              >
                <el-button :disabled="disabled" type="primary">
                  上传
                </el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item>
              <template v-if="fileList.length > 0">
                <el-tag
                  v-for="file in fileList" :key="file" size="large" :closable="!disabled" style="margin-right: 10px; margin-bottom: 10px; cursor: pointer;"
                  @click="openFilePreviewDialog(file)"
                  @close="removeUploadedFile(file)"
                >
                  {{ file }}
                </el-tag>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block>

    <template v-if="staffVerifier.certType === '1'">
      <table-container title="人员证书">
        <template v-if="disabled === false" #btns-right>
          <el-button type="primary" @click="showVerifierDetail">
            增加行
          </el-button>
          <el-button type="info" @click="delVerifierDetail">
            删除行
          </el-button>
        </template>

        <!-- 表格区域 -->
        <normal-table
          id="verifierTabel"
          :data="staffVerifier.verifierDetailList" :columns="verifierColumns"
          :pagination="false"
          :is-showmulti-select="disabled === false"
          @multi-select="verDetailMultiSelect"
        >
          <template #preColumns>
            <el-table-column label="序号" width="55" align="center">
              <template #default="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
          </template>

          <template v-if="disabled === false" #columns>
            <el-table-column fixed="right" label="操作" align="center" width="60">
              <template #default="{ row }">
                <el-button size="small" type="primary" link @click="editVerifierDetail(row)">
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </template>
        </normal-table>
      </table-container>
    </template>

    <verifier-detail-dialog ref="refVerifierDetail" :staff-id="staffVerifier.staffId" @record-saved="verifierDetailHandler" />
    <file-preview-dialog ref="refFilePreviewDlg" />
    <image-preview-dialog ref="refImagePreviewDlg" />

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showRecordDialog(false)">取消</el-button>
        <el-button v-if="disabled === false" type="primary" @click="saveStaffVerifier">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>