<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="toUpload"
      @rmfile="onRemoveUpload"
      @delete="deleteData"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
    >
    </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";
export default {
  name: "Et86HsCodeBlack",
  components: {
    YlForm,
    YlTable,
    ModleView,
  },
  data() {
    return {
      formConfig: formConfig, // 表单配置项
      queryForm: {}, // 表单参数
      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() {},
  methods: {
    // 失焦事件
    blurEvent() {},
    // 选择上传
    toUpload(options) {
      console.log(options);
    },
    //移除上传
    onRemoveUpload(options) {
      console.log(options);
    },
    // 搜索
    searchBtn() {
      this.$refs.ruleForm.handleSearch("ruleForm", (val) => {});
    },
    // 确认对话框
    dialogConfirm() {},
    // 下载
    downloadTemplate() {
      // this.$refs.modleViewRef.dialogOpenEvent();
    },
    // 上传
    upLoadTemplate() {
      // console.log(this.$refs.modleViewRef);
    },
    // 导出
    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>