<template>
  <!--选择商品类目-->
  <el-dialog
    :title="title"
    :append-to-body="true"
    :visible.sync="dialogProductClassify"
    width="30%"
    border
  >
    <span class="textWorning">提示：{{ type == 1 ? "单选" : "多选" }}</span>
    <el-table
      v-if="type != 3"
      ref="multipleTable"
      :data="classifyTableData"
      border
      tooltip-effect="dark"
      style="width: 100%"
      row-key="categoryId"
      :tree-props="{ children: 'childrenList', hasChildren: 'hasChildren' }"
      align="center"
      @selection-change="productGrouping"
      default-expand-all
      @select-all="handleSelectAll"
    >
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column prop="categoryName" label="分类名称" align="center">
      </el-table-column>
    </el-table>

    <el-table
      v-if="type == 3"
      ref="multipleTable"
      :data="classifyTableData"
      border
      row-key="id"
      tooltip-effect="dark"
      style="width: 100%"
      align="center"
      @selection-change="productGrouping"
    >
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column prop="name" label="规格名称" align="center">
      </el-table-column>
    </el-table>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogProductClassify = false">取 消</el-button>
      <el-button type="primary" @click="dialogProductList">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  name: "classifyDialog",
  props: {
    list: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      dialogProductClassify: false,
      classifyTableData: [],
      topSelect: [],
      type: "", // 1:平台商品分类 2:商家商品分类
      title: "",
    };
  },
  watch: {
    list: {
      handler(val) {
        this.classifyTableData = [...val];
      },
      immediate: true,
    },
  },
  methods: {
    open(type, select) {
      if (this.$refs.multipleTable) this.$refs.multipleTable.clearSelection();
      this.topSelect = [];
      // this.classifyTableData = [...list];
      if (type != this.type) this.type = type;
      let title = "";
      switch (type) {
        case "1":
          title = "平台商品分类";
          break;
        case "2":
          title = "商家商品分类";
          break;
        case "3":
          title = "添加规格";
          break;
        default:
          break;
      }
      this.title = title;
      if (select) {
        // console.log("select", select);
        this.$nextTick(() => {
          this.topSelect = [...select];
          if (this.type != 3) {
            let list = select.map((item) => item.categoryId);
            this.handleAll(this.classifyTableData, list);
          } else {
            select.forEach((row) => {
            this.$refs.multipleTable.toggleRowSelection(row, true);
          }); 
          }
          // this.$refs.multipleTable.toggleAllSelection()
        });
      }
      this.dialogProductClassify = true;
    },
    productGrouping(val) {
      this.topSelect = val;
    },
    dialogProductList() {
      if (this.topSelect.length) {
        if (this.type == 1 && this.topSelect.length > 1) {
          return this.$message.warning("只能选择一个分类");
        }
        this.$emit("setClassify", {
          list: this.topSelect,
          type: this.type,
        });
        this.dialogProductClassify = false;
      } else {
        this.$message.warning("最少选择一个分类");
      }
    },
    // 递归全选
    handleAll(list, value) {
      list.forEach(item => {
        if (value.includes(item.categoryId)) {
          this.$refs.multipleTable.toggleRowSelection(item, true);
        }
        if (item.childrenList) {
          this.handleAll(item.childrenList, value);
        }
      });
    },
    // 全选触发
    handleSelectAll(selection) {
      // console.log("selection", selection);
      // 获取当前表格的所有行
      const fullData = this.$refs.multipleTable.store.states.data;
      // console.log("fullData", fullData);
      // 如果当前选中的行数为0，则取消全选
      if (selection.length === 0) {
        this.$refs.multipleTable.store.states.selection = [];
        return;
      }
      // 遍历所有的行数据，找出子节点并添加到选项中
      fullData.forEach((item) => {
        const children = item.childrenList || [];
        children.forEach((child) => {
          if (selection.includes(item)) {
            this.$refs.multipleTable.toggleRowSelection(child, true);
          } else {
            this.$refs.multipleTable.toggleRowSelection(child, false);
          }
        });
      });
    },
  },
};
</script>
