<template>
  <div class="form-table">
    <div style="margin-left: 20px">
      <el-table :data="busDetailQualifyCertificates" class="el-tab" border size="small" header-cell-class-name="form-table-header">
        <el-table-column prop="index" label="序号" width="100"/>
        <el-table-column prop="systemCertificateName" label="管理体系认证名称" width="500"/>
        <el-table-column prop="systemCertificateTerm" label="认证期限" width="300"/>
        <el-table-column prop="systemCertificateScanFilename" label="扫描文件" width="300"/>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="delManSystemDetail(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-button class="table-btn" type="primary" @click="showAddManSystem">添加管理体系认证</el-button>
    </div>
    <el-dialog :visible.sync="dialogVisible" title="添加管理体系认证" :close-on-click-modal="false" append-to-body>
      <el-form ref="dataForm" :rules="manSystemRules" :model="manSystemInfo" label-well-code="right" label-width="150px">
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item label="管理体系认证名称" prop="systemCertificateName">
              <el-input v-model="manSystemInfo.systemCertificateName" placeholder="请输入管理体系认证名称" clearable :style="{ width: '100%' }" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item label="管理体系认证期限" prop="systemCertificateTerm">
              <el-input v-model="manSystemInfo.systemCertificateTerm" placeholder="请输入管理体系认证期限" clearable :style="{ width: '100%' }" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="18">
            <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>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveData">
          保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Uploadimg } from '@/api/common'
export default {
  name: 'ManSystemInfo',
  data() {
    return {
      busDetailQualifyCertificates: [],
      manSystemInfo: {
        systemCertificateName: '',
        systemCertificateTerm: '',
        systemCertificateScan: '',
        systemCertificateScanFilename: ''
      },
      systemCertificateScanFileList: [],
      manSystemRules: {
        systemCertificateName: [{ required: true, message: '请输入管理体系认证名称', trigger: 'blur' }],
        systemCertificateTerm: [{ required: true, message: '请输入管理体系认证期限', trigger: 'blur' }],
        systemCertificateScan: [{ required: true, message: '请上传管理体系扫描件', trigger: 'blur' }]
      },
      dialogVisible: false,
      manSystemInfoValid: false
    }
  },
  methods: {
    validateForm: function() {
      this.$refs.manSystemInfoForm.validate(valid => {
        this.manSystemInfoValid = valid
      })
    },
    showAddManSystem() {
      this.dialogVisible = true
      // 清除已有的内容
      this.manSystemInfo = {
        systemCertificateName: '',
        systemCertificateTerm: '',
        systemCertificateScan: '',
        systemCertificateScanFilename: ''
      }
      this.systemCertificateScanFileList = []

      this.$nextTick(() => {
        //  延时到下一帧才开始，也就是页面刚刚渲染结束！！
        this.$refs.dataForm.clearValidate()
      })
    },
    saveData() {
      const detail = {}
      detail.index = this.busDetailQualifyCertificates.length + 1
      detail.systemCertificateName = this.manSystemInfo.systemCertificateName
      detail.systemCertificateTerm = this.manSystemInfo.systemCertificateTerm
      detail.systemCertificateScan = this.manSystemInfo.systemCertificateScan
      detail.systemCertificateScanFilename = this.manSystemInfo.systemCertificateScanFilename
      this.busDetailQualifyCertificates.push(detail)
      this.dialogVisible = false
    },
    delManSystemDetail(row) {
      for (const i in this.busDetailQualifyCertificates) {
        if (this.busDetailQualifyCertificates[i].index === row.index) {
          this.busDetailQualifyCertificates.splice(i, 1)
          return
        }
      }
    },
    // 文件上传
    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.manSystemInfo.systemCertificateScanFilename = res.data.fileName
          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 lang="scss">
.form-table {
  display: flex;
  margin: 20px;

  .table-btn {
    margin-left: 100px;
  }

  ::v-deep .form-table-header {
    font-size: 16px;
  }
}
</style>