<script name="professionalInfo" setup>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
import store from '@/store'
import orgTree from '@/components/orgTree/index.vue'
import { storeToRefs } from 'pinia'
import { fileFormatVerification, handleFileSuccess, handleFilePreview } from '@/utils/uploadAction.js'
const uploadUrl = store.dictStore.uploadUrl
const { tagList } = storeToRefs(store.dictStore),
  { proxy } = getCurrentInstance(),
  formData = ref({
  }),
  formRef = ref(),
  rules = {
    technicalTitles: [
      { required: true, message: '请输入技术职称', trigger: 'blur' }
    ],
    titleLevel: [
      { required: true, message: '请选择职称级别', trigger: 'blur' }
    ],
    goodAt: [
      { required: true, message: '请选择擅长方向', trigger: 'blur' }
    ],
    technicalExpertise: [
      { required: true, message: '请选择技术专长', trigger: 'blur' }
    ],
    industrySector: [
      { required: true, message: '请选择行业领域', trigger: 'blur' }
    ],
    avoidCompanyList: [
      { required: true, message: '请输入回避单位', trigger: 'blur' }
    ],
    titleCertificateFile: [
      { required: true, message: '请上传职称证明', trigger: 'blur' }
    ]
  },
  // 校验
  validForm = (callback) => {
    formRef.value.validate(valid => {
      callback(valid)
    })
  },
  fileExceed = (files, uploadFiles) => {
    proxy.$message.warning('仅限上传一个文件')
  },
  // 回显
  setFormData = (data) => {
    formData.value = {
      ...data,
      goodAt: data.goodAt && data.goodAt || undefined,
      titleLevel: data.titleLevel && data.titleLevel[0] || undefined,
      industrySector: data.industrySector && data.industrySector.map(i => `${i.tagName}##${i.tagCode}`),
      technicalExpertise: data.technicalExpertise && data.technicalExpertise.map(i => `${i.tagName}##${i.tagCode}`),
      titleCertificateFile: data.titleCertificateFile && data.titleCertificateFile.map(i => {
        return {
          name: i.fileName,
          response: {
            data: {
              id: i.fileId
            }
          },
          fileUrlById: i.url
        }
      })
    }
  },
  handleChangeTreeTag = (checkedKeys, checkedNodes, name) => {
    console.log(checkedNodes)
  },
  // 回避单位单位
  orgProps = reactive({
    unitVisible: false,
    showCheckbox: false,
    data: undefined,
    name: undefined
  }),
  showOrgTree = (name) => {
    orgProps.name = name
    orgProps.unitVisible = true
    orgProps.showCheckbox = true
    orgProps.data = formData.value.avoidCompanyList?.map(i => {
      return {
        key: i.companyUniqCode,
        title: i.companyName
      }
    })
  },
  closeOrg = () => {
    orgProps.unitVisible = false
  },
  getOrgData = (data, expandedKeys) => {
    formData.value[orgProps.name] = data.map(i => {
      return {
        companyUniqCode: i.key,
        companyName: i.title
      }
    })
  },
  // 删除回避单位
  delTag = (index) => {
    formData.value.avoidCompanyList.splice(index, 1)
  }
defineExpose({ validForm, formData, setFormData })
onMounted(async () => {
})
</script>
<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="rules"
    label-position="right"
    label-width="120px"
    label-suffix=":"
    scroll-to-error
    class="professionalInfo"
  >
    <el-row :gutter="8">
      <el-col :span="8">
        <el-form-item
          label="技术职称"
          prop="technicalTitles"
        >
          <el-input
            v-model="formData.technicalTitles"
            placeholder="请输入"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          label="职称级别"
          prop="titleLevel"
        >
          <el-select
            v-model="formData.titleLevel"
            class="w-full"
            placeholder="请选择"
            value-key="dictionaryCode"
          >
            <el-option
              v-for="(item,index) in store.dictStore.titleLevelDict "
              :key="index"
              :label="item.dictionaryName"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item
          label="擅长方向"
          prop="goodAt"
        >
          <el-select
            v-model="formData.goodAt"
            class="w-full"
            placeholder="请选择"
            clearable
            value-key="tagCode"
            multiple
          >
            <el-option
              v-for="(item,index) in store.dictStore.goodAtDict"
              :key="index"
              :label="item.tagName"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          label="技术专长"
          prop="technicalExpertise"
        >
          <el-tree-select
            v-model="formData.technicalExpertise"
            class="w-full"
            placeholder="请选择技术专长"
            :data="
              tagList &&
                tagList.length &&
                tagList.find(i => i.tagCode === 'technical_expertise')
                  .children||[]
            "
            :props="{
              label: 'tagName',
              value: 'unionCode'
            }"
            node-key="unionCode"
            collapse-tags
            multiple
            show-checkbox
            check-on-click-node
            @check="
              (checkedKeys, checkedNodes) =>
                handleChangeTreeTag(
                  checkedKeys,
                  checkedNodes,
                  'technicalExpertise'
                )
            "
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          label="行业领域"
          prop="industrySector"
        >
          <el-tree-select
            v-model="formData.industrySector"
            class="w-full"
            placeholder="请选择行业领域"
            :data="
              tagList &&
                tagList.length &&
                tagList.find(i => i.tagCode === 'industry_sector').children||[]
            "
            :props="{
              label: 'tagName',
              value: 'unionCode'
            }"
            node-key="unionCode"
            collapse-tags
            multiple
            show-checkbox
            check-on-click-node
            @check="
              (checkedKeys, checkedNodes) =>
                handleChangeTreeTag(
                  checkedKeys,
                  checkedNodes,
                  'industrySector'
                )
            "
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item
          label="获奖情况"
          prop="awards"
        >
          <el-input
            v-model="formData.awards"
            maxlength="200"
            show-word-limit
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item
          label="表彰奖励"
          prop="recognitionReward"
        >
          <el-input
            v-model="formData.recognitionReward"
            maxlength="200"
            show-word-limit
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item
          label="回避单位"
          prop="avoidCompanyList"
        >
          <div class="flex flex-col items-start">
            <el-button
              type="primary"
              @click="showOrgTree('avoidCompanyList')"
            >
              <el-icon>
                <Plus />
              </el-icon>选择回避单位
            </el-button>
            <p>
              <el-tag
                v-for="(item,index) in formData.avoidCompanyList"
                :key="index"
                class="mr-8"
                closable
                @close="delTag(index)"
              >
                {{ item.companyName }}
              </el-tag>
            </p>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item
          label="职称证明"
          prop="titleCertificateFile"
        >
          <el-upload
            v-model:file-list="formData.titleCertificateFile"
            class="w-full"
            :action="uploadUrl"
            :on-exceed="fileExceed"
            :limit="1"
            :on-success="
              res =>
                handleFileSuccess(
                  res,
                  formData.titleCertificateFile
                )
            "
            :on-preview="handleFilePreview"
            accept="application/pdf,image/png,image/jpeg"
            :before-upload="
              file =>
                fileFormatVerification(file, {
                  types: ['png', 'jpg', 'jpeg','pdf'],size:1024})"
          >
            <el-button
              type="primary"
              plain
            >选择文件</el-button>
            <template #tip>
              <div class="el-upload__tip">
                支持扩展名:.pdf .png .jpg .pdf,文件大小不超过1M
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <org-tree
    :visible="orgProps.unitVisible"
    :show-checkbox="orgProps.showCheckbox"
    :default-data="orgProps.data"
    @close="closeOrg"
    @get-select-unit="getOrgData"
  />
</template>
<style lang="less">
.professionalInfo{
}
</style>
