<template>
  <base-list>
    <template slot="n_header">
      <el-form v-model="pagerDto" inline>
        <el-form-item label="使用状态">
          <el-select v-model="pagerDto._Eq_IsUsed" placeholder="使用状态">
            <el-option
              v-for="item in IsUsedList"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
          <el-form-item label="XYY箱号">
          <el-input
                  v-model="pagerDto._Eq_XYYBoxNo"
                  style="width: 290px"
                />
        </el-form-item>
        <el-form-item label="箱号类型">
          <el-select
            v-model="pagerDto._Eq_BigNoType"
            placeholder="箱号类型"
            clearable
          >
            <el-option
              v-for="item in SvBigNoType"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="dataLoading" @click="search"
            >搜索</el-button
          >
          <el-button type="success" @click="openImportItaly">导入</el-button>
        </el-form-item>
      </el-form>
    </template>
    <template slot="n_option">
      <div class="count-warp">
        <div>
          XL产品可用箱号数量：<span class="count">{{
            itUseCount.XLUsedCount || 0
          }}</span
          >, 口岸通用可用箱号数量：<span class="count">{{
            itUseCount.PortUsedCount || 0
          }}</span>
        </div>
      </div>
    </template>
    <template>
      <el-table
        v-loading="dataLoading"
        :data="dataSource"
        :highlight-current-row="true"
        :select-on-indeterminate="true"
        width="100%"
      >
        <el-table-column prop="SvBigNo" label="清关箱号" />
        <el-table-column prop="XYYBoxNo" label="行运易箱号" />
        <el-table-column prop="IsUsed" label="使用状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.IsUsed == true ? 'success' : 'warning'">
              {{ scope.row.IsUsed == true ? "已使用" : "未使用" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="bigNoType" label="箱号类型">
          <template slot-scope="scope">
            {{ scope.row.bigNoType | getBigNoTypeText(SvBigNoType) }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-sizes="[10, 20, 40, 100, 400]"
        :current-page="pagerDto.PageIndex"
        :page-size.sync="pagerDto.PageSize"
        background
        layout="prev, pager, next ,total ,jumper,sizes,slot "
        :total="pagerDto.total"
        @size-change="changePager"
        @current-change="pagerSerach"
      />
    </template>
    <!-- 导入意大利清关箱号 -->
    <el-dialog
      title="导入意大利清关箱号"
      :visible.sync="dialogItalyCustomerBox"
    >
      <el-form>
        <el-form-item label="箱号类型">
          <el-select
            v-model="boxType"
            placeholder="箱号类型"
            @change="changeBoxType"
          >
            <el-option
              v-for="item in SvBigNoType"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="意大利清关箱号">
          <el-upload
            :action="BaseOrderApi2"
            :headers="header"
            :multiple="false"
            :on-success="inputItalySuccess"
            :loading="updateItalyLoading"
            :on-error="inputItalyError"
            :before-upload="importItalyLoadd"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-card class="batchInputInfo" style="margin-top: 20px">
          <div class="el-card__header">
            <span class="el-icon-warning-outline">注意事项</span>
          </div>
          <p>
            1、根据指定模板文件进行导入，<a
              :href="templateUrl"
              style="color: #1890ff"
            >
              下载模板</a
            >
          </p>
        </el-card>
      </el-form>
    </el-dialog>
  </base-list>
</template>
<script>
import { getToken } from "@/utils/auth";
import {
  _queryITClearanceBoxNumber,
  _queryITUseCount,
} from "@/api/transfer/italyCustomsBox";
import BaseList from "@/components/Xyy/baselist";

export default {
  name: "ItalyCustomsBox",
  components: { "base-list": BaseList },
  data() {
    return {
      dataLoading: false,
      dataSource: [],
      pagerDto: {
        PageIndex: 0,
        PageSize: 10,
        total: 0,
        _Eq_IsUsed: false,
        _Eq_BigNoType: null,
        QuerySort: [{ Field: "Id", IsDesc: true }],
      },
      IsUsedList: [
        { value: false, label: "未使用" },
        { value: true, label: "已使用" },
      ],
      SvBigNoType: [
        { value: 1, label: "口岸通用" },
        { value: 2, label: "XL产品" },
      ],
      templateUrl:
        "http://120.24.149.148/Data/Template/意大利清关箱号导入模版.xlsx",
      dialogItalyCustomerBox: false,
      boxType: "", //弹窗箱号类型
      header: { Token: getToken() },
      BaseOrderApi:
        process.env.VUE_APP_BASE_API + "/PKG/ImportITClearanceBox?boxType=",
      BaseOrderApi2: "",
      updateItalyLoading: false,
      itUseCount: {},
    };
  },
  filters: {
    getBigNoTypeText(val, list) {
      if (!val) return "";
      const findObj = list.find((item) => item.value == val);
      return findObj?.label;
    },
  },
  created() {
    this.pagerSerach(1);
    _queryITUseCount().then((res) => {
      if (res) {
        this.itUseCount = res;
      }
    });
  },
  mounted() {
    this.openUseCount();
  },
  methods: {
    openUseCount() {
      const h = this.$createElement;
      const _this = this;
      if (typeof _this.itUseCount.XLUsedCount !== "number") return;
      if (typeof _this.itUseCount.PortUsedCount !== "number") return;
      _this.$msgbox({
        title: "剩余使用量",
        message: h("div", null, [
          h("div", { style: "margin-bottom: 6px;font-weight: bold;" }, [
            h("span", null, "XL产品可用箱号数量："),
            h("i", { style: "color: red" }, _this.itUseCount.XLUsedCount + ","),
            h("span", null, "口岸通用可用箱号数量："),
            h("i", { style: "color: red" }, _this.itUseCount.PortUsedCount),
          ]),
        ]),
        confirmButtonText: "确定",
      });
    },
    // 导入
    openImportItaly() {
      this.dialogItalyCustomerBox = true;
    },
    changeBoxType() {
      this.BaseOrderApi2 = this.BaseOrderApi + this.boxType;
    },
    inputItalySuccess(response, file, fileList, error) {
      if (response && response.Code == 200) {
        this.$message({ type: "info", message: response.Message });
      } else {
        this.$message({ type: "error", message: response.Message });
      }
      this.updateItalyLoading = false;
    },
    inputItalyError(response) {
      var msg = JSON.parse(response.message);
      this.$confirm(msg.message, "错误提示");
      this.updateItalyLoading = false;
    },
    importItalyLoadd() {
      if (!this.boxType) {
        this.$message("请选择箱号类型！");
        return false;
      }
      if (this.updateItalyLoading) {
        this.$message("上传中，请勿重复上传");
        return false;
      } else {
        this.updateItalyLoading = true;
      }
    },
    // 查询
    search() {
      this.pagerSerach();
    },
    pagerSerach(index) {
      this.dataLoading = true;
      if (index) {
        this.pagerDto.PageIndex = index;
      }
      const data = this.pagerDto;
      _queryITClearanceBoxNumber(data)
        .then((res) => {
          this.dataSource = res.Result;
          this.pagerDto.total = res.TotalCount;
        })
        .finally((res) => {
          this.dataLoading = false;
        });
    },
    changePager(v) {
      this.PageSize = v;
      this.pagerSerach();
    },
  },
};
</script>
<style scoped>
.count-warp {
  margin-bottom: -20px;
  line-height: 1.3;
  font-size: 15px;
  font-weight: bold;
  color: #606266;
}
.count-warp .count {
  color: red;
}
</style>
