<!-- 人员登记 检定员信息 -->
<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 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: '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 verTotal = ref<number>(0) // 数据总条数
const verifierList = ref<IStaffVerifierInfo[]>([]) // 表格数据

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

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

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

const getVerifierListByStaffId = () => {
  getVerifierList(verListQuery).then((res) => {
    if (res.code === 200) {
      verTotal.value = res.data.total
      verifierList.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 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 showEditDialog = (row: IStaffVerifierInfo, tableName: string) => {
  switch (tableName) {
    case 'verifier' :
      refVerifierDialog.value.initRecordData(row)
      refVerifierDialog.value.showRecordDialog(true, '编辑')
      break

    default:
      break
  }
}

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

    default:
      break
  }
}

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

  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 v-if="props.operation !== 'detail'" fixed="right" label="操作" align="center" width="130">
              <template #default="{ row }">
                <el-button size="small" type="primary" @click="showEditDialog(row, 'verifier')">
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </template>
        </normal-table>
      </table-container>
    </el-form>

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