<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form label-position="left">
        <div class="itemGroup">
          <el-divider content-position="left">订单导入</el-divider>
          <el-form-item label="批量导入澳鹏泰国件文件">
            <el-upload
              :action="BaseOrderApi"
              :headers="header"
              :multiple="false"
              :on-success="inputTHOrderSuccess"
              :loading="updateTHOrderLoading"
              :on-error="inputThOrderError"
              :before-upload="inputTHLoadd"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </div>

        <div class="itemGroup">
          <el-divider content-position="left">提单导入</el-divider>
          <el-form-item label="提单头程信息导入">
            <el-upload
              :action="BaseFirstAPI"
              :headers="header"
              :multiple="false"
              :on-success="inputLaddingTrackingSuccess"
              :loading="updateFirstLadding"
              :on-error="inputThOrderError"
              :before-upload="inputLaddingTracking"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </div>

        <div class="itemGroup">
          <el-divider content-position="left"
            >e速宝第一条轨迹时间更新</el-divider
          >
          <el-form-item label="第一条轨迹时间">
            <el-date-picker
              v-model="updateTime"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
          <el-form-item label="运单号">
            <el-input
              v-model="batchNumbers"
              type="textarea"
              :rows="30"
              placeholder="请输入运单号,每行一个"
            />
          </el-form-item>
          <br /><br />
          <div class="text-center">
            <el-button type="success" size="large" @click="updateESBTime"
              >提交更新</el-button
            >
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { format } from "@/utils/multiInput";
import { _updateESBOnline } from "@/api/order";
export default {
  name: 'ExcelInput',
  data() {
    return {
      header: { Authorization: "token " + getToken() },
      BaseOrderApi: process.env.VUE_APP_9518_API + "/order/UpdateLoadOrder",
      BaseFirstAPI: process.env.VUE_APP_9520_API + "/BatchTracking/UpdateFile",
      updateTHOrderLoading: false,
      updateFirstLadding: false,
      updateTime: "",
      batchNumbers: "",
    };
  },
  methods: {
    inputTHOrderSuccess(response, file, fileList) {
      this.$message("上传成功");
      this.updateTHOrderLoading = false;
    },
    inputThOrderError() {
      this.$message("上传失败");
      this.updateTHOrderLoading = false;
    },
    inputTHLoadd() {
      if (this.updateTHOrderLoading) {
        this.$message("上传中，请勿重复上传");
        return false;
      } else {
        this.updateTHOrderLoading = true;
      }
    },
    inputLaddingTrackingSuccess(response, file, fileList) {
      this.updateFirstLadding = false;
      console.log(response);
      if (response.data.ErrorFileUrl) {
        this.$message("部分数据异常，请查看异常文件。");
        window.open(response.data.ErrorFileUrl);
      } else {
        this.$message("上传成功,后台正在更新数据。");
      }
    },
    inputLaddingTrackingError() {
      this.$message("上传失败");
      this.updateFirstLadding = false;
    },
    inputLaddingTracking() {
      if (this.updateFirstLadding) {
        this.$message("上传中，请勿重复上传");
        return false;
      } else {
        this.updateFirstLadding = true;
      }
    },
    updateESBTime() {
      if (!this.updateTime) {
        this.$message("请上传最后一条跟踪时间");
      } else {
        if (this.batchNumbers) {
          var batchNumberList = format(this.batchNumbers);
          _updateESBOnline({
            TransferNumber: batchNumberList,
            UpdateTime: this.updateTime,
          })
            .then((r) => {
              this.$message("上传成功");
            })
            .catch((r) => {
              this.$message("上传失败" + r);
            });
        } else {
          this.$message("请输入运单号");
        }
      }
    },
  },
};
</script>

<style >
.itemGroup {
  margin: 10px;
  border: 1px solid #ebebeb;
  padding: 30px;
}
</style>
