<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form label-position="left">
        <div class="itemGroup">
          <el-divider content-position="left">DHL地址信息导入</el-divider>
          <el-form-item label="导入EXCEL文件">
            <el-upload
              class="el-col-4"
              :action="DHLApi"
              :headers="header"
              :multiple="false"
              :on-success="inputDHLSuccess"
              :loading="DHLLoading"
              :on-error="inputDHLError"
              :before-upload="inputTHLoadd"
            >
              <el-button size="small" type="primary" :loading="DHLLoading">点击上传</el-button>
            </el-upload>
            <a style="color: blue" :href="DHLTemplteUrl" target="_blank">下载模板</a>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
  name: "ChannelAddressVerif",
  data() {
    return {
      header: { token: getToken() },
      DHLApi: process.env.VUE_APP_BASE_API + "/AddressVerif/LoadDHLAddressFile",
      DHLTemplteUrl:  "http://120.24.149.148/Data/Template/DHL地址验证（模板）.xlsx",
      DHLLoading: false,
    };
  },
  methods: {
    inputDHLSuccess(response, file, fileList) {
      this.$message("上传成功");
      this.DHLLoading = false;
      var link = document.createElement("a");
      link.href = response.Data.url;
      link.click();
      // 释放内存
      window.URL.revokeObjectURL(link.href);
    },
    inputDHLError() {
      this.$message("上传失败");
      this.DHLLoading = false;
    },
    inputTHLoadd() {
      if (this.DHLLoading) {
        this.$message("上传中，请勿重复上传");
        return false;
      } else {
        this.DHLLoading = true;
      }
    },
  },
};
</script>
<style >
.itemGroup {
  margin: 10px;
  border: 1px solid #ebebeb;
  padding: 30px;
}
</style>