<template>
  <el-form ref="operInfoForm" :model="operationInfo" :rules="operationRules" size="medium" label-width="150px" style="margin-top: 20px">
    <el-row style="margin-top: 20px">
      <el-col :span="6">
        <el-form-item label="年份" prop="currentYear">
          <el-date-picker v-model="operationInfo.currentYear" type="year" format="yyyy" value-format="yyyy" :style="{ width: '100%' }" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item :label="lastYearIncome" prop="yearIncome">
          <el-input v-model="operationInfo.yearIncome" placeholder="请输入上年度收入（万元）" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item :label="lastYearProfit" prop="yearProfit">
          <el-input v-model="operationInfo.yearProfit" placeholder="请输入上年度利润（万元）" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label="近三年资产负债表" prop="threeYearLiabilitiesTable">
          <el-upload
            ref="liabilitiesFileUpload"
            action="action"
            :file-list="threeYearLiabilitiesFileList"
            :http-request="uploadLiabilitiesScanFile"
            :on-remove="handleLiabilitiesScanFileRemove"
            :on-exceed="liabilitiesScanFileExceed"
            :limit="1"
            accept=".pdf"
          >
            <el-button size="small" type="primary" icon="el-icon-upload">
              上传文件
            </el-button>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="近三年损益表" prop="threeYearLossTable">
          <el-upload
            ref="lossFileUpload"
            action="action"
            :file-list="threeYearLossFileList"
            :http-request="uploadLossScanFile"
            :on-remove="handleLossScanFileRemove"
            :on-exceed="lossScanFileExceed"
            :limit="1"
            accept=".pdf"
          >
            <el-button size="small" type="primary" icon="el-icon-upload">
              上传文件
            </el-button>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="近三年现金流量表" prop="threeYearFlowTable">
          <el-upload
            ref="flowFileUpload"
            action="action"
            :file-list="threeYearFlowFileList"
            :http-request="uploadFlowScanFile"
            :on-remove="handleFlowScanFileRemove"
            :on-exceed="flowScanFileExceed"
            :limit="1"
            accept=".pdf"
          >
            <el-button size="small" type="primary" icon="el-icon-upload">
              上传文件
            </el-button>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { Uploadimg } from '@/api/common'
import { validateFloat, validateFloatPlus } from '@/utils/validate'
export default {
  name: 'OperationInfo',
  mounted() {
    this.getCurrentYear()
  },
  computed: {
    lastYear: function() {
      return parseInt(this.operationInfo.currentYear) - 1
    },
    lastYearIncome() {
      return '上年度(' + this.lastYear + ')收入'
    },
    lastYearProfit() {
      return '上年度(' + this.lastYear + ')利润'
    }
  },
  watch: {
    'operationInfo.currentYear': function() {
      if (this.operationInfo.currentYear === '' || this.operationInfo.currentYear === null) {
        this.getCurrentYear()
      }
    }
  },
  data() {
    const incomeValidator = (rule, value, callback) => {
      if (value !== undefined && value !== '' && validateFloatPlus(value) === false) {
        callback(new Error('请输入非负数字'))
      } else {
        callback()
      }
    }
    const profitValidator = (rule, value, callback) => {
      if (value !== undefined && value !== '' && validateFloat(value) === false) {
        callback(new Error('请输入数字'))
      } else {
        callback()
      }
    }
    return {
      operationInfo: {
        currentYear: '',
        yearIncome: '',
        yearProfit: '',
        threeYearLiabilitiesTable: '',
        threeYearLossTable: '',
        threeYearFlowTable: ''
      },
      threeYearLiabilitiesFileList: [],
      threeYearLossFileList: [],
      threeYearFlowFileList: [],
      operationRules: {
        yearIncome: [{ required: true, message: '请输入上年度收入（万元）', trigger: 'blur' }, { validator: incomeValidator, trigger: 'blur' }],
        yearProfit: [{ required: true, message: '请输入上年度利润（万元）', trigger: 'blur' }, { validator: profitValidator, trigger: 'blur' }],
        threeYearLiabilitiesTable: [{ required: true, message: '请上传近三年资产负债表', trigger: 'blur' }],
        threeYearLossTable: [{ required: true, message: '请上传近三年损益表', trigger: 'blur' }],
        threeYearFlowTable: [{ required: true, message: '请上传近三年先进流量表', trigger: 'blur' }]
      },
      operationInfoValid: false
    }
  },
  methods: {
    getCurrentYear() {
      this.operationInfo.currentYear = new Date().getFullYear() + ''
    },
    validateForm: function() {
      this.$refs.operInfoForm.validate(valid => {
        this.operationInfoValid = valid
      })
    },
    clearForm() {
      this.operationInfo = {
        currentYear: '',
        yearIncome: '',
        yearProfit: '',
        threeYearLiabilitiesTable: '',
        threeYearLossTable: '',
        threeYearFlowTable: ''
      }
      this.threeYearFlowFileList = []
      this.threeYearLossFileList = []
      this.threeYearLiabilitiesFileList = []
      // 清除验证
      this.$nextTick(() => {
        this.$refs.operInfoForm.clearValidate()
      })
    },
    // 文件上传
    uploadLiabilitiesScanFile(file) {
      const upload = this.handleBeforeUpload(file.file, this.threeYearLiabilitiesFileList)
      if (upload === false) {
        return
      }
      const base_url = this.baseConfig.baseUrl + '/static/'
      Uploadimg(file).then(res => {
        if (res.code === 200) {
          this.threeYearLiabilitiesFileList = [] // 只保留一张图片或一个文件
          this.threeYearLiabilitiesFileList.push({ name: res.data.fileName, url: base_url + res.data.fileId })
          this.operationInfo.threeYearLiabilitiesTable = res.data.fileId
          this.$refs.operInfoForm.validateField('threeYearLiabilitiesTable')
          this.$message.success('文件上传成功')
        }
      })
    },
    uploadLossScanFile(file) {
      const upload = this.handleBeforeUpload(file.file, this.threeYearLossFileList)
      if (upload === false) {
        return
      }
      const base_url = this.baseConfig.baseUrl + '/static/'
      Uploadimg(file).then(res => {
        if (res.code === 200) {
          this.threeYearLossFileList = [] // 只保留一张图片或一个文件
          this.threeYearLossFileList.push({ name: res.data.fileName, url: base_url + res.data.fileId })
          this.operationInfo.threeYearLossTable = res.data.fileId
          this.$refs.operInfoForm.validateField('threeYearLossTable')
          this.$message.success('文件上传成功')
        }
      })
    },
    uploadFlowScanFile(file) {
      const upload = this.handleBeforeUpload(file.file, this.threeYearFlowFileList)
      if (upload === false) {
        return
      }
      const base_url = this.baseConfig.baseUrl + '/static/'
      Uploadimg(file).then(res => {
        if (res.code === 200) {
          this.threeYearFlowFileList = [] // 只保留一张图片或一个文件
          this.threeYearFlowFileList.push({ name: res.data.fileName, url: base_url + res.data.fileId })
          this.operationInfo.threeYearFlowTable = res.data.fileId
          this.$refs.operInfoForm.validateField('threeYearFlowTable')
          this.$message.success('文件上传成功')
        }
      })
    },
    handleLiabilitiesScanFileRemove(file) {
      this.operationInfo.threeYearLiabilitiesTable = ''
      this.handleRemove(file, this.threeYearLiabilitiesFileList)
      this.$refs.operInfoForm.validateField('threeYearLiabilitiesTable')
    },
    handleLossScanFileRemove(file) {
      this.operationInfo.threeYearLossTable = ''
      this.handleRemove(file, this.threeYearLossFileList)
      this.$refs.operInfoForm.validateField('threeYearLossTable')
    },
    handleFlowScanFileRemove(file) {
      this.operationInfo.threeYearFlowTable = ''
      this.handleRemove(file, this.threeYearFlowFileList)
      this.$refs.operInfoForm.validateField('threeYearFlowTable')
    },
    liabilitiesScanFileExceed(file, fileList) {
      this.handleExceed(file, this.threeYearLiabilitiesFileList)
    },
    lossScanFileExceed(file, fileList) {
      this.handleExceed(file, this.threeYearLossFileList)
    },
    flowScanFileExceed(file, fileList) {
      this.handleExceed(file, this.threeYearFlowFileList)
    },
    // 上传前判断文件格式及大小
    handleBeforeUpload(file, fileList) {
      let res = true
      // 判断文件格式
      const isPDF = file.type === 'application/pdf'
      if (!isPDF) {
        this.$message.error('上传文件只能是 PDF文档 格式!')
        res = false
      }

      // 判断文件大小
      const isLt10M = file.size / 1024 / 1024 < 10
      if (!isLt10M) {
        this.$message.error('上传文件大小不能超过 10MB!')
        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>

</style>