<template>
  <div>
    <Modal v-model="showModal" :mask-closable="false" width="700" @on-visible-change="_modalChange">
      <p slot="header">
        申请处理
      </p>
      <Form ref="formObj" :model="formObj" :rules="ruleValidate" :label-width="90">
        <Form-item label="处理方式:" prop="handleMethod" style="width:90%">
          <Select v-model="formObj.handleMethod" placeholder="请选择处理方式">
            <Option value="降级">
              降级
            </Option>
            <Option value="作废">
              作废
            </Option>
          </Select>
        </Form-item>
        <Form-item label="处理原因" prop="handleReason" style="width:90%">
          <Input v-model="formObj.handleReason" type="textarea" :rows="3" /></Input>
        </Form-item>
        <div slot="footer">
          <ModalFooter ref="footerModal" :footer="footerList" @on-result-change="_footerResult" />
        </div>
      </form>
    </Modal>
  </div>
</template>
<script>
import global from '../../../../api/config'

export default {
  components: {},
  data() {
    return {
      formObj: {
        handleMethod: '',
        handleReason: '',
        stockIds: '',
        checkOpinion: ''
      },
      ruleValidate: {
        handleMethod: [
          { required: true, message: '处理方式不能为空', trigger: 'blur' }
        ],
        handleReason: [
          { required: true, message: '处理原因不能为空', trigger: 'blur' }
        ]
      },
      showModal: false,
      footerList: [
        { id: '', name: '取消', type: '' },
        { id: '', name: '提交申请', type: 'primary' }
      ],
      fileAction: global.baseURL + '/res/v1/chemical_handle_apply/upload',
      fileObj: {},
      files: [],
      submit: false,
      isLoad: true
    }
  },
  methods: {
    _open(ids, data) {
      this.formObj = this.$resetFields(this.formObj)
      this.files = []
      this.formObj.stockIds = ids.join(',')
      this.submit = false
      this.isLoad = true
      if (data) {
        this.formObj.checkOpinion = data.checkOpinion
        // if(data.fileName){
        //   this.files.push({
        //     fileName: data.fileName,
        //     objectKey: data.objectKey,
        //     type: data.type,
        //     versionId: data.versionId,
        //     bucketName: data.bucketName,
        //   })
        // }
      }
      this.showModal = true
      this._hideLoading()
    },
    _handleBefore() {
      this.isLoad = false
    },
    _handleSuccess(response, file, fileList) {
      if (response.success) {
        this.$Message.success('上传成功！')
        this.files.push(response.data)
        this.isLoad = true
      } else {
        this.$Message.error('上传失败！')
        this.isLoad = true
      }
    },
    _handleView(file) {
      this.filePath =
        global.baseURL +
        '/res/v1/chemical_handle_apply/download?fileName=' +
        file.fileName +
        '&objectKey=' +
        file.objectKey +
        '&type=' +
        file.type
      const index1 = this.filePath.lastIndexOf('.')
      const index2 = this.filePath.length
      const suffix = this.filePath.substring(index1 + 1, index2) // 后缀名
      if (suffix === 'png' || suffix === 'jpg' || suffix === 'jpeg') {
        this.visible = true
      } else {
        this.$Message.warning({
          content: '非图片文件无法查看，请下载查看',
          duration: 3
        })
        this.visible = false
      }
    },
    _downloadFile(file) {
      // 下载文件
      this.$Modal.confirm({
        title: '提示',
        content: '确定要下载？',
        onOk: () => {
          const url =
            global.baseURL +
            '/res/v1/chemical_handle_apply/download?fileName=' +
            file.fileName +
            '&objectKey=' +
            file.objectKey +
            '&type=' +
            file.type
          window.open(url)
        }
      })
    },
    _handleRemove(file) {
      // 删除
      this.$Modal.confirm({
        title: '提示',
        content: '确定删除文件？',
        onOk: () => {
          // this.$store
          //   .dispatch('ChemicalHandleApply/deleteByKey', {
          //     objectKeys: file.objectKey
          //   })
          //   .then(() => {
          //     if (this.$store.state.ChemicalHandleApply.success) {
          //       this.files.splice(this.files.indexOf(file), 1)
          //       this.$Message.success('删除成功！')
          //     }
          //   })
        }
      })
    },
    _footerResult(name) {
      switch (name) {
        case '取消':
          this._cancel()
          break
        case '提交申请':
          this._submit()
          break
      }
    },
    _hideLoading() {
      this.$refs.footerModal._hideLoading()
    },
    _submit() {
      this.$refs.formObj.validate(valid => {
        if (valid) {
          const obj = {}
          Object.assign(obj, this.formObj, this.files[0])
          // this.$store.dispatch('ChemicalHandleApply/approve', obj).then(() => {
          //   if (this.$store.state.ChemicalHandleApply.success) {
          //     this.submit = true
          //     this.showModal = false
          //     this.$Message.success('提交成功')
          //     this.$emit('on-result-change')
          //   }
          //   this._hideLoading()
          // })
        } else {
          this.$Message.error('表单验证失败!')
          this._hideLoading()
        }
      })
    },
    _cancel() {
      this.showModal = false
    },
    _modalChange(value) {
      if (!value && this.submit === false) {
        this._clearFiles()
      }
    },
    _clearFiles() {
      if (this.files.length !== 0) {
        const key = []
        for (let i = 0; i < this.files.length; i++) {
          key.push(this.files[i].objectKey)
        }
        // this.$store
        //   .dispatch('ChemicalHandleApply/deleteByKey', {
        //     objectKeys: key.join(',')
        //   })
        //   .then(() => {
        //     if (this.$store.state.ChemicalHandleApply.success) {
        //       // this.files.splice(this.files.indexOf(file), 1);
        //       // this.$Message.success('删除成功！');
        //     }
        //   })
      }
    }
  }
}
</script>
