<template>
  <div 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
      :attrs="tableAttr"
      :loadingTable="tableAttr.loadingTable"
      :columns="columns"
      :tableData="tableData"
      :pageConfig="pageConfig"
      @search="searchBtn"
      @download="downloadTemplate"
      @upLoad="upLoadTemplate"
      @export="exportTemplate"
      @delete="deleteData"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
    >
    </yl-table>
  </div>
</template>

<script>
import YlForm from "@/components/YlForm";
import YlTable from "@/components/YlTable";
import { formConfig } from "./formConfig";
import { tableAttr, columnHeader } from "./tableConfig";
export default {
  name: "Et86HsCodeBlack",
  components: {
    YlForm,
    YlTable,
  },
  data() {
    return {
      formConfig: formConfig, // 表单配置项
      queryForm: {}, // 表单参数
      pageConfig: {
        // 分页配置项
        isPagination: true,
        total: 0,
        pageData: {
          page: 1,
          size: 10,
        },
      },
      tableAttr: tableAttr, // table配置项
      columns: columnHeader(this.deleteRow), // 表头
      tableData: [], // 表格数据
      multipleSelection: [],
    };
  },
  created() {},
  methods: {
    // 失焦事件
    blurEvent() {

    },
    // 搜索
    searchBtn() {
      this.$refs.ruleForm.handleSearch("ruleForm", (val) => {});
    },
    // 下载
    downloadTemplate() {},
    // 上传
    upLoadTemplate() {},
    // 导出
    exportTemplate() {},
    // 删除
    deleteData() {},
    //条数变化
    handleSizeChange(e) {
      this.pageConfig.pageData.size = e;
      this.pageConfig.pageData.page = 1;
      this.searchBtn();
    },
    //页码变化
    handleCurrentChange(e) {
      this.pageConfig.pageData.page = e;
      this.searchBtn();
    },
    // table勾选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 删除
    deleteRow() {
      this.$confirm("是否确认删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.msgSuccess("删除成功!");
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped></style>