<!-- 教育档案编辑弹窗 -->
<script name="EducationDialog" lang="ts" setup>
import { ElMessage } from 'element-plus'
import type { IStaffEducationInfo } from '../person-regitster'
import type { IDictType } from '@/commonInterface/resource-interface'
import { addEducationRec, updateEducationRec } from '@/api/resource/register'

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

const emit = defineEmits(['recordSaved'])

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

const title = ref<string>('')
const educationFormRef = ref()

const staffEducation = ref<IStaffEducationInfo>({
  id: '',
  staffId: '',
  graduateSchool: '',
  speciality: '',
  education: '',
  startDate: '',
  endDate: '',
})

const staffEducationRules = ref({
  graduateSchool: [{ required: true, message: '毕业院校不能为空', trigger: 'blur' }],
  speciality: [{ required: true, message: '专业不能为空', trigger: 'blur' }],
  education: [{ required: true, message: '学历不能为空', trigger: ['blur', 'change'] }],
  startDate: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
  endDate: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
}) // 表单验证规则

const showDialog = ref(false)

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

  educationDict.value = JSON.parse(sessionStorage.getItem('educationDict')!)

  if (show === false) {
    staffEducation.value = {
      id: '',
      staffId: '',
      graduateSchool: '',
      speciality: '',
      education: '',
      startDate: '',
      endDate: '',
    }
  }
}

const initRecordData = (record: IStaffEducationInfo) => {
  staffEducation.value = { ...record }
}

const saveStaffEducation = async () => {
  await educationFormRef.value.validate((valid: boolean) => {
    if (valid === true) {
      if (staffEducation.value.id === '') {
        staffEducation.value.staffId = props.staffId
        addEducationRec(staffEducation.value).then((res) => {
          if (res.code === 200) {
            ElMessage.success('教育档案保存成功')
            emit('recordSaved')
            showRecordDialog(false)
          }
          else {
            ElMessage.success(`教育档案保存失败：${res.message}`)
          }
        })
      }
      else {
        updateEducationRec(staffEducation.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">
    <detail-block title="">
      <el-form ref="educationFormRef" :model="staffEducation" :rules="staffEducationRules" label-position="right" label-width="110px" border stripe>
        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="毕业院校" prop="graduateSchool">
              <el-input v-model="staffEducation.graduateSchool" placeholder="请输入毕业院校" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="专业" prop="speciality">
              <el-input v-model="staffEducation.speciality" placeholder="请输入专业" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="学历" prop="education">
              <el-select v-model="staffEducation.education" placeholder="请选择学历" style="width: 100%;">
                <el-option v-for="dict in educationDict" :key="dict.value" :label="dict.name" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18" :offset="3">
            <el-form-item label="开始时间" prop="startDate">
              <el-date-picker v-model="staffEducation.startDate" placeholder="请选择开始时间" 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="18" :offset="3">
            <el-form-item label="结束时间" prop="endDate">
              <el-date-picker v-model="staffEducation.endDate" placeholder="请选择结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" style="width: 100%;" />
            </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="saveStaffEducation">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>