<!--录库评审弹窗-->
<template>
  <el-dialog title="录库评审" width="60%" :visible.sync="isShowInfo" append-to-body :close-on-click-modal="false">
    <el-form ref="reviewForm" :model="addInfo" :rules="reviewRules" size="medium" label-width="150px">
      <el-row style="margin-top: 20px">
        <el-col :span="10">
          <el-form-item label="供应商名称">
            <el-input v-model="addInfo.supplierName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="供应商编号">
            <el-input v-model="addInfo.supplierCode" disabled />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="评审结果" prop="inputReviewResult">
            <el-switch
              v-model="addInfo.inputReviewResult"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-text="options[0].label"
              :inactive-text="options[1].label"
              :active-value="options[0].value"
              :inactive-value="options[1].value"
            >
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="评审日期" prop="inputReviewDate">
            <el-date-picker v-model="addInfo.inputReviewDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择日期" style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="评审结果说明">
            <el-input v-model="addInfo.inputReviewIllustration" type="textarea" :rows="4" placeholder="请输入评审结果说明" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="录库评审附件">
            <el-upload
              ref="inputReviewFile"
              action="action"
              :file-list="inputReviewFileList"
              :http-request="uploadInputReviewFile"
              :before-upload="handleBeforeUpload"
              :on-remove="handleInputReviewFileRemove"
              :on-exceed="inputReviewFileExceed"
              :on-preview="handlePreview"
              :limit="5"
              accept=".jpg,.jpeg,.png,.pdf,.doc,.docx,.zip,.rar"
            >
              <el-button type="primary" icon="el-icon-upload">
                上传录库评审结果附件
              </el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="reviewDialog">
      <div class="btnBox">
        <el-button type="primary" class="save" @click="save">
          保存
        </el-button>
        <el-button type="info" class="close" @click="close">
          取消
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>

import { reviewAdd } from '@/api/supplier/supplier'
import { Uploadimg } from '@/api/common'
import { getToday } from '@/utils/dateutils'

export default {
  name: 'ReviewDialog',
  data() {
    return {
      isShowInfo: false,
      options: [
        { label: '评审通过', value: '3' },
        { label: '评审不通过', value: '4' }
      ],
      addInfo: {
        supplierCode: '',
        supplierName: '',
        inputReviewResult: '3',
        inputReviewIllustration: '',
        inputReviewDate: '',
        inputReviewFile: ''
      },
      reviewRules: {
        inputReviewResult: [{ required: true, message: '请选择评审结果', trigger: 'blur' }],
        inputReviewDate: [{ required: true, message: '请选择评审日期', trigger: 'blur' }]
      },
      inputReviewFileList: [],
      reviewValid: false
    }
  },
  methods: {
    close() {
      this.isShowInfo = false
      this.$emit('refreshList')
    },
    initDialog(row) {
      this.isShowInfo = true
      if (row !== null) {
        this.addInfo.supplierCode = row.supplierCode
        this.addInfo.supplierName = row.supplierName
        this.addInfo.inputReviewDate = getToday('yyyy-MM-dd')
      }
    },
    save() {
      this.validateForm()
      if (this.reviewValid === true) {
        if (this.inputReviewFileList.length > 0) {
          for (const i in this.inputReviewFileList) {
            this.addInfo.inputReviewFile += this.inputReviewFileList[i].url + ','
          }

          this.addInfo.inputReviewFile = this.addInfo.inputReviewFile.substring(0, this.addInfo.inputReviewFile.length - 1)
        }

        reviewAdd(this.addInfo).then(res => {
          if (!res.code) {
            this.$message.success('保存成功')
            this.clearForm()
            this.close()
          }
        })
      }
    },
    validateForm: function() {
      this.$refs.reviewForm.validate(valid => {
        this.reviewValid = valid
      })
    },
    clearForm() {
      this.addInfo = {
        supplierCode: '',
        supplierName: '',
        inputReviewResult: '3',
        inputReviewIllustration: '',
        inputReviewDate: '',
        inputReviewFile: ''
      }
      this.inputReviewFileList = []
      // 清除验证
      this.$nextTick(() => {
        this.$refs.reviewForm.clearValidate()
      })
    },
    uploadInputReviewFile(file) {
      // 判断文件是否已经上传过
      for (const i in this.inputReviewFileList) {
        if (this.inputReviewFileList[i].name === file.name) {
          this.$message.error('该文件已上传过，请选择其他文件')
          this.handleFileNotUploaded(file, this.$refs.inputReviewFile.uploadFiles)
          return
        }
      }

      Uploadimg(file).then(res => {
        if (res.code === 200) {
          this.inputReviewFileList.push({
            name: res.data.fileName,
            url: res.data.fileId,
            type: file.file.type
          })
          this.$message.success('文件上传成功')
        }
      })
    },
    handleInputReviewFileRemove(file) {
      this.handleRemove(file, this.inputReviewFileList)
    },
    inputReviewFileExceed(file, fileList) {
      this.handleExceed(file, this.inputReviewFileList)
    },
    handlePreview(file) {
      if (file.status === 'success') {
        const base_url = this.baseConfig.baseUrl + '/static/'

        // 已经上传成功的文件 直接在新窗口打开预览
        window.open(base_url + file.url, '_blank')
      }
    },
    // 上传前判断文件格式及大小
    handleBeforeUpload(file) {
      let res = true
      // 判断文件格式
      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
      const isPDF = file.type === 'application/pdf'
      const isWord = (file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') || (file.type === 'application/msword')
      const isZip = (file.type === 'application/x-rar') || (file.type === 'application/zip')
      if (!isJPG && !isPDF && !isWord && !isZip) {
        this.$message.error('上传文件只能是 图片/PDF/WORD/压缩包 格式!')
        res = false
      }

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

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

<style lang='scss' scoped>
.reviewDialog {
  width: 975px;
  padding: 0 20px;
  box-sizing: border-box;

  .btnBox {
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .save,
    .close {
      width: 200px;
    }

  }
}

</style>