<!--年度考核弹窗-->
<template>
  <el-dialog title="年度考核" width="60%" :visible.sync="isShowInfo" append-to-body :close-on-click-modal="false">
    <el-form ref="assessForm" :model="addInfo" :rules="assessRules" 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="assessAnnual">
            <el-select v-model="addInfo.assessAnnual" clearable placeholder="请选择年份" style="width: 100%">
              <el-option v-for="item in assessAnnualOpts" :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="annualAssessResult">
            <el-select v-model="addInfo.annualAssessResult" clearable placeholder="请选择考核结果" style="width: 100%">
              <el-option v-for="item in assessResultOpts" :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="annualAssessDate">
            <el-date-picker v-model="addInfo.annualAssessDate" 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.annualAssessIllustration" 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="assessFile"
              action="action"
              :file-list="annualAssessFileList"
              :http-request="uploadAnnualAssessFile"
              :before-upload="handleBeforeUpload"
              :on-remove="handleAnnualAssessFileRemove"
              :on-exceed="annualAssessFileExceed"
              :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="assessDialog">
      <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 { assessAdd } from '@/api/supplier/supplier'
import { Uploadimg } from '@/api/common'
import { getToday } from '@/utils/dateutils'

export default {
  name: 'AssessDialog',
  props: {
    assessAnnualOpts: {
      type: Array,
      default() {
        return []
      },
      required: true
    },
    assessResultOpts: {
      type: Array,
      default() {
        return []
      },
      required: true
    }
  },
  data() {
    return {
      isShowInfo: false,
      addInfo: {
        supplierCode: '',
        supplierName: '',
        assessAnnual: '',
        annualAssessResult: '',
        annualAssessIllustration: '',
        annualAssessDate: '',
        annualAssessFile: ''
      },
      assessRules: {
        assessAnnual: [{ required: true, message: '请选择考核年份', trigger: 'change' }],
        annualAssessResult: [{ required: true, message: '请选择考核结果', trigger: 'change' }],
        annualAssessDate: [{ required: true, message: '请选择考核日期', trigger: 'blur' }]
      },
      annualAssessFileList: [],
      assessValid: 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.annualAssessDate = getToday('yyyy-MM-dd')
      }
    },
    save() {
      this.validateForm()
      if (this.assessValid === true) {
        if (this.annualAssessFileList.length > 0) {
          for (const i in this.annualAssessFileList) {
            this.addInfo.annualAssessFile += this.annualAssessFileList[i].url + ','
          }

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

        assessAdd(this.addInfo).then(res => {
          if (!res.code) {
            this.$message.success('保存成功')
            this.clearForm()
            this.close()
          }
        })
      }
    },
    validateForm: function() {
      this.$refs.assessForm.validate(valid => {
        this.assessValid = valid
      })
    },
    clearForm() {
      this.addInfo = {
        supplierCode: '',
        supplierName: '',
        assessAnnual: '',
        annualAssessResult: '',
        annualAssessIllustration: '',
        annualAssessDate: '',
        annualAssessFile: ''
      }
      this.annualAssessFileList = []
      // 清除验证
      this.$nextTick(() => {
        this.$refs.assessForm.clearValidate()
      })
    },
    uploadAnnualAssessFile(file) {
      // 判断文件是否已经上传过
      for (const i in this.annualAssessFileList) {
        if (this.annualAssessFileList[i].name === file.name) {
          this.$message.error('该文件已上传过，请选择其他文件')
          this.handleFileNotUploaded(file, this.$refs.assessFile.uploadFiles)
          return
        }
      }

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