<script name="eduInfo" setup>
import { onMounted, getCurrentInstance, ref } from 'vue'
import store from '@/store'
import { districtList } from '@/http/apis/commonApi'
import { fileFormatVerification, handleFileSuccess, handleFilePreview } from '@/utils/uploadAction.js'
const uploadUrl = store.dictStore.uploadUrl,
  { proxy } = getCurrentInstance(),
  formData = ref({
  }),
  formRef = ref(),
  rules = {
    edu: [
      { required: true, message: '请选择学历', trigger: 'blur' }
    ],
    degree: [
      { required: true, message: '请选择学位', trigger: 'blur' }
    ]
  },
  // 校验
  validForm = (callback) => {
    formRef.value.validate(valid => {
      callback(valid)
    })
  },
  fileExceed = (files, uploadFiles) => {
    proxy.$message.warning('仅限上传一个文件')
  },
  // 回显
  setFormData = async (data) => {
    formData.value = {
      ...data,
      edu: data.edu?.[0] || undefined,
      degree: data.degree?.[0] || undefined,
      degreeCertificateFile: data.degreeCertificateFile && data.degreeCertificateFile.map(i => {
        return {
          name: i.fileName,
          response: {
            data: {
              id: i.fileId
            }
          },
          fileUrlById: i.url
        }
      }),
      graduationCertificateFile: data.graduationCertificateFile && data.graduationCertificateFile.map(i => {
        return {
          name: i.fileName,
          response: {
            data: {
              id: i.fileId
            }
          },
          fileUrlById: i.url
        }
      })
    }
  },
  regionTree = ref()
defineExpose({ validForm, formData, setFormData })
onMounted(async () => {
  const res = await districtList({ regionCode: 330500, regionLevel: 2 })
  regionTree.value = [res.data]
})
</script>
<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="rules"
    label-position="right"
    label-width="100px"
    label-suffix=":"
    scroll-to-error
    class="eduInfo"
  >
    <el-row :gutter="8">
      <el-col :span="8">
        <el-form-item
          label="毕业学校"
          prop="school"
        >
          <el-input
            v-model="formData.school"
            placeholder="请输入"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          label="毕业时间"
          prop="graduatedAt"
        >
          <el-date-picker
            v-model="formData.graduatedAt"
            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="academicTitle"
        >
          <el-input
            v-model="formData.academicTitle"
            placeholder="请输入"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="学历" prop="edu">
          <el-select
            v-model="formData.edu"
            placeholder="请选择学历"
            value-key="dictionaryCode"
            clearable
            class="w-full"
          >
            <el-option
              v-for="(item, index) in store.dictStore.eduDict "
              :key="index"
              :label="item.dictionaryName"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="学位" prop="degree">
          <el-select
            v-model="formData.degree"
            placeholder="请选择学位"
            value-key="dictionaryCode"
            class="w-full"
          >
            <el-option
              v-for="(item, index) in store.dictStore.degreeDict "
              :key="index"
              :label="item.dictionaryName"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item
          label="毕业证书"
          prop="graduationCertificateFile"
        >
          <el-upload
            v-model:file-list="formData.graduationCertificateFile"
            class="w-full"
            :action="uploadUrl"
            :limit="1"
            :on-exceed="fileExceed"
            :on-success="
              res =>
                handleFileSuccess(
                  res,
                  formData.graduationCertificateFile
                )
            "
            :on-preview="handleFilePreview"
            accept="application/pdf,image/png,image/jpeg"
            :before-upload="
              file =>
                fileFormatVerification(file, {
                  size: 1024,
                  types: ['png', 'jpg', 'jpeg','pdf']})"
          >
            <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-col :span="24">
        <el-form-item
          label="学位证书"
          prop="degreeCertificateFile"
        >
          <el-upload
            v-model:file-list="formData.degreeCertificateFile"
            class="w-full"
            :action="uploadUrl"
            :on-exceed="fileExceed"
            :limit="1"
            :on-success="
              res =>
                handleFileSuccess(
                  res,
                  formData.degreeCertificateFile
                )
            "
            :before-upload="
              file =>
                fileFormatVerification(file, {
                  size: 1024,
                  types: ['png', 'jpg', 'jpeg','pdf']
                })
            "
            accept="application/pdf,image/png,image/jpeg,image/jpg"
            :on-preview="handleFilePreview"
          >
            <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>
</template>
<style lang="less">
.eduInfo{
}
</style>
