<template>
  <!-- 发货信息，用于导出代发货订单的excel交给快递公司 -->
  <el-dialog
    :modal="false"
    :title="this.$i18n.t('product.uploadTips')"
    :close-on-click-modal="false"
    :visible.sync="visible"
    @close="handleClose"
    width="38%">
    <el-form :model="detectMatch" label-position="right">
      <el-form-item label="导入订单数量">
        <span autocomplete="off">{{detectMatch.detectNum}}</span>
      </el-form-item>
      <el-form-item label="匹配订单数量">
        <span autocomplete="off">{{detectMatch.matchNum}}</span>
      </el-form-item>
    </el-form>
    <el-upload
      class="upload-demo"
      ref="upload"
      :action="$http.adornUrl('/wave/wave/detectMatchExpressBill/'+ waveId)"
      :headers="{ Authorization: $cookie.get('Authorization_vs'),locale:lang }"
      :limit="1"
      name="file"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-error="uploadFalse"
      :on-success="uploadSuccess"
      :file-list="files"
      :auto-upload="true"
      :before-upload="beforeAvatarUpload">
      <div slot="tip" class="el-upload__tip"></div>
      <el-button slot="trigger" size="small" icon="el-icon-upload2" style="margin-right: 20px">上传</el-button>
      <el-button size="small" type="primary" @click="submitUpload" :loading="uploading">提 交</el-button>
    </el-upload>
  </el-dialog>
</template>
<script>
export default {
  data () {
    return {
      lang: localStorage.getItem('lang') || 'zh_CN',
      visible: false,
      uploading: false,
      waveId: null,
      files: [],
      detectMatch:{},
    }
  },
  methods: {
    uploadSuccess (detectMatch, file, fileList) {
      this.detectMatch = detectMatch;
      this.files = fileList;
    },
    uploadFalse (response) {
      alert(this.$i18n.t('product.fileUploadFail'))
    },
    init (waveId) {
      this.visible = true
      this.waveId = waveId
    },
    // 上传前对文件的大小的判断
    beforeAvatarUpload (file) {
      this.upload = true
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      if (!extension && !extension2) {
        alert(this.$i18n.t('product.downloadTemplateTips1'))
        return extension || extension2
      }
      return extension || extension2
    },
    submitUpload () {
      if(this.detectMatch.detectNum == null || (this.detectMatch.detectNum != this.detectMatch.matchNum)){
        this.$message({
          message: "导入订单数量与匹配订单数量不一致，提交失败",
          type: 'error'
        })
        return;
      }
      this.uploading = true;
      let file = this.files[0].raw;
      let formData = new FormData();
      formData.append('file', file);
      this.$http({
        url: this.$http.adornUrl(`/wave/wave/importExpressBill/` + this.waveId),
        method: 'POST',
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(({data}) => {
        if(data){
          this.uploading = false;
          this.visible = false;
          this.$message({
            message: "提交成功",
            type: 'success'
          })
          this.$emit("refreshDataList");
        }else{
          this.$message({
            message: "提交失败",
            type: 'error'
          })
        }
      }).catch((error) => {
        this.uploading = false;
      })
    },
    handleRemove (file) {

    },
    handlePreview (file) {
      // debugger
      // if (file.response.status) {
      //   alert(this.$i18n.t('product.fileSuccess'))
      //   this.$emit('refreshDataList')
      // } else {
      //   alert(this.$i18n.t('product.fileFail'))
      // }
    },
    handleClose(){
      this.detectMatch = {};
      this.files = [];
    }
  }
}
</script>
<style scoped>
.download-btn {
  margin-left: 12px;
}
div >>> .el-dialog__body {
  padding-top: 10px;
}
.upload-demo {
  display: inline-block;
}
</style>
