<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="求职类型">
            <div class="sex">
              <span :class="form.FJobType === 'A' ? 'active' : ''" @click="form.FJobType = 'A'"
                >全职</span
              >
              <span :class="form.FJobType === 'B' ? 'active' : ''" @click="form.FJobType = 'B'"
                >兼职</span
              >
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="期望职位" prop="FDesiredPosition">
            <el-cascader
              v-model="form.FDesiredPosition"
              :options="cascaderOptions"
              :props="state.cascaderProps"
              size="large"
              placeholder="请选择职位类型"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="期望行业" prop="FExpectTheIndustry">
            <el-select
              v-model="form.FExpectTheIndustry"
              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" class="flx-align-center" style="display: flex; align-items: end">
          <el-form-item label="薪资要求" prop="FExpectSalaryMin">
            <el-select
              v-model="form.FExpectSalaryMin"
              size="large"
              placeholder="选择薪资范围"
              @change="salaryChange"
            >
              <el-option
                v-for="item in state.lowSalary"
                :key="item.FNUMBER"
                :label="item.FDATAVALUE"
                :value="item.FNUMBER"
              />
            </el-select>
          </el-form-item>
          <span style="margin: 0 16px 28px">至</span>
          <el-form-item label="" prop="FExpectSalaryMax">
            <el-select
              v-model="form.FExpectSalaryMax"
              size="large"
              :disabled="!form.FExpectSalaryMin"
              placeholder="选择薪资范围"
            >
              <el-option
                v-for="item in state.tallSalary"
                :key="item.FNUMBER"
                :label="item.FDATAVALUE"
                :value="item.FNUMBER"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工作城市" prop="FWorkCity">
            <el-cascader
              ref="cascaderAddr"
              v-model="form.FWorkCity"
              size="large"
              :options="cityData"
              :props="state.cityProps"
              placeholder="请选择工作城市"
              style="width: 100%"
              @change="handleAddrChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" 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'
import { deepCopy } from '@/utils'
import cityData from '@/assets/json/pca-code.json'

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  cascaderOptions: {
    type: Array,
    default: () => []
  },
  informationData: {
    type: Object,
    default: () => {}
  }
})

const form = ref({
  FEntryID: 0, //为0新增
  FJobType: 'A', //求职类型
  FDesiredPosition: '', //期望职位
  FExpectTheIndustry: '', //期望行业
  FExpectSalaryMin: '', //期望薪资小
  FExpectSalaryMax: '', ////期望薪资大
  FWorkCity: '' //工作城市
})

const rules = {
  FJobType: [{ required: true, message: '求职类型不能为空', trigger: 'change' }],
  FDesiredPosition: [{ required: true, message: '期望职位不能为空', trigger: 'change' }],
  FExpectTheIndustry: [{ required: true, message: '期望行业不能为空', trigger: 'change' }],
  FExpectSalaryMin: [{ required: true, message: '期望薪资不能为空', trigger: 'change' }],
  FExpectSalaryMax: [{ required: true, message: '期望薪资不能为空', trigger: 'change' }],
  FWorkCity: [{ required: true, message: '工作城市不能为空', trigger: 'change' }]
}

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

const cascaderAddr = ref()
const formRef = ref()

const state = reactive({
  lowSalary: [] as any,
  tallSalary: [] as any,
  initTallSalary: [],
  cityProps: {
    value: 'name',
    label: 'name',
    children: 'children'
  },
  cascaderProps: {
    children: 'JobS',
    label: 'FDATAVALUE',
    value: 'FNUMBER'
  }
})

watch(
  () => props.informationData,
  () => {
    if (JSON.stringify(props.informationData) !== '{}') {
      let info = deepCopy(props.informationData)
      state.lowSalary = info?.Salary.slice(0, info?.Salary.length - 1)
      info?.Salary.push({
        FDATAVALUE: '不限',
        FDESCRIPTION: '不限',
        FNUMBER: '~'
      })
      state.initTallSalary = info?.Salary
    }
  },
  { immediate: true, deep: true }
)

// 控制工资范围
const salaryChange = (Val: string) => {
  let informationData = props.informationData
  // 低工资
  const row = informationData?.Salary.find((item: any) => item.FNUMBER === Val)
  // 高工资
  const tallRow = informationData?.Salary.find(
    (item: any) => item.FNUMBER === form.value.FExpectSalaryMin
  )
  state.tallSalary = state.initTallSalary?.filter(
    (item: any) => Number(item.FDESCRIPTION) > Number(row.FDESCRIPTION) || item.FNUMBER === '~'
  )
  if (tallRow?.FDESCRIPTION === '不限' || !tallRow) return
  if (row) {
    if (!tallRow || Number(tallRow.FDESCRIPTION) <= Number(row.FDESCRIPTION)) {
      const index = informationData.Salary.findIndex((item: any) => item.FNUMBER === Val)
      form.value.FExpectSalaryMax = informationData?.Salary[index + 1].FNUMBER
    }
  }
}

const filterChange = () => {
  const {
    FJobType,
    FDesiredPosition,
    FExpectTheIndustry,
    FExpectSalaryMin,
    FExpectSalaryMax,
    FWorkCity
  }: any = form.value
  return {
    Parmeter: {
      NeedUpDateFields: [
        'FJobType',
        'FDesiredPosition',
        'FExpectTheIndustry',
        'FExpectSalaryMin',
        'FExpectSalaryMax',
        'FWorkCity'
      ],
      IsDeleteEntry: 'false',
      Model: {
        FID: 0,
        F_LQKJ_JobIntentionEntity: [
          {
            FEntryID: form.value.FEntryID ? form.value.FEntryID : 0, //为0新增
            FJobType, //求职类型
            FDesiredPosition: { FNumber: FDesiredPosition.slice(-1)[0] }, //期望职位
            FExpectTheIndustry: { FNumber: FExpectTheIndustry }, //期望行业
            FExpectSalaryMin: { FNumber: FExpectSalaryMin }, //期望薪资小
            FExpectSalaryMax: { FNumber: FExpectSalaryMax }, ////期望薪资大
            FWorkCity: FWorkCity.join('/') //工作城市
          }
        ]
      }
    }
  }
}

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

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 handleAddrChange = (e: any) => {
  console.log(unref(cascaderAddr), e)
}

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

defineExpose({
  form,
  salaryChange
})
</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;
  }
}
</style>
