<template>
  <el-form ref="licenceInfoForm" :model="licenceInfo" :rules="licenceRules" size="medium" label-width="150px" style="margin-top: 20px">
    <el-row style="margin-top: 20px">
      <el-col :span="6">
        <el-form-item label="许可证名称" prop="licenseName">
          <el-input v-model="licenceInfo.licenseName" placeholder="请输入许可证名称" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="许可证期限" prop="licenseTerm">
          <el-input v-model="licenceInfo.licenseTerm" placeholder="请输入许可证期限" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="许可证扫描件" prop="licenseScan">
          <el-upload
            ref="licenseScanFileUpload"
            action="action"
            :file-list="licenseScanFileList"
            :http-request="uploadLicenceScanFile"
            :on-remove="handleLicenceScanFileRemove"
            :on-exceed="licenceScanFileExceed"
            :limit="1"
            accept=".jpg,.jpeg,.png,.pdf"
          >
            <el-button size="small" type="primary" icon="el-icon-upload">
              上传文件
            </el-button>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { Uploadimg } from '@/api/common'
export default {
  name: 'LicenceInfo',
  data() {
    return {
      licenceInfo: {
        licenseName: '',
        licenseTerm: '',
        licenseScan: ''
      },
      licenseScanFileList: [],
      licenceRules: {
        licenseName: [{ required: true, message: '请输入许可证名称', trigger: 'blur' }],
        licenseTerm: [{ required: true, message: '请输入许可证期限', trigger: 'blur' }],
        licenseScan: [{ required: true, message: '请上传许可证扫描件', trigger: 'blur' }]
      },
      licenceInfoValid: false
    }
  },
  methods: {
    validateForm: function() {
      this.$refs.licenceInfoForm.validate(valid => {
        this.licenceInfoValid = valid
      })
    },
    // 文件上传
    uploadLicenceScanFile(file) {
      const upload = this.handleBeforeUpload(file.file, this.licenseScanFileList)
      if (upload === false) {
        return
      }
      const base_url = this.baseConfig.baseUrl + '/static/'
      Uploadimg(file).then(res => {
        if (res.code === 200) {
          this.licenseScanFileList = [] // 只保留一张图片或一个文件
          this.licenseScanFileList.push({ name: res.data.fileName, url: base_url + res.data.fileId })
          this.licenceInfo.licenseScan = res.data.fileId
          this.$message.success('文件上传成功')
        }
      })
    },
    handleLicenceScanFileRemove(file) {
      this.licenceInfo.licenseScan = ''
      this.handleRemove(file, this.licenseScanFileList)
    },
    licenceScanFileExceed(file, fileList) {
      this.handleExceed(file, this.licenseScanFileList)
    },
    // 上传前判断文件格式及大小
    handleBeforeUpload(file, fileList) {
      let res = true
      // 判断文件格式
      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
      const isPDF = file.type === 'application/pdf'
      if (!isJPG && !isPDF) {
        this.$message.error('上传文件只能是 图片 或 PDF 格式!')
        res = false
      }

      // 判断文件大小
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('上传文件大小不能超过 5MB!')
        res = false
      }

      // 判断文件是否已经上传过
      for (const i in fileList) {
        if (fileList[i].name === file.name) {
          this.$message.error('该文件已上传过，请选择其他文件')
          res = false
        }
      }

      return res
    },
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      for (const i in fileList) {
        if (fileList[i].name === file.name) {
          fileList.splice(i, 1)
          return
        }
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning('最多上传一个文件，请先删除再重新上传')
    }
  }
}
</script>

<style scoped>

</style>