<template>
  <div ref="formHeaderRef" class="form-header container">
    <el-row>
      <el-col>
        <yl-form
          ref="ruleForm"
          :formConfig="formConfig"
          :queryForm="queryForm"
          :inline="false"
          formWidth="auto"
          @blur="blurEvent"
        />
      </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"
      @rmfile="onRemoveUpload"
      @export="exportTemplate"
      @delete="deleteData"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
      @selectionEvent="tableSelectionChange"
    >
    </yl-table>
    <!-- <modle-view
      ref="modleViewRef"
      width="30%"
      title="导入Excel"
      confirmBtnName="导入Excel"
      @confirm="dialogConfirm"
    >
      <el-form
        :model="paramsForm"
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
      >
        <el-row>
          <el-col :span="20">
            <el-form-item
              label="商品名称"
              prop="skuName"
              size="small"
              label-position="left"
            >
              <el-input
                v-model="paramsForm.skuName"
                placeholder="请输入商品名称"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item prop="file">
              <el-upload
                ref="upload"
                action="/goods/uploadGoodsExcel"
                name="file"
                :http-request="toUpload"
                :on-remove="onRemoveUpload"
                :limit="1"
                accept=".xlsx"
                class="upload"
              >
                <el-button type="primary" icon="el-icon-upload2" size="small"
                  >选择文件</el-button
                >
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </modle-view> -->
  </div>
</template>
<script>
import YlForm from "@/components/YlForm";
import YlTable from "@/components/YlTable";
import ModleView from "./components/ModleView";
import { formConfig } from "./formConfig";
import { tableAttr, columnHeader } from "./tableConfig";
import { restTableHeight } from "@/utils";
import {
  findHsCodeList, // HScode黑名单查询
  delBlackList, // HScode黑名单删除
  downLoadTemplate, // HScode黑名单下载模板
  uploadHsCode, // HScode黑名单导入
} from "@/api/et86HsCodeBlack";
import { downLoadXlsx } from "@/utils/zipdownload";
export default {
  name: "Et86HsCodeBlack",
  components: {
    YlForm,
    YlTable,
    ModleView,
  },
  data() {
    return {
      formConfig: formConfig, // 表单配置项
      queryForm: {
        searchValue: "",
      }, // 表单参数
      paramsForm: {
        skuName: "",
        file: null,
      },
      rules: {
        skuName: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
      },
      pageConfig: {
        // 分页配置项
        isPagination: true,
        total: 0,
        pageData: {
          page: 1,
          size: 10,
        },
      },
      tableAttr: tableAttr, // table配置项
      columns: columnHeader(this.deleteRow), // 表头
      tableData: [], // 表格数据
      multipleSelection: [],
    };
  },
  created() {
    // 黑名单查询
    this.$nextTick(() => {
      this.searchBtn();
    });
  },
  mounted() {
    this.$nextTick(() => {
      this.tableAttr.maxHeight = window.innerHeight - restTableHeight(this.$refs);
    });
  },
  methods: {
    // HScode黑名单查询
    queryFindHsCodeList(params) {
      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(() => {});
    },
    // 删除黑名单
    toDelBlackList(params) {
      delBlackList(params)
        .then((res) => {
          const { code, msg } = res;
          if (code == 200) {
            this.searchBtn();
            this.msgSuccess(msg || "删除成功!");
          } else {
            this.$message.error(msg || "删除失败");
          }
        })
        .catch(() => {});
    },
    // 失焦事件
    blurEvent() {},
    // 选择上传【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(() => {});
    },
    //移除上传
    onRemoveUpload(options) {
      console.log(options);
    },
    // 搜索
    searchBtn() {
      const { page, size } = this.pageConfig.pageData;
      this.$refs.ruleForm.handleSearch("ruleForm", (val) => {
        let params = {
          limitStart: (page - 1) * size,
          limitSize: size,
          ...this.queryForm,
        };
        this.queryFindHsCodeList(params);
      });
    },
    // 确认对话框
    dialogConfirm() {},
    // 下载【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(() => {});
    },
    // 上传
    upLoadTemplate() {
      // console.log(this.$refs.modleViewRef);
    },
    // 导出
    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) {
        let params = [];
        this.multipleSelection.map((item) => {
          params.push(item.id);
        });
        this.$confirm("是否确认删除？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        })
          .then(() => {
            this.toDelBlackList(params);
          })
          .catch(() => {});
      } else {
        this.$message.error("请勾选一条或者多条数据再操作！");
      }
    },
    //条数变化
    handleSizeChange(e) {
      this.pageConfig.pageData.size = e;
      this.pageConfig.pageData.page = 1;
      this.searchBtn();
    },
    //页码变化
    handleCurrentChange(e) {
      this.pageConfig.pageData.page = e;
      this.searchBtn();
    },
    // table勾选
    tableSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 删除
    deleteRow({ row }) {
      this.$confirm("是否确认删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.toDelBlackList([row.id]);
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped></style>