<template>
  <div>
    <Modal v-model="showSubmitModal" :mask-closable="false">
      <p slot="header">
        {{ modalTitle }}
      </p>
      <Alert type="warning" show-icon>
        请下载导入模板并按照正确格式填写！
      </Alert>
      <Alert v-if="showError" type="error" show-icon style="margin-top: 10px">
        {{ errorMessage }}
      </Alert>
      <Alert v-if="showSuccess" type="success" show-icon style="margin-top: 10px">
        {{ successMessage }}
      </Alert>
      <div v-show="isLoad">
        <Spin>
          <Icon type="load-c" size="18" class="file-spin-icon-load" />
          <div>正在导入,请稍后...</div>
        </Spin>
      </div>
      <div>
        <Button type="ghost" @click="_download">
          下载模板
        </Button>
      </div>

      <div slot="footer" class="btn-width">
        <Button type="ghost" style="margin-left: 8px" @click="_cancel">
          取消
        </Button>
        <label style="margin-bottom: 0">
          <Upload
            :action="action"
            :on-success="_handelsuccess"
            :before-upload="_beupload"
            :on-progress="_handelprogress"
            :on-format-error="_formatError"
            :data="dataObj"
            :with-credentials="true"
            :show-upload-list="false"
            :format="format"
          >
            <Button type="primary" :disabled="isDisabled">导入</Button>
          </Upload>
        </label>
      </div>
    </Modal>
  </div>
</template>
<script>
import global from '../../../api/config'
export default {
  components: {},
  data() {
    return {
      modalTitle: '导入',
      showSubmitModal: false,
      isLoad: false,
      isDisabled: false,
      action: '',
      showError: false,
      showSuccess: false,
      dataObj: {
        file: ''
      },
      errorMessage: '',
      successMessage: '',
      format: ['xlsx', 'xls']
    }
  },
  methods: {
    _open() {
      this.showSubmitModal = true
      this.isDisabled = false
      this.showError = false
      this.showSuccess = false
      this.action = global.baseURL + '/env/v1/env_monitor/importNormal'
    },
    _download() {
      this.$Modal.confirm({
        title: '提示',
        content: '确定要下载模板？',
        onOk: () => {
          window.open(
            global.baseURL + '/env/v1/env_monitor/exportNormalAll',
            '_blank'
          )
        }
      })
    },
    _cancel() {
      this.showSubmitModal = false
    },
    _beupload(file) {
      this.dataObj.file = file.name
    },
    _handelprogress(event, file, fileList) {
      this.isLoad = true
      this.isDisabled = true
    },
    _handelsuccess(response, file, fileList) {
      // 上传成功
      if (response.success) {
        this.isLoad = false
        this.$Message.success('导入成功！')
        this.$emit('on-result-change')
        this.showEditModal = false
        this.isDisabled = false
        this.showError = false
        this.showSuccess = true
        this.successMessage = response.msg
      } else {
        this.isLoad = false
        this.showSuccess = false
        this.isDisabled = false
        this.errorMessage = response.msg
        this.showError = true
        this.$Message.error(response.msg)
      }
    },
    _formatError(file) {
      this.$Notice.error({
        title: '文件格式不正确',
        duration: 10,
        desc:
          '文件 ' + file.name + ' 格式不正确，请上传格式为 .xlsx、xls 的文件！'
      })
    }
  }
}
</script>
