<template>
  <el-form ref="manSystemInfoForm" :model="manSystemInfo" :rules="manSystemRules" size="medium" label-width="150px" style="margin-top: 20px">
    <el-row style="margin-top: 20px">
      <el-col :span="6">
        <el-form-item label="管理体系认证名称" prop="systemCertificateName">
          <el-input v-model="manSystemInfo.systemCertificateName" placeholder="请输入管理体系认证名称" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="管理体系认证期限" prop="systemCertificateTerm">
          <el-input v-model="manSystemInfo.systemCertificateTerm" placeholder="请输入管理体系认证期限" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="管理体系扫描件" prop="systemCertificateScan">
          <el-upload
            ref="manSystemScanFileUpload"
            action="action"
            :file-list="systemCertificateScanFileList"
            :http-request="uploadManSystemScanFile"
            :on-remove="handleManSystemScanFileRemove"
            :on-exceed="manSystemScanFileExceed"
            :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: 'ManSystemInfo',
  data() {
    return {
      manSystemInfo: {
        systemCertificateName: '',
        systemCertificateTerm: '',
        systemCertificateScan: ''
      },
      systemCertificateScanFileList: [],
      manSystemRules: {
        systemCertificateName: [{ required: true, message: '请输入管理体系认证名称', trigger: 'blur' }],
        systemCertificateTerm: [{ required: true, message: '请输入管理体系认证期限', trigger: 'blur' }],
        systemCertificateScan: [{ required: true, message: '请上传管理体系扫描件', trigger: 'blur' }]
      },
      manSystemInfoValid: false
    }
  },
  methods: {
    validateForm: function() {
      this.$refs.manSystemInfoForm.validate(valid => {
        this.manSystemInfoValid = valid
      })
    },
    // 文件上传
    uploadManSystemScanFile(file) {
      const upload = this.handleBeforeUpload(file.file, this.systemCertificateScanFileList)
      if (upload === false) {
        return
      }
      const base_url = this.baseConfig.baseUrl + '/static/'
      Uploadimg(file).then(res => {
        if (res.code === 200) {
          this.systemCertificateScanFileList = [] // 只保留一张图片或一个文件
          this.systemCertificateScanFileList.push({ name: res.data.fileName, url: base_url + res.data.fileId })
          this.manSystemInfo.systemCertificateScan = res.data.fileId
          this.$message.success('文件上传成功')
        }
      })
    },
    handleManSystemScanFileRemove(file) {
      this.manSystemInfo.systemCertificateScan = ''
      this.handleRemove(file, this.systemCertificateScanFileList)
    },
    manSystemScanFileExceed(file, fileList) {
      this.handleExceed(file, this.systemCertificateScanFileList)
    },
    // 上传前判断文件格式及大小
    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>