<!-- 人员登记 基本信息 -->
<script name="RegisterTrainning" lang="ts" setup>
import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
import type { IStaffTrainningInfo } from '../person-regitster'
import TrainningDialog from './trainningDialog.vue'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { delTrainningRecList, getTrainningList } from '@/api/resource/register'

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

const refTrainningDialog = ref()

const trnListQuery = {
  id: '',
  limit: 20,
  offset: 1,
}
const trainColumns = ref<Array<TableColumn>>([
  { text: '编号', value: 'trainNo', align: 'center', width: '180' },
  { text: '名称', value: 'trainName', align: 'center' },
  { text: '培训时间', value: 'trainDate', align: 'center', width: '160' },
  { text: '培训地点', value: 'trainLocation', align: 'center' },
  { text: '培训内容', value: 'trainText', align: 'center' },
  { text: '完成情况', value: 'trainScore', align: 'center' },
  { text: '登记人', value: 'createUser', align: 'center', width: '160' },
]) // 表头
const trnTotal = ref<number>(0) // 数据总条数
const trainList = ref([]) // 表格数据

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

// 逻辑
const trainMultiSelect = (e: any) => {
  trainningSelected.value = e
}

const checkRowDisabled = (row: IStaffTrainningInfo, index: number, setSelectable: Function) => {
  if (row.resource !== '' && row.resource!.length > 2) {
    setSelectable('true')
  }
  else {
    setSelectable('false')
  }
}

const getTrainningListByStaffId = (staffId = '') => {
  if (staffId !== '') {
    trnListQuery.id = staffId
  }
  getTrainningList(trnListQuery).then((res) => {
    if (res.code === 200) {
      trnTotal.value = res.data.total
      trainList.value = res.data.rows.map((item: any) => ({
        ...item,
        trainDate: dayjs(item.trainDate).format('YYYY-MM-DD'),
      }))
    }
  })
}

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

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

    default:
      break
  }
}

// 编辑
const showEditDialog = (row: IStaffTrainningInfo, tableName: string) => {
  switch (tableName) {
    case 'trainning' :
      refTrainningDialog.value.initRecordData(row)
      refTrainningDialog.value.showRecordDialog(true, '编辑')
      break

    default:
      break
  }
}

// 批量删除
const delTrainningRecords = () => {
  if (trainningSelected.value.length === 0) {
    ElMessage.warning('请至少选择一行')
    return
  }

  ElMessageBox.confirm('是否删除训练情况，此操作不可恢复', '提示', {
    confirmButtonText: '确认删除',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
  // 前端界面删除
    trainList.value = trainList.value.filter(item => trainningSelected.value.includes(item) === false)

    // 调用后端接口进行删除
    const trainIdsSelected = ref<string[]>([])
    trainIdsSelected.value = trainningSelected.value.map((item: { id: string }) => item.id)
    trainIdsSelected.value = trainIdsSelected.value.filter(item => item !== '')
    if (trainIdsSelected.value.length > 0) {
      delTrainningRecList({ ids: trainIdsSelected.value }).then((res) => {
        if (res.code === 200) {
          ElMessage.success('删除训练情况记录成功')
        }
        else {
          ElMessage.error(`删除训练情况记录失败：${res.message}`)
        }

        getTrainningListByStaffId()
      })
    }
  })
}

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

  getTrainningListByStaffId()
})

defineExpose({
  getTrainningListByStaffId,
})
</script>

<template>
  <app-container>
    <el-form ref="ruleFormRef" 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('trainning')">
            增加行
          </el-button>
          <el-button type="info" @click="delTrainningRecords">
            删除行
          </el-button>
        </template>

        <!-- 表格区域 -->
        <normal-table
          id="registerTabel"
          :data="trainList" :columns="trainColumns"
          :query="{ limit: trnListQuery.limit, offset: trnListQuery.offset }"
          :is-showmulti-select="props.operation !== 'detail'"
          @change="changeTrainningPage"
          @multi-select="trainMultiSelect"
          @row-disabled="checkRowDisabled"
        >
          <template #preColumns>
            <el-table-column label="序号" width="55" align="center">
              <template #default="scope">
                {{ 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" :disabled="row.resource !== '' && row.resource.length > 2" type="primary" @click="showEditDialog(row, 'trainning')">
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </template>
        </normal-table>
      </table-container>
    </el-form>

    <trainning-dialog ref="refTrainningDialog" :staff-id="props.staffId" @record-saved="getTrainningListByStaffId" />
  </app-container>
</template>