<!-- 人员登记 人员证书 -->
<script name="RegisterVerifier" lang="ts" setup>
import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
import type { IStaffVerifierInfo } from '../person-regitster'
import VerifierDialog from './verifierDialog.vue'
import FilePreviewDialog from '@/components/filePreview/filePreviewDialog.vue'
import ImagePreviewDialog from '@/components/ImagePreview/imagePreviewDialog.vue'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { delVerifierRecList, getVerifierList } from '@/api/resource/register'

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

/** ******* 授权信息表格 ********/
const verListQuery = {
  id: '',
  limit: 10,
  offset: 1,
}
const verifierColumns = ref<Array<TableColumn>>([
  { text: '证书类型', value: 'certTypeName', align: 'center', width: '160' },
  { text: '证书号', value: 'certNo', align: 'center', width: '200' },
  { text: '证书名称', value: 'certName', align: 'center' },
  { text: '发放日期', value: 'grantDate', align: 'center', width: '120' },
  { text: '有效日期', value: 'effectiveDate', align: 'center', width: '120' },
  { text: '发放单位', value: 'grantCompany', align: 'center' },
]) // 表头
const verTotal = ref<number>(0) // 数据总条数
const verifierList = ref<IStaffVerifierInfo[]>([]) // 表格数据

// 表格被选中的行
const verifierSelected = ref<IStaffVerifierInfo[]>([])

// 子组件引用
const refVerifierDialog = ref()
const refFilePreviewDlg = ref()
const refImagePreviewDlg = ref()

// 逻辑
const verMultiSelect = (e: any) => {
  verifierSelected.value = e
}

const getVerifierListByStaffId = (staffId = '') => {
  if (staffId !== '') {
    verListQuery.id = staffId
  }
  getVerifierList(verListQuery).then((res) => {
    if (res.code === 200) {
      verTotal.value = res.data.total
      verifierList.value = res.data.rows.map((item: any) => ({
        ...item,
        fileList: item.file.split(','),
        grantDate: dayjs(item.grantDate).format('YYYY-MM-DD'),
        effectiveDate: dayjs(item.effectiveDate).format('YYYY-MM-DD'),
      }))
    }
  })
}

// 表格换页
const changeVerifierPage = (val: { size?: number; page?: number }) => {
  if (val && val.size) {
    verListQuery.limit = val.size
  }
  if (val && val.page) {
    verListQuery.offset = val.page
  }
  getVerifierListByStaffId()
}

// 删除检定员信息记录
const delVerifierRecords = () => {
  if (verifierSelected.value.length === 0) {
    ElMessage.warning('请至少选择一行')
    return
  }

  ElMessageBox.confirm('是否删除检定员证书记录，此操作不可恢复', '提示', {
    confirmButtonText: '确认删除',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
  // 前端界面删除
    verifierList.value = verifierList.value.filter(item => verifierSelected.value.includes(item) === false)

    // 调用后端接口进行删除
    const verIdsSelected = ref<string[]>([])
    verIdsSelected.value = verifierSelected.value.map((item: { id: string }) => item.id)
    verIdsSelected.value = verIdsSelected.value.filter(item => item !== '')
    if (verIdsSelected.value.length > 0) {
      delVerifierRecList({ ids: verIdsSelected.value }).then((res) => {
        if (res.code === 200) {
          ElMessage.success('删除检定员证书记录成功')
        }
        else {
          ElMessage.error(`删除检定员证书记录失败：${res.message}`)
        }

        getVerifierListByStaffId()
      })
    }
  })
}

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

// 编辑
const showEditDialog = (row: IStaffVerifierInfo, tableName: string, type = 'update') => {
  switch (tableName) {
    case 'verifier' :
      refVerifierDialog.value.initRecordData(row)

      if (type === 'update') {
        refVerifierDialog.value.showRecordDialog(true, '编辑', type)
      }
      else if (type === 'detail') {
        refVerifierDialog.value.showRecordDialog(true, '', type)
      }

      break

    default:
      break
  }
}

const addEditableRow = (tableName: string) => {
  switch (tableName) {
    case 'verifier':
      refVerifierDialog.value.showRecordDialog(true, '新增', 'create')
      break

    default:
      break
  }
}

watch(() => props.staffId, (newVal: string) => {
  verListQuery.id = newVal

  getVerifierListByStaffId()
})

defineExpose({
  getVerifierListByStaffId,
})
</script>

<template>
  <app-container>
    <el-form ref="verifierFormRef" label-position="right" label-width="110px" border stripe>
      <table-container title="人员证书">
        <template v-if="props.operation !== 'detail'" #btns-right>
          <el-button type="primary" @click="addEditableRow('verifier')">
            增加行
          </el-button>
          <el-button type="info" @click="delVerifierRecords">
            删除行
          </el-button>
        </template>

        <!-- 表格区域 -->
        <normal-table
          id="verifierTabel"
          :data="verifierList" :total="verTotal" :columns="verifierColumns"
          :query="{ limit: verListQuery.limit, offset: verListQuery.offset }"
          :is-showmulti-select="props.operation !== 'detail'"
          @change="changeVerifierPage"
          @multi-select="verMultiSelect"
        >
          <template #preColumns>
            <el-table-column label="序号" width="55" align="center">
              <template #default="scope">
                {{ (verListQuery.offset - 1) * verListQuery.limit + scope.$index + 1 }}
              </template>
            </el-table-column>
          </template>

          <template #columns>
            <el-table-column label="附件" align="center">
              <template #default="scope">
                <el-link
                  v-for="file in scope.row.fileList"
                  :key="file"
                  @click="openFilePreviewDialog(file)"
                >
                  {{ file }}
                </el-link>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="130">
              <template #default="{ row }">
                <el-button size="small" type="primary" link @click="showEditDialog(row, 'verifier', 'detail')">
                  详情
                </el-button>
                <el-button v-if="props.operation !== 'detail'" size="small" type="primary" link @click="showEditDialog(row, 'verifier', 'update')">
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </template>
        </normal-table>
      </table-container>
    </el-form>

    <verifier-dialog ref="refVerifierDialog" :staff-id="props.staffId" @record-saved="getVerifierListByStaffId" />
    <file-preview-dialog ref="refFilePreviewDlg" />
    <image-preview-dialog ref="refImagePreviewDlg" />
  </app-container>
</template>