<template>
  <div v-show="show" class="edit-expected-position">
    <el-form ref="formRef" :model="form" :rules="rules" hide-required-asterisk label-position="top">
      <el-row :gutter="28">
        <el-col :span="12">
          <el-form-item label="公司名称" prop="FCompanyName">
            <el-input v-model="form.FCompanyName" placeholder="请输入公司名称" size="large" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="所属行业" prop="FIndustry">
            <el-select
              v-model="form.FIndustry"
              size="large"
              placeholder="请选择所属行业"
              style="width: 100%"
            >
              <el-option
                v-for="item in informationData?.LevelJob"
                :key="item.FNUMBER"
                :label="item.FDATAVALUE"
                :value="item.FNUMBER"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="所属部门 (选填)">
            <el-input v-model="form.FDepartment" placeholder="请输入所属部门" size="large" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="职位名称" prop="FPosition">
            <el-input v-model="form.FPosition" placeholder="请输入职位名称" size="large" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="flx-align-center" style="display: flex; align-items: end">
          <el-form-item label="在职时间" prop="FStartDate">
            <el-date-picker
              v-model="form.FStartDate"
              type="month"
              placeholder="入职时间"
              size="large"
              :disabled-date="disabledDate"
              :shortcuts="shortcuts"
            />
          </el-form-item>
          <span style="margin: 0 16px 28px">至</span>
          <el-form-item label="" prop="FEndDate">
            <el-date-picker
              v-model="form.FEndDate"
              type="month"
              placeholder="离职时间"
              size="large"
              :disabled-date="disabledDate"
              :shortcuts="shortcuts"
            />
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="工作内容" prop="FJobContent_Tag">
            <div class="text-header">
              <el-icon size="28"><i-ep-MoreFilled /></el-icon>
            </div>
            <el-input
              v-model="form.FJobContent_Tag"
              type="textarea"
              show-word-limit
              :maxlength="1600"
              :rows="10"
              placeholder="请输入工作内容"
            />
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="工作业绩(选填)">
            <div class="text-header">
              <el-icon size="28"><i-ep-MoreFilled /></el-icon>
            </div>
            <el-input
              v-model="form.FWorkPerformance_Tag"
              type="textarea"
              show-word-limit
              :maxlength="300"
              :rows="10"
              :placeholder="`填写完整、有吸引力的工作业绩，有助于您获得更多老板的青睐 \n列如 \n1、取得的成绩..... \n2、实现的突破.....`"
            />
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="拥有技能：" prop="FJobKeywords">
            <el-tag
              v-for="tag in form.FPossessSkills"
              :key="tag"
              closable
              :disable-transitions="false"
              size="large"
              style="margin: 0 12px 12px 0"
              @close="handleTagClose(tag)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              v-if="inputVisible"
              ref="InputRef"
              v-model="inputValue"
              style="width: 14%; margin: 0 12px 12px 0"
              @keyup.enter="handleInputConfirm"
              @blur="handleInputConfirm"
            />
            <el-button v-else style="margin: 0 12px 12px 0" @click="showInput"> + 技能 </el-button>
          </el-form-item>
        </el-col>
        <el-col class="edit-resume-btn">
          <el-button size="large" style="width: 100px" @click="handleClose">取消</el-button>
          <el-button size="large" type="primary" style="width: 100px" @click="onConfirm"
            >完成</el-button
          >
          <el-icon
            v-show="form.FEntryID"
            color="#177CFA"
            style="margin-left: 30px"
            @click="delResume"
            ><i-ep-DeleteFilled
          /></el-icon>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { updateResume, deleteResume } from '@/services/api/recruitmentManagement'

defineProps({
  show: {
    type: Boolean,
    default: false
  },
  informationData: {
    type: Object,
    default: () => {}
  }
})

const emits = defineEmits(['update:show', 'init'])

const form = ref({
  FEntryID: 0,
  FStartDate: '', //开始时间
  FEndDate: '', //结束时间
  FCompanyName: '', //公司名称
  FPosition: '', //任职职位
  FIndustry: '', //所属行业
  FJobContent: '', //无需填写
  FJobContent_Tag: '', //工作内容
  FDepartment: '', //部门
  FWorkPerformance: '', //无需填写
  FWorkPerformance_Tag: '', //工作业绩
  FPossessSkills: [] as any //拥有技能
})

const rules = {
  FStartDate: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
  FEndDate: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
  FCompanyName: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
  FPosition: [{ required: true, message: '任职职位不能为空', trigger: 'blur' }],
  FIndustry: [{ required: true, message: '所属行业不能为空', trigger: 'change' }],
  FJobContent_Tag: [{ required: true, message: '工作内容不能为空', trigger: 'blur' }],
  FPossessSkills: [{ required: true, message: '拥有技能不能为空', trigger: 'blur' }]
}

const shortcuts = [
  {
    text: '至今',
    value: new Date(new Date().getFullYear(), new Date().getMonth())
  }
]

const formRef = ref()
const InputRef = ref()
const inputValue = ref()
const inputVisible = ref(false)

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}

const handleTagClose = (tag: string) => {
  form.value.FPossessSkills.splice(form.value.FPossessSkills.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    form.value.FPossessSkills.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}

const filterChange = () => {
  let data = {
    Parmeter: {
      NeedUpDateFields: [
        'FStartDate',
        'FEndDate',
        'FCompanyName',
        'FPosition',
        'FIndustry',
        'FJobContent',
        'FJobContent_Tag',
        'FDepartment',
        'FWorkPerformance',
        'FWorkPerformance_Tag',
        'FPossessSkills'
      ],
      IsDeleteEntry: 'false',
      Model: {
        FID: 0,
        F_LQKJ_WorkExperienceS: [
          {
            FEntryID: form.value.FEntryID ? form.value.FEntryID : 0,
            FStartDate: '', //开始时间
            FEndDate: '', //结束时间
            FCompanyName: '', //公司名称
            FPosition: '', //任职职位
            FIndustry: { FNumber: '' }, //所属行业
            FJobContent: '', //无需填写
            FJobContent_Tag: '', //工作内容
            FDepartment: '', //部门
            FWorkPerformance: '', //无需填写
            FWorkPerformance_Tag: '', //工作业绩
            FPossessSkills: '' //拥有技能
          }
        ]
      }
    }
  }

  data.Parmeter.Model.F_LQKJ_WorkExperienceS[0] = {
    ...data.Parmeter.Model.F_LQKJ_WorkExperienceS[0],
    ...form.value,
    FIndustry: { FNumber: form.value.FIndustry },
    FPossessSkills: form.value.FPossessSkills.join(',')
  }
  return data
}

const onConfirm = async () => {
  await formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      let data = filterChange()
      const res: any = await updateResume(data)
      if (res.code === 200) {
        ElNotification.success({
          title: `${form.value.FEntryID ? '更新' : '添加'}个人经历`,
          message: '更新成功'
        })
        handleClose()
        emits('init')
      }
    }
  })
}

const delResume = async () => {
  const res: any = await deleteResume({ Type: 'B', ID: form.value.FEntryID })
  if (res.code === 200) {
    handleClose()
    emits('init')
  }
}

const handleClose = () => {
  formRef.value?.resetFields()
  emits('update:show', false)
}

defineExpose({
  form
})
</script>

<style lang="scss" scoped>
.edit-expected-position {
  background: #f8f8f8;
  border-radius: 12px;
  padding: 24px;
  font-weight: 400;
  color: #222222;
  margin-top: 24px;
  .edit-user__info {
    font-size: 18px;
    margin-bottom: 24px;
  }

  .sex {
    display: flex;
    align-items: center;
    span {
      width: 227px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      display: inline-block;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #cccccc;
      margin-right: 15px;
      color: #999999;
      cursor: pointer;
    }
    .active {
      background: #dcecff;
      border: 1px solid #177cfa;
      color: #177cfa;
    }
  }

  .edit-resume-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;
  }

  .text-header {
    width: 100%;
    height: 44px;
    border-radius: 12px 12px 0px 0px;
    border: 1px solid #cccccc;
    border-bottom: 0;
    display: flex;
    align-items: center;
    .el-icon {
      transform: rotate(90deg);
      color: #d9d9d9;
    }
  }
  :deep(.el-textarea__inner) {
    border-radius: 0px 0px 12px 12px;
  }
}
</style>
