<template>
  <div>
      <el-dialog
        v-dialogDrag
        :visible.sync="showSubmitModal"
        :close-on-click-modal="false"
        width="700px"
        :title="modalTitle"
        v-loading="isLoad"
      >
      <el-alert type="warning" effect="dark" :closable="false">
        请下载导入模板并按照正确格式填写！
      </el-alert>
      <div v-show="showError" class="margin-top-10">
        <el-alert type="error" effect="dark"  :closable="false">
          {{ errorMessage }}
        </el-alert>
      </div>
      <div v-show="showSuccess" class="margin-top-10">
        <el-alert type="success" effect="dark" :closable="false">
          {{ successMessage }}
        </el-alert>
      </div>
      <div class="margin-top-10">
        <el-button type="default" size="small" @click="_download">
          下载模板
        </el-button>
      </div>
      <div slot="footer" class="btn-width">
        <el-button type="default" style="margin-left: 8px" @click="_cancel">
          取消
        </el-button>
        <label style="margin-bottom: 0;display: inline-block">
          <el-upload
            :action="importUrl"
            :on-success="_handelsuccess"
            :before-upload="_beupload"
            :on-progress="_handelprogress"
            :data="dataObj"
            :with-credentials="true"
            :show-file-list="false"
            :accept="accept"
          >
            <el-button type="primary" :disabled="isDisabled">
              导入
            </el-button>
          </el-upload>
        </label>
      </div>
      </el-dialog>
  </div>
</template>
<script>
/**
 * 导入并下载模板
 */
import global from '../../api/config'

export default {
  components: {},
  data() {
    return {
      modalTitle: '导入信息',
      showSubmitModal: false,
      isLoad: false,
      isDisabled: false,
      showError: false,
      showSuccess: false,
      dataObj: {
        file: ''
      },
      errorMessage: '',
      successMessage: '',
      accept: '',
      importUrl: '',
      downloadUrl: ''
    }
  },
  methods: {
    _open(data) {
      this.showSubmitModal = 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.accept = data.accept ? data.accept : '.xlsx,.xls'
    },
    _download() {
      window.open(global.baseURL + this.downloadUrl, '_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.isDisabled = false
        this.showError = false
        this.showSuccess = true
        this.successMessage = response.msg
      } else {
        this.isLoad = false
        this.showSuccess = false
        this.isDisabled = false
        this.showError = true
        this.errorMessage = response.msg
      }
    }
  }
}
</script>
