<!--资料预审弹窗-->
<template>
  <el-dialog title="资料预审" width="60%" :visible.sync="isShowInfo" append-to-body :close-on-click-modal="false" @close="close">
    <el-form ref="inquiryForm" :model="addInfo" :rules="inquiryRules" 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="preReviewResult">
            <el-switch
              v-model="addInfo.preReviewResult"
              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="preReviewDate">
            <el-date-picker v-model="addInfo.preReviewDate" 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.preReviewIllustration" 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="preReviewFile"
              action="action"
              :file-list="preReviewFileList"
              :http-request="uploadPreReviewFile"
              :before-upload="handleBeforeUpload"
              :on-remove="handlePreReviewFileRemove"
              :on-exceed="preReviewFileExceed"
              :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 { inquiryAdd } from '@/api/supplier/supplier'
import { Uploadimg } from '@/api/common'
import { getToday } from '@/utils/dateutils'
export default {
  name: 'InquiryDialog',
  computed: {
    preReviewResult: function() {
      if (this.addInfo.preReviewResult === this.options[0].value) {
        return this.options[0].label
      } else if (this.addInfo.preReviewResult === this.options[1].value) {
        return this.options[1].label
      } else {
        return ''
      }
    }
  },
  data() {
    return {
      isShowInfo: false,
      options: [
        { label: '预审通过', value: '1' },
        { label: '预审不通过', value: '2' }
      ],
      addInfo: {
        supplierCode: '',
        supplierName: '',
        preReviewResult: '1',
        preReviewResultValue: '',
        preReviewIllustration: '',
        preReviewDate: '',
        preReviewFile: ''
      },
      inquiryRules: {
        preReviewResult: [{ required: true, message: '请选择预审结果', trigger: 'blur' }],
        preReviewDate: [{ required: true, message: '请选择预审日期', trigger: 'blur' }]
      },
      preReviewFileList: [],
      inquiryValid: 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.preReviewDate = getToday('yyyy-MM-dd')
      }
    },
    save() {
      this.addInfo.preReviewResultValue = this.preReviewResult

      this.validateForm()
      if (this.inquiryValid === true) {
        if (this.preReviewFileList.length > 0) {
          for (const i in this.preReviewFileList) {
            this.addInfo.preReviewFile += this.preReviewFileList[i].url + ','
          }

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

        inquiryAdd(this.addInfo).then(res => {
          if (!res.code) {
            this.$message.success('保存成功')
            this.clearForm()
            this.close()
          }
        })
      }
    },
    validateForm: function() {
      this.$refs.inquiryForm.validate(valid => {
        this.inquiryValid = valid
      })
    },
    clearForm() {
      this.addInfo = {
        supplierCode: '',
        supplierName: '',
        preReviewResult: '1',
        preReviewResultValue: '',
        preReviewIllustration: '',
        preReviewDate: '',
        preReviewFile: ''
      }
      this.preReviewFileList = []
      // 清除验证
      this.$nextTick(() => {
        this.$refs.inquiryForm.clearValidate()
      })
    },
    uploadPreReviewFile(file) {
      // 判断文件是否已经上传过
      for (const i in this.preReviewFileList) {
        if (this.preReviewFileList[i].name === file.name) {
          this.$message.error('该文件已上传过，请选择其他文件')
          this.handleFileNotUploaded(file, this.$refs.preReviewFile.uploadFiles)
          return
        }
      }

      Uploadimg(file).then(res => {
        if (res.code === 200) {
          this.preReviewFileList.push({
            name: res.data.fileName,
            url: res.data.fileId,
            type: file.file.type
          })
          this.$message.success('文件上传成功')
        }
      })
    },
    handlePreReviewFileRemove(file) {
      this.handleRemove(file, this.preReviewFileList)
    },
    preReviewFileExceed(file, fileList) {
      this.handleExceed(file, this.preReviewFileList)
    },
    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 {
  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>