<!--下载模板导入-->
<template>
  <div>
    <Modal v-model="showModal" :mask-closable="false" class="zIndex-1100">
      <p slot="header">{{modalTitle}}</p>
      <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>
      <Alert v-if="msg === '上传图片'" type="warning" show-icon>请选择png,jpg格式的图片上传</Alert>
      <div v-show="isLoad">
        <Spin>
          <Icon type="load-c" size=18 class="file-spin-icon-load"></Icon>
          <div>正在导入,请稍后...</div>
        </Spin>
      </div>
<!--      <div>-->
<!--        <Button v-if="hideDownloadBtn===undefined" size="large" @click="_download">下载模板</Button>-->
<!--      </div>-->

      <div slot="footer" class="btn-width">
        <Button @click="_cancel">取消</Button>
        <label style="margin-bottom: 0;margin-left:15px; float: right">
          <Upload
            :action="importUrl"
            :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 :disabled="isDisabled" type="primary">导入</Button>
          </Upload>
        </label>
      </div>
    </Modal>
  </div>
</template>
<script>
/**
 * 导入并下载模板
 */
// import global from '../../api/config'
import global from '../../api/config'

export default {
  components: {},
  props: {
    hideDownloadBtn: null
  },
  data() {
    return {
      msg: '',
      modalTitle: '上传图片信息',
      showModal: false,
      isLoad: false,
      isDisabled: false,
      showError: false,
      showSuccess: false,
      dataObj: {
        file: ''
      },
      errorMessage: '',
      successMessage: '',
      format: ['png', 'jpg'],
      importUrl: '',
      downloadUrl: '',
      // 500的提示语
      errStr: '很抱歉！无法处理您的操作，请检查您的操作步骤或者联系系统管理员!'
    }
  },
  methods: {
    _open(data, msg) {
      this.isLoad = false
      this.showModal = true
      this.isDisabled = false
      this.showError = false
      this.showSuccess = false
      this.modalTitle = data.title
      this.importUrl = global.baseURL + data.importUrl
      this.downloadUrl = data.downloadUrl
      this.msg = msg
    },
    _cancel() {
      this.showModal = 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) {
        console.log('---response', response)
        this.isLoad = false
        this.$Message.success('导入成功！')
        this.$emit('on-result-change', response.data)
        this.showModal = 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.code === '500' ? this.errStr : response.msg
        this.showError = true
        // this.$Message.error(response.msg);
      }
    },
    _formatError(file) {
      this.$Notice.error({
        title: '文件格式不正确',
        duration: 10,
        desc:
          '文件 ' + file.name + ' 格式不正确，请上传格式为 .xlsx、xls 的文件！'
      })
      this.isLoad = false
    }
  }
}
</script>
