<template>
  <div id="upload-wrap">
    <div class="upload-con">
      <Upload
        ref="upload"
        :show-upload-list="false"
        :format="format"
        :max-size="maxSize"
        :before-upload="beforeUpload"
        :on-format-error="handleFormatError"
        :on-exceeded-size="handleMaxSize"
        :on-success="handleSuccess"
        :on-error="handleError"
        :multiple="multiple"
        :headers="headers"
        :action="importAction"
        :data="importData"
      >
        <Button
          icon="ios-cloud-upload-outline"
          size="small"
          :disabled="loadingStatus || disabled"
        >
          {{ $t('选择文件') }}
        </Button>
      </Upload>
      <Input
        v-if="file !== null"
        v-model="file.name"
        style="width: 240px"
        type="text"
        size="small"
        :readonly="true"
      />
      <Input
        v-else
        style="width: 240px"
        type="text"
        size="small"
        :readonly="true"
      />
    </div>
    <br>
    <div slot="footer">
      <Button
        v-if="!!downloadAction"
        type="primary"
        size="small"
        style="margin-right:10px"
        @click.native="downloadTemplate"
      >
        {{ $t('下载模板') }}
      </Button>
      <Button
        :disabled="disabled"
        :loading="loadingStatus"
        size="small"
        style="margin-right:10px"
        @click.native="upload"
      >
        {{ loadingStatus ? $t('上传中') : $t('确认导入') }}
      </Button>
      <Button
        size="small"
        :disabled="loadingStatus"
        @click.native="onCancel"
      >
        {{ $t('取消导入') }}
      </Button>
    </div>
    <Modal v-model="show" footer-hide>
     {{ `${this.errInfo}`}}
     <a @click='downLoadErrFile' v-if="showDownErr">下载文件</a>
    </Modal>
  </div>
</template>
<script>
export default {
  name: 'ImportUpload',
  props: {
    setTitle: {
      type: String,
      default() {
        return this.$t('文件导入');
      }
    },
    disabled: {
      type: Boolean,
      default() {
        return false;
      }
    },
    format: {
      type: Array,
      default() {
        return ['xlsx', 'xls', 'xlsm'];
      }
    },
    maxSize: {
      type: Number,
      default() {
        return 10240;
      }
    },
    importAction: {
      type: String,
      default() {
        return '';
      }
    },
    downloadAction: {
      type: String,
      default() {
        return '';
      }
    },
    importData: {
      type: Object,
      default() {
        return {}
      }
    },
    downloadData: {
      type: Object,
      default() {
        return {}
      }
    },
    errdownloadAction: { // 下载失败原因
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      file: null,
      loadingStatus: false,
      multiple: false,
      show: false,
      errInfo: '',
      headers: {
        crctoken: window.sessionStorage.getItem('crctoken')
      },
      showDownErr: false
    };
  },
  created() {
    this.$emit('SetPageSize', 400);
    this.$emit('SetTitle', this.setTitle);
  },
  mounted() {},

  methods: {

    // 下载模板
    downloadTemplate() {
      this.$DownloadFile(
        {
          url: this.downloadAction,
          method: 'post',
          data: this.downloadData || {}
        },
        this
      );
    },

    // 下载错误信息
    downLoadErrFile() {
      this.$DownloadFile(
        {
          url: this.errdownloadAction,
          method: 'post',
          data: this.errParams || {}
        },
        this
      );
    },
    // 上传前
    beforeUpload(file) {
      console.log('before-upload', file);
      this.file = file;
      return false;
    },

    // 导入文件
    upload() {
      this.loadingStatus = true;
      if (!this.file) {
        this.$Message.warning({
          content: this.$t('请选择导入文件'),
          duration: 3
        });
        this.loadingStatus = false;
        return
      }
      this.$refs.upload.post(this.file);
    },

    // 上传类型错误
    handleFormatError(file) {
      this.loadingStatus = false;
      this.$Notice.warning({
        title: this.$t(`请选择格式为xlsx、xls或xlsm的文件`)
      });
    },

    // 超过最大值
    handleMaxSize(file) {
      const unit = this.maxSize < 1024 ? `${this.maxSize}kb` : `${this.maxSize/1024}M`
      this.loadingStatus = false;
      this.$Notice.warning({
        title: this.$t(`文件不能超过`) +`${unit}！`
      });
    },

    // 上传错误
    handleError(error, file) {
      console.log(error);
      this.loadingStatus = false;
      this.$Notice.error({
        title: this.$t('文件上传失败')
      });
    },

    // 上传成功
    handleSuccess(res, file) {
      const { code = '', msg = '', data = '' } = res;   
      if (code === 'S000A000' || code === 'E000A000' || code === 'S_BD0147' || code === 'E_BD0148') {
        // this.$emit('Close',data);
        this.$emit('postUploadFile', data);
        this.show = true;
        
        if(data && data.downLoadFileKey){
          let errInfo= msg.replace('下载文件', '')
          this.errInfo = errInfo;
          this.errParams = data;
          this.showDownErr = true;
        } else {
          this.errInfo = msg;
          this.showDownErr = false;
        }
      } else {
        this.$Message.error(msg || this.$t('文件上传失败'));
       } 
      this.loadingStatus = false;
    },

    // 取消导入
    onCancel() {
      this.$emit('Close');
    }
  }
};
</script>
<style lang="less">
#upload-wrap {
  padding-left: 15px;
  .upload-con {
    display: flex;
  }
}
</style>
