<template>
  <div style="width: 100%;">
    <CtForm ref="formPageRef" :items="items" style="width: 600px;"></CtForm>
  </div>
</template>

<script setup>
defineOptions({ name: 'position-add-job-requirements'})
import CtForm from '@/components/CtForm'
import { reactive, ref, watch } from 'vue'
import { getDict } from '@/hooks/web/useDictionaries'
import { cityToProvince } from '@/utils/areaDeal'

const props = defineProps({
  itemData: Object
})

const formPageRef = ref()
let query = reactive({})
const items = ref({
  options: [
    {
      type: 'autocomplete',
      key: 'type',
      value: null,
      label: '招聘类型 *',
      itemText: 'label',
      itemValue: 'value',
      dictTypeName: 'menduner_job_type',
      rules: [v => !!v || '招聘类型'],
      items: []
    },
    {
      type: 'text',
      key: 'payFrom',
      value: '',
      col: 4,
      label: '最低薪资 *',
      suffix: '元',
      rules: [
        value => {
          if (value) return true
          return '请填写最低薪资'
        },
        value => {
          if (value >= 1) return true
          return '数额不得小于1'
        }
      ]
    },
    {
      type: 'text',
      key: 'payTo',
      value: '',
      col: 4,
      label: '最高薪资 *',
      flexStyle: 'mx-3',
      suffix: '元',
      rules: [
        value => {
          if (value) return true
          return '请填写最高薪资'
        },
        value => {
          if (value >= 1) return true
          return '数额不得小于1'
        }
      ]
    },
    {
      type: 'autocomplete',
      key: 'payUnit',
      value: null,
      label: '薪酬单位 *',
      itemText: 'label',
      itemValue: 'value',
      col: 4,
      dictTypeName: 'menduner_pay_unit',
      rules: [v => !!v || '请选择薪酬单位'],
      items: []
    },
    {
      type: 'autocomplete',
      key: 'eduType',
      value: null,
      label: '最高学历 *',
      itemText: 'label',
      itemValue: 'value',
      col: 6,
      flexStyle: 'mr-3',
      dictTypeName: 'menduner_education_type',
      rules: [v => !!v || '请选择最高学历'],
      items: []
    },
    {
      type: 'autocomplete',
      key: 'expType',
      value: null,
      label: '工作经验 *',
      itemText: 'label',
      itemValue: 'value',
      col: 6,
      dictTypeName: 'menduner_exp_type',
      rules: [v => !!v || '请选择工作经验'],
      items: []
    },
    {
      type: 'autocomplete',
      key: 'workAreaProvinceId',
      value: null,
      label: '工作城市：省 *',
      outlined: true,
      itemText: 'name',
      itemValue: 'id',
      returnSelect: true,
      noParam: true,
      col: 6,
      flexStyle: 'mr-3',
      rules: [v => !!v || '请选择工作城市：省'],
      items: [],
      change: null
    },
    {
      type: 'autocomplete',
      key: 'areaId',
      value: null,
      label: '工作城市：市 *',
      outlined: true,
      itemText: 'name',
      itemValue: 'id',
      col: 6,
      rules: [v => !!v || '请选择工作城市：市'],
      items: [],
      change: null
    },
    {
      type: 'text',
      key: 'address',
      value: '',
      label: '详情地址 *',
      rules: [v => !!v || '请填写详细地址'],
    },
  ]
})

// items.value.options.forEach(e => e.rules = []) // 测试使用

// 获取字典内容
const getDictData = async () => {
  items.value.options.forEach(async (e) => {
    if (e.dictTypeName) {
      const { data } = await getDict(e.dictTypeName)
      e.items = data
    }
  })
}

const provinceChange = (value, val, obj) => {
  const item = items.value.options.find(e => e.key === 'areaId')
  if (!item) return
  item.items = obj.children || []
  item.value = null
}
getDict('areaTreeData', null, 'areaTreeData').then(({ data }) => {
  data = data?.length && data || []
  if (!data?.length) return console.error('areaTreeData获取失败！')
  //
  const china = data.find(e => e.id === '1')
  const chinaTreeData = china?.children?.length ? china.children : []
  //
  if (!chinaTreeData?.length) return console.error('chinaTreeData获取失败！')
  const item = items.value.options.find(e => e.key === 'workAreaProvinceId')
  if (item?.items) {
    item.items = chinaTreeData
    item.change = provinceChange
  }
})

const getQuery = async () => {
  const { valid } = await formPageRef.value.formRef.validate()
  if (!valid) return
  const obj = {}
  items.value.options.forEach(e => {
    if (e.noParam) return
    obj[e.key] = e.value
  })
  query = Object.assign(query, obj)
  return query
}

// 编辑回显
watch(
  () => props.itemData,
  async (val) => {
    await getDictData()
    if (!Object.keys(val).length) return
    // 编辑
    let workAreaId = ''
    items.value.options.forEach(e => {
      if (e.labelKey) {
        query[e.key] = val[e.key]
        e.value = val[e.labelKey]
        return
      }
      if (e.noParam) return
      e.value = val[e.key]
      if (e.key === 'areaId' && val[e.key]) workAreaId = val[e.key]
    })
    if (workAreaId) { // 省份回显
      const province = items.value.options.find(pv => pv.key === 'workAreaProvinceId')
      if (province) {
        const dealReturnObj = await cityToProvince(workAreaId, {}, province.items || [])
        const city = items.value.options.find(pv => pv.key === 'areaId')
        if (city) city.items = dealReturnObj.cityList || []
        province.value = dealReturnObj.pid || ''
      }
    }
  },
  { immediate: true },
  { deep: true }
)

defineExpose({
  formPageRef,
  getQuery
})
</script>

<style scoped lang="scss">
.jobTypeCardBox {
  position: absolute;
  top: -22px;
  left: 0;
}
</style>
