<script name="jobInfo" setup>
import { onMounted, ref } from 'vue'
import { getOrgLevelByLevel, getOrgTree } from '@/http/apis/systemManage/unitManage'
import { getBusinessstripLine } from '@/http/apis/commonApi'
import store from '@/store'
const formData = ref({
    companyAttribute: undefined
  }),
  formRef = ref(),
  rules = {
    company: [
      { required: true, message: '请上选择工作单位', trigger: 'blur' }
    ],
    companyUniqCode: [
      { required: true, message: '工作单位code不能为空', trigger: 'blur' }
    ],
    legalEntityCode: [
      { required: true, message: '请输入单位法人编号', trigger: 'blur' }
    ],
    administrativeDuties: [
      { required: true, message: '请输入行政职务', trigger: 'blur' }
    ],
    startWorkAt: [
      { required: true, message: '请选择开始工作日期', trigger: 'blur' }
    ],
    administrativeRank: [
      { required: true, message: '请选择行政职级', trigger: 'blur' }
    ],
    jobStatus: [
      { required: true, message: '请选择在职状态', trigger: 'blur' }
    ],
    retiredAt: [
      { required: true, message: '请选退休日期', trigger: 'blur' }
    ],
    companyAttribute: [
      { required: true, message: '请选单位类型', trigger: 'blur' }
    ]
  },
  // 校验
  validForm = (callback) => {
    formRef.value.validate(valid => {
      callback(valid)
    })
  },
  // 回显
  setFormData = (data) => {
    formData.value = {
      ...data,
      administrativeRank: data.administrativeRank?.[0] || undefined,
      jobStatus: data.jobStatus?.[0] || undefined,
      companyAttribute: data.companyAttribute?.[0] || undefined
    }
  },
  // 工作单位
  orgTreeRef = ref(),
  changeCompany = () => {
    formData.value.company = orgTreeRef.value.getCurrentNode().name
  },
  // 获取单位组织架构
  loadNode = async (node, resolve) => {
    if (node.level === 0) {
      const res = await getOrgLevelByLevel({
        isCompetentUnit: true,
        isSuperiorLineCompetentUnit: true
      })
      resolve(res.data)
    } else {
      const res = await getOrgLevelByLevel({
        parentCode: node.data.organizationCode
      })
      if (res.data?.length) {
        resolve(res.data)
      } else {
        resolve([])
      }
    }
  },
  lineListData = ref([]),
  getLineList = async () => {
    const res = await getBusinessstripLine()
    lineListData.value = res.data
  },
  companyTreeData = ref(),
  getCompany = (data) => {
    const items = []
    data.forEach(i => {
      items.push({
        name: i.title,
        organizationCode: i.key,
        children: i.children?.lengt ? getCompany(i.children) : []
      })
    })
    return items
  },
  remoteMethod = async (query) => {
    const res = await getOrgTree({ organizationName: query })
    companyTreeData.value = getCompany(res.data)
  }
defineExpose({ validForm, formData, setFormData })
onMounted(async () => {
  getLineList()
})
</script>
<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="rules"
    label-position="right"
    label-width="120px"
    label-suffix=":"
    scroll-to-error
    class="jobInfo"
  >
    <el-row :gutter="8">
      <el-col :span="8">
        <el-form-item
          label="工作单位"
          prop="company"
        >
          <el-tree-select
            ref="orgTreeRef"
            v-model="formData.companyUniqCode"
            :data="companyTreeData"
            class="w-full"
            node-key="organizationCode"
            lazy
            :check-strictly="true"
            :load="loadNode"
            :cache-data="formData.company&&formData.companyUniqCode?[{organizationCode:formData.companyUniqCode,name:formData.company}]:[]"
            :props="{
              label:'name',
              value:'organizationCode'
            }"
            filterable
            remote
            :remote-method="remoteMethod"
            @change="changeCompany"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          label="工作单位code"
          prop="formData.companyUniqCode"
        >
          <el-input
            v-model="formData.companyUniqCode"
            placeholder="请选择"
            disabled
          />
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item
          label="单位法人编号"
        >
          <el-input
            v-model="formData.legalEntityCode"
            placeholder="请输入"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          label="行政职务"
          prop="administrativeDuties"
        >
          <el-input
            v-model="formData.administrativeDuties"
            placeholder="请输入"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          label="开始工作日期"
          prop="startWorkAt"
        >
          <el-date-picker
            v-model="formData.startWorkAt"
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="请选择"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          label="行政职级"
          prop="administrativeRank"
        >
          <el-select
            v-model="formData.administrativeRank"
            class="w-full"
            placeholder="请选择"
            value-key="dictionaryCode"
          >
            <el-option
              v-for="(item,index) in store.dictStore.administrativeRankDict"
              :key="index"
              :label="item.dictionaryName"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          label="在职状态"
          prop="jobStatus"
        >
          <el-select
            v-model="formData.jobStatus"
            class="w-full"
            placeholder="请选择"
            value-key="dictionaryCode"
          >
            <el-option
              v-for="(item,index) in store.dictStore.jobStatusDict"
              :key="index"
              :label="item.dictionaryName"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col v-if="formData.jobStatus?.dictionaryName==='退休'" :span="8">
        <el-form-item
          label="退休日期"
          prop="retiredAt"
        >
          <el-date-picker
            v-model="formData.retiredAt"
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="请选择"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          label="单位类型"
          prop="companyAttribute"
        >
          <el-select
            v-model="formData.companyAttribute"
            placeholder="请选择"
            class="w-full"
            value-key="dictionaryCode"
          >
            <el-option
              v-for="(item,index) in store.dictStore.companyAttributeDict"
              :key="index"
              :label="item.dictionaryName"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="条线">
          <el-select
            v-model="formData.businessStrips"
            multiple
            value-key="businessStripCode"
            filterable
            class="w-full"
          >
            <el-option
              v-for="(item,index) in lineListData"
              :key="index"
              :label="item.businessStripName"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item
          label="工作地址"
          prop="address"
        >
          <el-input
            v-model="formData.address"
            maxlength="50"
            placeholder="请输入"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item
          label="工作经历"
          prop="experience"
        >
          <el-input
            v-model="formData.experience"
            maxlength="200"
            :rows="5"
            type="textarea"
            show-word-limit
            placeholder="请输入"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<style lang="less">
.jobInfo{
}
</style>
