<template>
  <div class="resume-box">
    <div class="resume-header mb-3">
      <div class="resume-title">{{ $t('resume.workExperience') }}</div>
      <v-btn  variant="text" color="primary" prepend-icon="mdi-plus-box" @click="handle(0)">{{ $t('common.add') }}</v-btn>
    </div>
    <!-- 编辑-表单 -->
    <div v-if="isEdit" class="educExpItem-edit">
      <h4 class="color6 my-3 mx-2"> {{ titleStatus ? $t('common.edit') : $t('common.add') }}{{ $t('resume.workExperience') }}</h4>
      <CtForm ref="CtFormRef" :items="formItems" style="width: 100%;"></CtForm>
      <div class="text-end mt-3">
        <v-btn class="half-button mr-3" variant="tonal" @click="isEdit = false">{{ $t('common.cancel') }}</v-btn>
        <v-btn color="primary" class="half-button" @click="handleSave">{{ $t('common.save') }}</v-btn>
      </div>
    </div>
    <!-- 展示 -->
    <div v-else-if="!dataList?.length" class="resumeNoDataText">{{ $t('resume.dataDefaultPrompt') }}{{ $t('resume.workExperience') }}...</div>
    <div
      v-else
      v-for="(item, index) in dataList" :key="'workExperience' + index"
      :class="[' mx-n2', {'mt-5': index }]"
    >
      <div class="educExpItem" @mouseenter="item.active = true" @mouseleave="item.active = false">
        <div class="level1 d-flex align-center justify-space-between" style="height: 40px;">
          <div>
            <span style="font-size: 18px; font-weight: bold;">{{ item.enterpriseName }}</span>
            <span class="color6 font15 ml-5">
              <span>{{ timesTampChange(item.startTime, 'Y-M') }}</span>
              <span class="mx-1">至</span>
              <span>{{ timesTampChange(item.endTime, 'Y-M') }}</span>
            </span>
          </div>
          <div v-if="item.active">
            <v-btn  variant="text" color="primary" prepend-icon="mdi-square-edit-outline" @click="handle(item)">{{ $t('common.edit') }}</v-btn>
            <v-btn  variant="text" color="primary" prepend-icon="mdi-trash-can-outline" @click="handleDelete(item)">{{ $t('common.delete') }}</v-btn>
          </div>
        </div>
        <div class="level2 my-2">
          <span class="color6 font15">{{ item.positionName }}</span>
        </div>
        <div class="level3">
          <span class="color6 font15">工作内容：{{ item.content }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="workExperience">
import CtForm from '@/components/CtForm'
import Snackbar from '@/plugins/snackbar'
import { getDict } from '@/hooks/web/useDictionaries'
import { getTimeStamp, timesTampChange } from '@/utils/date'
import { saveResumeWorkExp, getResumeWorkExp, deleteResumeWorkExp, enterpriseSearchByName } from '@/api/recruit/personal/resume'
import Confirm from '@/plugins/confirm'
import { dealCanBeInputtedSave, dealCanBeInputtedValueAndLabel } from '@/utils/getText'
// import { debounce } from 'lodash'
import { nextTick, reactive, ref } from 'vue'
const editId = ref(null)
const CtFormRef = ref()
const dictItemsObj = reactive({})
dictItemsObj.educationSystemType = [{ label: '全日制', value: '0' }, { label: '非全日制', value: '1' }]

// 企业名称下拉列表
const getSchoolListData = async (name, init = '') => {
  const item = formItems.value.options.find(e => e.key === 'enterpriseId')
  if (!item) return
  if (!init) item.value = null
  item[item.itemTextName] = name
  const data = await enterpriseSearchByName({ name })
  item.items = data
}
// const debouncedCallbackSchool = debounce(newValue => {
//   getSchoolListData(newValue)
// }, 500)

const positionSearch = (name, init = '') => {
  const item = formItems.value.options.find(e => e.key === 'positionId')
  if (!item) return
  if (!init) item.value = ''
  item[item.itemTextName] = name
}

const formItems = ref({
  options: [
    {
      type: 'combobox',
      key: 'enterpriseId',
      value: null,
      default: null,
      label: '企业名称 *',
      col: 6,
      outlined: true,
      clearable: true,
      canBeInputted: true, //
      itemTextName: 'enterpriseName',
      itemText: 'value',
      itemValue: 'key',
      rules: [v => !!v || '请选择企业名称'],
      search: getSchoolListData,
      items: []
    },
    {
      type: 'combobox',
      key: 'positionId',
      value: null,
      default: null,
      label: '职位名称 *',
      col: 6,
      outlined: true,
      clearable: true,
      canBeInputted: true, //
      itemTextName: 'positionName',
      itemText: 'nameCn',
      itemValue: 'id',
      rules: [v => !!v || '请选择职位名称'],
      search: val => positionSearch(val),
      items: []
    },
    {
      type: 'datePicker',
      key: 'startTime',
      dateType: 'month', // 时间类型 year month date time
      value: null,
      label: '起始时间 *',
      col: 6,
      outlined: true,
      clearable: true,
      rules: [v => !!v || '请选择起始时间']
      // options: {},
    },
    {
      type: 'datePicker',
      key: 'endTime',
      dateType: 'month', // 时间类型 year month date time
      value: null,
      label: '结束时间 *',
      col: 6,
      outlined: true,
      clearable: true,
      rules: [v => !!v || '请选择结束时间']
      // options: {},
    },
    {
      type: 'textarea',
      key: 'content',
      value: null,
      default: null,
      rows: 10,
      resize: true,
      counter: 2000,
      label: '工作内容 *',
      outlined: true,
      rules: [v => !!v || '请输入工作内容']
    },
  ]
})
// 左侧加mr
formItems.value.options.forEach((e, index) => {
  if (((index + 2) % 2 === 0) && Boolean(e.col) && e.col !== 12) e.flexStyle = 'mr-3'
})

// 获取数据
const dataList = ref([])
const getData = async () => {
  const data = await getResumeWorkExp()
  dataList.value = data
}
getData()

// 新增 或 编辑
const isEdit = ref(false)
const titleStatus = ref(0)
const handle = (item) => {
  titleStatus.value = item ? 1 : 0
  // if (!positionData.value || !positionData.value.length) getPositionData ()
  if (item) { // 编辑
    editId.value = item.id
    formItems.value.options.forEach(e => { // 回显
      if (e.canBeInputted) { // 特殊处理可输入下拉框
        dealCanBeInputtedValueAndLabel(e, item)
      }
      else if (e.type === 'datepicker') e.value = timesTampChange(item[e.key], 'Y-M')
      else if (item[e.key]) e.value = item[e.key]
    })
  } else { // 新增
    editId.value = null
    formItems.value.options.forEach(e => e.value = e.default || null)
  }
  nextTick(() => {
    isEdit.value = true
  })
}

// 保存-基础信息
const handleSave = async () => {
  const { valid } = await CtFormRef.value.formRef.validate()
  if (!valid) return
  const obj = {}
  formItems.value.options.forEach(e => {
    if (e.canBeInputted) { // 特殊处理可输入下拉框
      dealCanBeInputtedSave(e, obj)
    }
    else if (e.type === 'datepicker') obj[e.key] = getTimeStamp(e.value)
    else obj[e.key] = e.value
  })
  if (editId.value) obj.id = editId.value
  await saveResumeWorkExp(obj)
  Snackbar.success('保存成功！')
  isEdit.value = false
  await getData()
}

// 删除数据
const handleDelete = ({ id }) => {
  Confirm('系统提示', '是否确认删除此教育经历？').then(async () => {
    await deleteResumeWorkExp(id)
    getData(id)
    Snackbar.success('删除成功！')
  })
}

// 获取字典内容
const dictList = [
  { type: 'positionData', key: 'positionId' }
]
const getDictData = async (obj) => {
  const item = formItems.value.options.find(e => e.key === obj.key)
  if (item) { //  && !item.items?.length
    const { data } = await getDict(obj.type, null, obj.type)
    item.items = data || []
    dictItemsObj[obj.key] = data || []
  }
}
const getOptions = () => {
  dictList.forEach(obj =>  getDictData(obj))
}
getOptions()

</script>

<style scoped lang="scss">
.font15 { font-size: 15px;; }
.color9 { color: var(--color-999); }
.color6 { color: var(--color-666); }
.educExpItem {
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 10px 8px;
  &:hover {
    background-color: var(--color-f8);
  }
}
.educExpItem-edit {
  border-radius: 6px;
  padding: 2px 10px 8px;
  background-color: var(--color-f8);
}
</style>
