<script name="recommendInfo" setup>
import { getCurrentInstance, onMounted, ref } from 'vue'
import store from '@/store'
import { fileFormatVerification, handleFileSuccess, handleFilePreview } from '@/utils/uploadAction.js'
const uploadUrl = store.dictStore.uploadUrl,
  { proxy } = getCurrentInstance(),
  formData = ref({
  }),
  formRef = ref(),
  rules = {
    recommendedWay: [
      { required: true, message: '请选择推荐类型', trigger: 'blur' }
    ],
    recommendationProofFile: [
      { required: true, message: '请上传推荐证明', trigger: 'blur' }
    ]
  },
  // 校验
  validForm = (callback) => {
    formRef.value.validate(valid => {
      callback(valid)
    })
  },
  fileExceed = (files, uploadFiles) => {
    proxy.$message.warning('仅限上传一个文件')
  },
  // 回显
  setFormData = (data) => {
    formData.value = {
      ...data,
      recommendedWay: data.recommendedWay?.[0] || undefined,
      recommendationProofFile: data.recommendationProofFile && data.recommendationProofFile.map(i => {
        return {
          name: i.fileName,
          response: {
            data: {
              id: i.fileId
            }
          },
          fileUrlById: i.url
        }
      })
    }
  }
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="recommendInfo"
  >
    <el-row :gutter="8">
      <el-col :span="8">
        <el-form-item
          label="推荐类型"
          prop="recommendedWay"
        >
          <el-select
            v-model="formData.recommendedWay"
            class="w-full"
            placeholder="请选择"
            value-key="dictionaryCode"
          >
            <el-option
              v-for="(item,index) in store.dictStore.recommendedWayDict"
              :key="index"
              :label="item.dictionaryName"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item
          label="推荐证明"
          prop="recommendationProofFile"
        >
          <el-upload
            v-model:file-list="formData.recommendationProofFile"
            class="w-full"
            :action="uploadUrl"
            :limit="1"
            :on-exceed="fileExceed"
            :on-success="
              res =>
                handleFileSuccess(
                  res,
                  formData.recommendationProofFile
                )
            "
            :on-preview="handleFilePreview"
            accept="application/pdf,image/png,image/jpeg,image/jpg"
            :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>
</template>
<style lang="less">
.recommendInfo{
}
</style>
