<template>
  <el-card shadow="never" class="m-t-10px">
    <template #header>
      <div style="display: flex; justify-content: space-between;">
        <CardTitle title="教育经历" />
        <el-button link type="primary" @click="handleAdd"><Icon icon="ep:plus" class="mr-5px" />新增</el-button>
      </div>
    </template>
    <el-table :data="list" :stripe="true">
      <el-table-column label="学校名称" align="center" prop="schoolName" />
      <el-table-column label="专业名称" align="center" prop="major" />
      <el-table-column label="学历" align="center" prop="educationType">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.MENDUNER_EDUCATION_TYPE" :value="scope.row.educationType" />
        </template>
      </el-table-column>
      <el-table-column label="在校日期" align="center" prop="startTime">
        <template #default="scope">
          {{ scope.row.startTime ? timesTampChange(scope.row.startTime, 'Y-M') : '' }}
          <span v-if="scope.row.startTime && scope.row.endTime">至</span>
          {{ scope.row.endTime ? timesTampChange(scope.row.endTime, 'Y-M') : '' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" prop="actions">
        <template #default="{ row, $index }">
          <el-button link type="primary" @click="handleEdit(row, $index)">编辑</el-button>
          <el-button link type="danger" @click="handleDelete($index, row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <Dialog title="教育经历编辑" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="80px"
    >
      <el-form-item label="学校名称" prop="schoolName" required>
        <el-input v-model="formData.schoolName" />
      </el-form-item>
      <el-form-item label="专业名称" prop="major" required>
        <el-input v-model="formData.major" />
      </el-form-item>
      <el-form-item label="学历" prop="educationType" required>
        <el-select v-model="formData.educationType" placeholder="请选择学历" @change="val => handleChangeSelect(val, 'MENDUNER_EDUCATION_TYPE', 'educationTypeStr')">
          <el-option v-for="dict in getIntDictOptions(DICT_TYPE.MENDUNER_EDUCATION_TYPE)" :key="dict.value" :label="dict.label" :value="dict.value.toString()" />
        </el-select>
      </el-form-item>
      <el-form-item label="开始日期" prop="startTime" required>
        <el-date-picker v-model="formData.startTime" type="month" :disabledDate="disabledDates" value-format="x" placeholder="选择在校开始日期" />
      </el-form-item>
      <el-form-item label="结束日期" prop="endTime" required>
        <el-date-picker v-model="formData.endTime" type="month" :disabledDate="disabledDates" value-format="x" placeholder="选择在校结束日期" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary">确 定</el-button>
      <el-button @click="dialogVisible = false; formData = {}">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup>
defineOptions({ name: 'TalentMapEdu'})
import { cloneDeep } from 'lodash-es'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { timesTampChange } from '@/utils/transform/date'
import { TalentMap } from '@/api/menduner/system/talentMap';

const props = defineProps({
  modelValue: Array,
  isEdit: Boolean
})
const list = ref([])
watch(() => props.modelValue, (newVal) => {
  list.value = newVal
}, { deep: true })

const message = useMessage() // 消息弹窗
const editIndex = ref(0)
const formRef = ref()
const dialogVisible = ref(false)
const formData = ref({})
const type = ref('add')
const formRules = reactive({
  schoolName: [{ required: true, message: '学校名称不能为空', trigger: 'blur' }],
  major: [{ required: true, message: '专业名称不能为空', trigger: 'blur' }],
  educationType: [{ required: true, message: '学历不能为空', trigger: 'blur' }],
  startDate: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
  endDate: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }]
})

// 未来的时间不可选
const disabledDates = (date) => {
  return date.getTime() > Date.now()
}

// 新增
const handleAdd = () => {
  type.value = 'add'
  dialogVisible.value = true
}

// 编辑
const handleEdit = (row, index) => {
  type.value = 'edit'
  editIndex.value = index
  formData.value = cloneDeep(row)
  dialogVisible.value = true
}

// 删除
const handleDelete = async (index, id) => {
  try {
    await message.delConfirm()
    if (props.isEdit) {
      await TalentMap.deleteTalentMapEdu(id)
      list.value.splice(index, 1)
      message.success('删除成功')
    } else list.value.splice(index, 1)
  } catch {}
}

// 下拉框选择
const handleChangeSelect = (val, dictType, labelKey) => {
  const dict = getIntDictOptions(DICT_TYPE[dictType])
  const obj = dict.find(e => e.value.toString() === val)
  formData.value[labelKey] = obj?.label
}

const submitForm = async () => {
  await formRef.value.validate()

  if (props.isEdit) {
    const data = type.value === 'add' ? await TalentMap.createTalentMapEdu(formData.value) : await TalentMap.updateTalentMapEdu(formData.value)
    message.success(type.value === 'add' ? '添加成功' : '编辑成功')
    if (type.value === 'add') formData.value.id = data
    type.value === 'add' ? list.value.push(formData.value) : list.value[editIndex.value] = formData.value
  } else type.value === 'add' ? list.value.push(formData.value) : list.value[editIndex.value] = formData.value

  formData.value = {}
  editIndex.value = 0
  dialogVisible.value = false
}
</script>
