<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="enterpriseName" />
      <el-table-column label="职位名称" align="center" prop="positionName" />
      <el-table-column label="在职时间" align="center" prop="startTime">
        <template #default="scope">
          {{ scope.row.startTime ? timesTampChange(scope.row.startTime, 'Y-M') : '' }}至
          {{ scope.row.endTime ? timesTampChange(scope.row.endTime, 'Y-M') : '至今' }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="工作内容" align="center" prop="content" :show-overflow-tooltip="true" /> -->
      <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="enterpriseName" required>
        <el-input v-model="formData.enterpriseName" />
      </el-form-item>
      <el-form-item label="职位名称" prop="positionName" required>
        <el-input v-model="formData.positionName" />
      </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">
        <el-date-picker v-model="formData.endTime" :disabled="sofar" :disabledDate="disabledDates" type="month"  value-format="x" placeholder="选择在职结束日期" />
        <el-checkbox v-model="sofar" label="至今" size="large" class="m-l-10px" @change="handleSofar" />
      </el-form-item>
      <el-form-item label="工作内容" prop="content">
        <el-input v-model="formData.content" :rows="8" type="textarea" />
      </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: 'TalentMapExp'})
import { cloneDeep } from 'lodash-es'
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 sofar = ref(false)
const formRules = reactive({
  enterpriseName: [{ required: true, message: '任职企业不能为空', trigger: 'blur' }],
  positionName: [{ required: true, message: '职位名称不能为空', trigger: 'blur' }],
  startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
  // endTime: [{ 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)
  sofar.value = !row.endTime
  dialogVisible.value = true
}

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

const submitForm = async () => {
  await formRef.value.validate()
  if (!sofar.value && !formData.value.endTime) return message.warning('请选择结束时间')

  if (props.isEdit) {
    const data = type.value === 'add' ? await TalentMap.createTalentMapExp(formData.value) : await TalentMap.updateTalentMapExp(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
}

const handleSofar = (e) => {
  if (e) formData.value.endTime = null
}
</script>
