<template>
  <div class="lineBtn">
    <el-button type="primary" @click="showDialogFn">选择线路</el-button>
    <el-dialog title="选择线路" :visible.sync="dialogVisible" width="470px">
      <div class="lineList">
        <el-tree
          :data="lineTreeData"
          show-checkbox
          ref="tree"
          node-key="id"
          highlight-current
          :props="defaultProps"
          @check="getCheckedNodes"
          :default-checked-keys="defaultCheckedKeys"
        >
        </el-tree>
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            v-for="item in lineListData"
            :label="item.id"
            :key="item.id"
            >{{ item.name }}</el-checkbox
          >
        </el-checkbox-group>
        <!-- {{ lineListData }} -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveCheck">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getPermissionTree } from "@/utils/api/index";
export default {
  data() {
    return {
      dialogVisible: false,
      checkList: [],
      lineListData: [],
      total: 0,
      lineTreeData: [],
      defaultProps: {
        //指定参数格式回显数据
        children: "list",
        label: "name",
      },
      allCheckNode: [],
      defaultCheckedKeys: [], // 用来存储默认选中的节点 ID
    };
  },
  mounted() {
    // this.lineList();
    this.getlineTree();
  },
  methods: {
    showDialogFn() {
      this.dialogVisible = true;
      const storedArray = localStorage.getItem("checkListLocal");
      console.log(storedArray);
      if (storedArray) {
        // 将JSON字符串转换回数组
        this.checkList = JSON.parse(storedArray);
        this.checkList = [...new Set(this.checkList)];
        console.log(this.checkList);
      }
      this.defaultCheckedKeys = this.checkList; // 设置默认选中的节点 ID
    },
    //获取线路tree
    getlineTree() {
      getPermissionTree()
        .then((res) => {
          console.log(res);
          this.lineTreeData = this.preprocessTreeData(res.data);
        })
        .catch((err) => {});
    },
    //预处理，只保留前两集数据
    preprocessTreeData(data) {
      return data.map((node) => {
        // 复制当前节点
        let newNode = { ...node };
        // 如果存在子节点，则只保留前两级
        if (newNode.list && newNode.list.length > 0) {
          newNode.list = newNode.list.map((child) => {
            // 复制子节点
            let newChild = { ...child };
            // 移除子节点的子节点（即第三级及以后）
            newChild.list = [];
            return newChild;
          });
        }
        return newNode;
      });
    },
    getCheckedNodes(nodeObj) {
      console.log(nodeObj);
      this.checkList = [];
      this.allCheckNode = this.$refs.tree.getCheckedNodes();
      console.log(this.allCheckNode);
      this.allCheckNode.forEach((obj) => {
        console.log(obj);
        obj.list.forEach((item) => {
          console.log(item);
          this.checkList.push(item.id);
        });
        console.log(this.checkList);
      });
    },

    saveCheck() {
      console.log(this.checkList);
      localStorage.setItem("checkListLocal", JSON.stringify(this.checkList));
      this.dialogVisible = false;
      this.$parent.getTablefun();
    },
  },
};
</script>
<style lang="less">
.lineBtn {
  .el-dialog__body {
    padding: 10px;
  }
  .lineList {
    height: 500px;
    overflow: auto;
    .el-dialog__body {
      overflow: auto;
    }

    .el-checkbox-group {
      .el-checkbox {
        width: 220px;
        height: 32px;
        line-height: 32px;
      }
    }
  }
}
</style>
