<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="name" />
      <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)">删除</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="name" required>
        <el-input v-model="formData.name" />
      </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: 'TalentMapJobIntention'})
import { cloneDeep } from 'lodash-es'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { timesTampChange } from '@/utils/transform/date'

const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: Array,
  isEdit: Boolean
})
const list = ref([])
watch(() => props.modelValue, (newVal) => {
  if (!newVal || !newVal.length) return list.value = []
  list.value = newVal.map(e => {
    return { name: e }
  })
}, { 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({
  name: [{ required: true, message: '意向职位不能为空', trigger: 'blur' }]
})

// 新增
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) => {
  try {
    await message.delConfirm()
    list.value.splice(index, 1)
    emit('update:modelValue', list.value.length ? list.value.map(e => e.name) : [])
    if (props.isEdit) emit('change', list.value.map(e => e.name), 'delete')
  } catch {}
}

const submitForm = async () => {
  await formRef.value.validate()
  type.value === 'add' ? list.value.push(formData.value) : list.value[editIndex.value] = formData.value
  formData.value = {}
  editIndex.value = 0
  dialogVisible.value = false

  emit('update:modelValue', list.value.map(e => e.name))
  if (props.isEdit) emit('change', list.value.map(e => e.name), type.value)
}
</script>
