<template>
  <div ref="formHeaderRef" class="form-header container">
    <el-row>
      <el-col>
        <yl-form
          ref="ruleForm"
          :formConfig="formConfig"
          :queryForm="queryForm"
          :inline="false"
          formWidth="auto"
        />
      </el-col>
    </el-row>
    <yl-table
      ref="ylTable"
      :attrs="tableAttr"
      :loadingTable="tableAttr.loadingTable"
      :columns="columns"
      :tableData="tableData"
      :pageConfig="pageConfig"
      @search="searchBtn"
      @download="downloadTemplate"
      @upload="toUpload"
      @export="exportTemplate"
      @delete="deleteData"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
      @selectionEvent="tableSelectionChange"
    >
    </yl-table>
  </div>
</template>
<script>
import YlForm from "@/components/YlForm";
import YlTable from "@/components/YlTable";
import { formConfig } from "./formConfig";
import { tableAttr, columnHeader } from "./tableConfig";
import { restTableHeight } from "@/utils";
import {
  findHsCodeList, // ShipmentDesc查询
  delHsCodeListList, // ShipmentDesc删除
  downLoadTemplate, // ShipmentDesc下载模板
  uploadHsCode, // ShipmentDesc导入
} from "@/api/et86HsCodeBlack";
import { downLoadXlsx } from "@/utils/zipdownload";
export default {
  name: "Et86HsCodeBlack",
  components: {
    YlForm,
    YlTable,
  },
  data() {
    return {
      formConfig: formConfig, // 表单配置项
      queryForm: {
        searchValue: "",
      }, // 表单参数
      pageConfig: {
        // 分页配置项
        isPagination: true,
        total: 0,
        pageData: {
          page: 1,
          size: 10,
        },
      },
      tableAttr: tableAttr, // table配置项
      columns: columnHeader(this.indexAdd, this.deleteRow), // 表头
      tableData: [], // 表格数据
      multipleSelection: [],
    };
  },
  created() {
    // 黑名单查询
    this.$nextTick(() => {
      this.searchBtn();
    });
  },
  mounted() {
    // window视口的高减去除了Table表格的高；将这个差的结果值作为设置Table的高;
    this.$nextTick(() => {
      this.tableAttr.maxHeight =
        window.innerHeight - restTableHeight(this.$refs);
    });
  },
  methods: {
    // HScode黑名单查询
    queryFindHsCodeList() {
      const { page, size } = this.pageConfig.pageData;
      let params = {
        limitStart: (page - 1) * size,
        limitSize: size,
        ...this.queryForm,
      };
      this.tableAttr.loadingTable = true;
      findHsCodeList(params)
        .then((res) => {
          this.tableAttr.loadingTable = false;
          const { code, data } = res;
          if (code == 200) {
            this.tableData = data.list;
            this.pageConfig.total = data.total;
          }
        })
        .catch(() => {});
    },
    // 删除黑名单
    toDelHsCodeListList(params) {
      delHsCodeListList(params)
        .then((res) => {
          const { code, msg } = res;
          if (code == 200) {
            this.searchBtn();
            this.msgSuccess(msg || "删除成功!");
          } else {
            this.$message.error(msg || "删除失败");
          }
        })
        .catch(() => {});
    },
    // 选择上传【HScode黑名单导入】
    toUpload({ file }) {
      const formData = new FormData();
      formData.append("file", file);
      uploadHsCode(formData)
        .then((res) => {
          const { code, data, msg } = res;
          if (code == 200) {
            this.searchBtn();
            this.msgSuccess(msg || "导入成功!");
          } else {
            this.$message.error(msg || "导入失败");
            this.$router.push({
              path: "/errorInfo",
              query: {
                name: "errorInfo",
                error: code,
                data: JSON.stringify(data),
              },
            });
          }
        })
        .catch(() => {});
    },
    // 下载【HScode黑名单下载模板】
    downloadTemplate() {
      downLoadTemplate("hsCode")
        .then((res) => {
          if (res) {
            const blob = new Blob([res]);
            const link = document.createElement("a"); //创建a标签
            link.download = "HSCODE黑名单模板.xlsx"; //a标签添加属性
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click(); //执行下载
            URL.revokeObjectURL(link.href); //释放url
            document.body.removeChild(link); //释放标签
          } else {
            this.$message.error("下载失败");
          }
        })
        .catch(() => {});
    },
    // 导出
    exportTemplate(row, i) {
      this.tableAttr.btnCofig.btnGroup[i].loading = true;
      downLoadXlsx("/etes/exportHsCodeList", this.queryForm, "HSCODE黑名单表")
        .then(() => {
          this.tableAttr.btnCofig.btnGroup[i].loading = false;
        })
        .catch(() => {
          this.$message.error("导出失败");
        });
    },
    // 删除
    deleteData(row) {
      if (this.multipleSelection.length) {
        this.$confirm("是否确认删除？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        })
          .then(() => {
            this.toDelHsCodeListList(this.multipleSelection);
          })
          .catch(() => {});
      } else {
        this.$message.error("请勾选一条或者多条数据再操作！");
      }
    },
    // 搜索
    searchBtn() {
      this.pageConfig.pageData.page = 1;
      this.pageConfig.pageData.size = 10;
      this.$refs.ruleForm.handleSearch("ruleForm", (val) => {
        this.queryFindHsCodeList();
      });
    },
    // 翻页序号递增
    indexAdd(index){
      const page = this.pageConfig.pageData.page // 当前页码
      const pagesize = this.pageConfig.pageData.size // 每页条数
      return index + 1 + (page - 1) * pagesize
    },
    //条数变化
    handleSizeChange(e) {
      this.pageConfig.pageData.size = e;
      this.pageConfig.pageData.page = 1;
      this.queryFindHsCodeList();
    },
    //页码变化
    handleCurrentChange(e) {
      this.pageConfig.pageData.page = e;
      this.queryFindHsCodeList();
    },
    // table勾选
    tableSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 删除
    deleteRow({ row }) {
      this.$confirm("是否确认删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.toDelHsCodeListList([row]);
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped></style>