<!-- 人员训练情况编辑弹窗 -->
<script name="TrainningDialog" lang="ts" setup>
import { ElLoading, ElMessage, dayjs } from 'element-plus'
import type { IStaffTrainningInfo } from '../person-regitster'
import { addTrainningRec, updateTrainningRec } from '@/api/resource/register'
import useUserStore from '@/store/modules/user'

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

const emit = defineEmits(['recordSaved'])

const trainningFormRef = ref()
const userInfo = useUserStore()

const title = ref<string>('')

const staffTrainning = ref<IStaffTrainningInfo>({
  id: '',
  staffId: '',
  trainNo: '',
  trainName: '',
  trainDate: '',
  trainLocation: '',
  trainText: '',
  trainScore: '',
  createUser: '',
  resource: '',
})

const staffTrainningRules = ref({
  trainNo: [{ required: true, message: '编号不能为空', trigger: 'blur' }],
  trainName: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
  trainDate: [{ required: true, message: '日期不能为空', trigger: ['blur', 'change'] }],
  trainLocation: [{ required: true, message: '地点不能为空', trigger: 'blur' }],
  trainText: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
  trainScore: [{ required: true, message: '完成情况不能为空', trigger: 'blur' }],
}) // 表单验证规则

const showDialog = ref(false)

// 逻辑
const showRecordDialog = (show: boolean, tableTitle = '', operType = 'update') => {
  showDialog.value = show
  title.value = tableTitle

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

  if (operType === 'create') {
    staffTrainning.value.createUser = userInfo.name
  }

  if (show === false) {
    staffTrainning.value = {
      id: '',
      staffId: '',
      trainNo: '',
      trainName: '',
      trainDate: '',
      trainLocation: '',
      trainText: '',
      trainScore: '',
      createUser: '',
      resource: '',
    }
  }
}

const initRecordData = (record: IStaffTrainningInfo) => {
  staffTrainning.value = {
    ...record,
  }
}

const saveStaffTrainning = async () => {
  await trainningFormRef.value.validate((valid: boolean) => {
    if (valid === true) {
      if (staffTrainning.value.id === '') {
        staffTrainning.value.staffId = props.staffId
        addTrainningRec(staffTrainning.value).then((res) => {
          if (res.code === 200) {
            ElMessage.success('训练情况保存成功')
            emit('recordSaved')
            showRecordDialog(false)
          }
          else {
            ElMessage.success(`训练情况保存失败：${res.message}`)
          }
        })
      }
      else {
        updateTrainningRec(staffTrainning.value).then((res) => {
          if (res.code === 200) {
            ElMessage.success('训练情况保存成功')
            emit('recordSaved')
            showRecordDialog(false)
          }
          else {
            ElMessage.success(`训练情况保存失败：${res.message}`)
          }
        })
      }
    }
  })
}

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="trainningFormRef" :model="staffTrainning" :rules="staffTrainningRules" label-position="right" label-width="110px" border stripe>
        <el-row :gutter="24">
          <el-col :span="9" :offset="3">
            <el-form-item label="编号" prop="trainNo">
              <el-input v-model="staffTrainning.trainNo" placeholder="请输入编号" clearable />
            </el-form-item>
          </el-col>

          <el-col :span="9">
            <el-form-item label="名称" prop="trainName">
              <el-input v-model="staffTrainning.trainName" placeholder="请输入名称" clearable />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="9" :offset="3">
            <el-form-item label="时间" prop="trainDate">
              <el-date-picker v-model="staffTrainning.trainDate" placeholder="请选择训练日期" clearable 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="trainLocation">
              <el-input v-model="staffTrainning.trainLocation" placeholder="请输入训练地点" clearable />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="内容" prop="trainText">
              <el-input v-model="staffTrainning.trainText" placeholder="请输入训练内容" clearable />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="9" :offset="3">
            <el-form-item label="完成情况" prop="trainScore">
              <el-input v-model="staffTrainning.trainScore" placeholder="请输入训练完成情况" clearable />
            </el-form-item>
          </el-col>

          <el-col :span="9">
            <el-form-item label="登记人">
              <el-input v-model="staffTrainning.createUser" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block>

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