<template>
  <div class="flx-center" style="flex-direction: column">
    <div class="container">
      <div class="title">编辑公司信息</div>
      <el-form :model="state.form" label-width="110px" label-position="left" style="width: 774px">
        <div class="position-info">
          <div class="position-info-title">
            <img src="@/assets/img/position.png" width="24" height="24" />
            <span>职位基本信息</span>
          </div>
          <div style="margin-left: 42px">
            <el-form-item label="公司：">
              <span>深圳好利航·贸易/进出口·深圳市好利航国际货运代理有限公司武汉分公司</span>
            </el-form-item>
            <el-form-item label="招聘类型：">
              <el-select v-model="state.form.a" placeholder="请选择招聘类型">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="职位名称：">
              <el-input v-model="state.form.b" placeholder="请输入职位名称" />
            </el-form-item>
            <el-form-item label="职位描述：">
              <el-input
                v-model="state.form.d"
                type="textarea"
                :rows="6"
                :maxlength="5000"
                placeholder="请勿填写QQ、微信、电话等联系方式及特殊符号、性别歧视词、违反劳动法相关内容，否则有可能会导致您的账号被封禁。"
              />
            </el-form-item>
            <el-form-item label="职位类型：">
              <el-cascader
                v-model="state.form.e"
                :options="state.cascaderOptions"
                :props="state.cascaderProps"
                placeholder="请选择职位类型"
                @change="handleChange"
              />
            </el-form-item>
          </div>
          <div class="position-info-title" style="margin: 30px 0 5px">
            <img src="@/assets/img/position1.png" width="24" height="24" />
            <span>职位基本信息</span>
          </div>
          <div style="margin-left: 42px">
            <p>我们将通过以下条件，为您精确推荐合适的牛人，请尽量详细填写</p>
            <div class="flx-align-center">
              <el-form-item label="经验和学历 ：" style="width: 56.5%">
                <el-select v-model="state.form.l" placeholder="请选择经验">
                  <el-option
                    v-for="item in state.informationData?.Experience"
                    :key="item.FNUMBER"
                    :label="item.FDATAVALUE"
                    :value="item.FNUMBER"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="" class="empty-label" style="width: 43.5%">
                <el-select v-model="state.form.k" placeholder="请选择学历">
                  <el-option
                    v-for="item in state.informationData?.Degree2"
                    :key="item.FNUMBER"
                    :label="item.FDATAVALUE"
                    :value="item.FNUMBER"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="flx-align-center">
              <el-form-item label="薪资范围：" style="width: 56.5%">
                <el-select
                  v-model="state.form.f"
                  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>
              <el-form-item label="" class="empty-label" style="width: 22%">
                <el-select v-model="state.form.g" placeholder="请选择最高工资">
                  <el-option
                    v-for="item in state.informationData?.Salary"
                    :key="item.FNUMBER"
                    :label="item.FDATAVALUE"
                    :value="item.FNUMBER"
                  />
                </el-select>
              </el-form-item>
              <span
                style="display: inline-block; height: 30px; line-height: 20px; margin-left: 12px"
                >*</span
              >
              <el-form-item label="" class="empty-label" style="width: 19%">
                <el-select v-model="state.form.h" placeholder=" ">
                  <el-option
                    v-for="item in state.informationData?.Month"
                    :key="item.FNUMBER"
                    :label="item.FDATAVALUE"
                    :value="item.FNUMBER"
                  />
                </el-select>
              </el-form-item>
            </div>

            <el-form-item label="职位关键词：">
              <el-tag
                v-for="tag in state.dynamicTags"
                :key="tag"
                closable
                size="large"
                :disable-transitions="false"
                style="margin: 0 12px 12px 0"
                @close="handleClose(tag)"
              >
                {{ tag }}
              </el-tag>
              <el-input
                v-if="state.inputVisible"
                ref="InputRef"
                v-model="state.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-form-item label="职位名称：">
              <el-input v-model="state.form.b" placeholder="请输入工作地点" />
            </el-form-item>
            <p style="margin-left: 110px">请填写真实有效地址，若查实造假，将受到平台处罚。</p>
          </div>
        </div>
      </el-form>
      <div class="agree">已阅读并遵守《南山就业帮职位信息发布规则》</div>
    </div>
    <div style="margin-bottom: 76px">
      <el-button style="background-color: #cccccc; color: #ffffff">取消</el-button>
      <el-button type="primary" style="background-color: #177cfa">保存并发布</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getInformation } from '@/services/api/common'
import { getPosition } from '@/services/api/recruitmentManagement'
import { CascaderProps } from 'element-plus'

const state = reactive({
  form: {} as any,
  dynamicTags: [] as any,
  inputValue: '',
  inputVisible: false,
  cascaderProps: {
    children: 'TypeJobS',
    label: 'FDATAVALUE',
    value: 'FDATAVALUE'
  } as CascaderProps,
  cascaderOptions: [],
  informationData: {} as any,
  lowSalary: [] as any
})

const InputRef = ref()

const options = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
]

const handleChange = (value: any) => {
  console.log(value)
}

const salaryChange = (Val: string) => {
  // 低工资
  const row = state.informationData?.Salary.find((item: any) => item.FNUMBER === Val)
  // 高工资
  const tallRow = state.informationData?.Salary.find((item: any) => item.FNUMBER === state.form.g)
  if (tallRow?.FDESCRIPTION === '不限') return
  if (row) {
    if (!tallRow || Number(tallRow.FDESCRIPTION) <= Number(row.FDESCRIPTION)) {
      const index = state.informationData.Salary.findIndex((item: any) => item.FNUMBER === Val)
      state.form.g = state.informationData?.Salary[index + 1].FNUMBER
    }
  }
}

const handleClose = (tag: string) => {
  state.dynamicTags.splice(state.dynamicTags.indexOf(tag), 1)
}

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

const handleInputConfirm = () => {
  if (state.inputValue) {
    state.dynamicTags.push(state.inputValue)
  }
  state.inputVisible = false
  state.inputValue = ''
}

const init = async () => {
  const res: any = await getPosition()
  if (res.code === 200) {
    state.cascaderOptions = res.data.LevelJobS
  }
  const info: any = await getInformation({
    AuxiliaryS: ['Experience', 'Month', 'Salary', 'Degree2']
  })
  if (info.code === 200) {
    state.informationData = info.data
    state.lowSalary = info.data?.Salary.slice(0, info.data?.Salary.length - 1)
  }
}

init()
</script>

<style lang="scss" scoped>
@import url(./style/editPosition.scss);
</style>
