<!--季度评价弹窗-->
<template>
  <el-dialog title="季度评价" width="60%" :visible.sync="isShowInfo" append-to-body :close-on-click-modal="false">
    <el-form ref="evaluateForm" :model="addInfo" :rules="evaluateRules" 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="evaluateYear">
            <el-select v-model="addInfo.evaluateYear" clearable placeholder="请选择年份" style="width: 100%">
              <el-option v-for="item in evaluateAnnualOpts" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="季度" prop="evaluateQuarterly">
            <el-select v-model="addInfo.evaluateQuarterly" clearable placeholder="请选择季度" style="width: 100%">
              <el-option v-for="item in evaluateQuarterlyOpts" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="评审结果" prop="quarterlyEvaluateResult">
            <el-select v-model="addInfo.quarterlyEvaluateResult" clearable placeholder="请选择评价结果" style="width: 100%">
              <el-option v-for="item in evaluateResultOpts" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="评审日期" prop="quarterlyEvaluateDate">
            <el-date-picker v-model="addInfo.quarterlyEvaluateDate" 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.quarterlyEvaluateIllustration" 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="evaluateFile"
              action="action"
              :file-list="quarterlyEvaluateFileList"
              :http-request="uploadQuarterlyEvaluateFile"
              :before-upload="handleBeforeUpload"
              :on-remove="handleQuarterlyEvaluateFileRemove"
              :on-exceed="quarterlyEvaluateFileExceed"
              :on-preview="handlePreview"
              :limit="1"
              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="evaluateDialog">
      <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 { evaluateAdd } from '@/api/supplier/supplier'
import { Uploadimg } from '@/api/common'
import { getToday } from '@/utils/dateutils'
import { throttle } from 'lodash'
export default {
  name: 'EvaluateDialog',
  props: {
    evaluateAnnualOpts: {
      type: Array,
      default() {
        return []
      },
      required: true
    },
    evaluateQuarterlyOpts: {
      type: Array,
      default() {
        return []
      },
      required: true
    },
    evaluateResultOpts: {
      type: Array,
      default() {
        return []
      },
      required: true
    }
  },
  data() {
    return {
      isShowInfo: false,
      addInfo: {
        supplierCode: '',
        supplierName: '',
        evaluateYear: '',
        evaluateQuarterly: '',
        quarterlyEvaluateResult: '',
        quarterlyEvaluateIllustration: '',
        quarterlyEvaluateDate: '',
        quarterlyEvaluateFile: ''
      },
      evaluateRules: {
        evaluateYear: [{ required: true, message: '请选择评价年份', trigger: 'change' }],
        evaluateQuarterly: [{ required: true, message: '请选择评价季度', trigger: 'change' }],
        quarterlyEvaluateResult: [{ required: true, message: '请选择评价结果', trigger: 'change' }],
        quarterlyEvaluateDate: [{ required: true, message: '请选择评价日期', trigger: 'blur' }]
      },
      quarterlyEvaluateFileList: [],
      evaluateValid: false,
      throttleTime: 3
    }
  },
  methods: {
    close() {
      this.isShowInfo = false
      this.$emit('refreshList')
    },
    initDialog(row) {
      this.isShowInfo = true
      // this.clearForm()
      if (row !== null) {
        this.addInfo.supplierCode = row.supplierCode
        this.addInfo.supplierName = row.supplierName
        this.addInfo.quarterlyEvaluateDate = getToday('yyyy-MM-dd')
      }
    },
    save() {
        this.validateForm()
        if (this.evaluateValid === true) {
          if (this.quarterlyEvaluateFileList.length > 0) {
            for (const i in this.quarterlyEvaluateFileList) {
              this.addInfo.quarterlyEvaluateFile += this.quarterlyEvaluateFileList[i].url + ','
            }

          this.addInfo.quarterlyEvaluateFile = this.addInfo.quarterlyEvaluateFile.substring(0, this.addInfo.quarterlyEvaluateFile.length - 1)
        }
        if (this.throttleTime === 3) {
          this.throttleTime = 2
          evaluateAdd(this.addInfo).then(res => {
            this.throttleTime = 3
            if (!res.code) {
              this.$message.success('保存成功')
              this.clearForm()
              this.close()

            }
          }).catch(() => {
            this.throttleTime = 3
          })
        }
      }
    },
    throttleSave() {
      throttle(this.save, 3000)
    },
    validateForm: function() {
      this.$refs.evaluateForm.validate(valid => {
        this.evaluateValid = valid
      })
    },
    clearForm() {
      this.addInfo = {
        supplierCode: '',
        supplierName: '',
        evaluateYear: '',
        evaluateQuarterly: '',
        quarterlyEvaluateResult: '',
        quarterlyEvaluateIllustration: '',
        quarterlyEvaluateDate: '',
        quarterlyEvaluateFile: ''
      }
      this.quarterlyEvaluateFileList = []
      // 清除验证
      this.$nextTick(() => {
        this.$refs.evaluateForm.clearValidate()
      })
    },
    uploadQuarterlyEvaluateFile(file) {
      // 判断文件是否已经上传过
      for (const i in this.quarterlyEvaluateFileList) {
        if (this.quarterlyEvaluateFileList[i].name === file.name) {
          this.$message.error('该文件已上传过，请选择其他文件')
          this.handleFileNotUploaded(file, this.$refs.evaluateFile.uploadFiles)
          return
        }
      }

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