<template>
  <div>
    <Modal v-model="showSubmitModal">
      <p slot="header">{{modalTitle}}</p>
      <div v-show="isLoad">
        <Spin fix>
          <Icon type="load-c" size=18 class="file-spin-icon-load"></Icon>
          <div>正在上传,请稍后...</div>
        </Spin>
      </div>
      <Alert type="warning" show-icon>请填写修改信息，例：xxx由xxx修改为xxx,多条填写时以‘；’分隔！</Alert>
      <Input v-model="remark" :autosize="{minRows: 3,maxRows: 5}" @on-keyup="_blurChange"
             type="textarea" placeholder="请输入内容"></Input>
      <div style="margin-top:10px">
        <Form :label-width="80" onsubmit="return false">
          <Form-item label="报告名称:">
            <Input v-model="reportName" @on-blur="_action" placeholder="请输入报告名称"/>
          </Form-item>
        </Form>
      </div>
      <div slot="footer" class="btn-width">
        <Button @click="_cancel" style="margin-left: 8px">取消</Button>
        <label style="margin-bottom: 0;float: right;margin-left: 20px;">
          <Upload
            :action="action"
            :on-success="_handelsuccess"
            :before-upload="_beupload"
            :on-progress="_handelprogress"
            :data="dataObj"
            :with-credentials="true"
            :show-upload-list="false"
          >

            <Button :disabled="isDisable" type="primary">上传</Button>
          </Upload>
        </label>
      </div>
    </Modal>
  </div>
</template>
<script>
/**
 * 上传报告-----报告台账上传报告
 */
import global from '../../../api/config'

export default {
  components: {},
  data() {
    return {
      ids: [], // 合同ids
      modalTitle: '上传报告',
      showSubmitModal: false,
      isLoad: false,
      action: '',
      dataObj: {
        file: ''
      },
      remark: '',
      reportId: 0,
      isDisable: true,
      isReport: false, // 是否有过报告,
      reportName: ''
    }
  },
  methods: {
    _open(reportId) {
      console.log(reportId)
      this.showSubmitModal = true
      this.isLoad = false
      this.reportId = reportId
      this.reportName = ''
      this.remark = ''
    },
    _blurChange() {
      if (this.remark !== '') {
        this._action()
        this.isDisable = false
      } else {
        this.isDisable = true
      }
    },
    _action() {
      // http://api.pertest.patzn.com:7000/meter/v1/report/upload_1111?reason=111111&reportCode=2222222
      this.action =
        global.baseURL +
        // /v1/report/upload_{sampleId}
        '/meter/v1/report/upload_' +
        this.reportId +
        '?reason=' +
        this.remark +
        '&reportName=' +
        this.reportName
    },
    _beupload(file) {
      this.dataObj.file = file.name
    },
    _handelprogress(event, file, fileList) {
      this.isLoad = true
    },
    _handelsuccess(response, file, fileList) {
      // 上传成功
      if (response.success) {
        this.isLoad = false
        this.$Message.success('上传成功！')
        this.$emit('on-result-change')
        this.showSubmitModal = false
      } else {
        this.isLoad = false
        this.$Message.error(response.msg)
      }
    },
    _cancel() {
      this.showSubmitModal = false
    }
  }
}
</script>
