<template>
  <div id="app">
    <el-button type="primary" @click="getCurrentKey">主要按钮</el-button>
    <el-button type="primary" @click="delNodeData">删除</el-button>

    <el-button type="primary" @click="Add">append</el-button>
    <el-button type="primary" @click="getCheckedNodes">获取多选</el-button>
    <VueElTreeCustom
      ref="tree"
      :containerHeight="500"
      :containerWidth="300"
      :treeList="list"
      @nodeAdd="nodeAdd"
      :customNodeAction="[true, true, true]"
      @confirmEditNode="confirmEditNode"
      @confirmDeleteNode="confirmDeleteNode"
    >
    </VueElTreeCustom>
  </div>
</template>

<script>
// import VueElTreeCustom from './components/index.vue'
export default {
  name: "app",

  data() {
    return {
      id: 50,
      list: [],
      node: null,
    };
  },
  created() {
    let t = setTimeout(() => {
      this.list = [
        {
          id: 0,
          label: "0000",
          children: [
            {
              id: 1,
              label: "一级 1",
              children: [
                {
                  id: 4,
                  label: "二级 1-1",
                  children: [
                    {
                      id: 19,
                      label: "三级 1-1-1-1-1-1-1-1-1-1-1-1",
                    },
                    {
                      id: 10,
                      label: "三级 1-1-2",
                    },
                  ],
                },
              ],
            },
            {
              id: 2,
              label: "一级 2",
              children: [
                {
                  id: 5,
                  label: "二级 2-1",
                  children: [
                    {
                      id: 21,
                      label: "21",
                      children: [
                        {
                          id: 23,
                          label: "23",
                        },
                        {
                          id: 24,
                          label: "24",
                        },
                      ],
                    },
                    {
                      id: 22,
                      label: "22",
                    },
                  ],
                },
                {
                  id: 6,
                  label: "二级 2-2",
                },
              ],
            },
            {
              id: 3,
              label: "一级 3",
              children: [
                {
                  id: 7,
                  label: "二级 3-1",
                },
                {
                  id: 8,
                  label: "二级 3-2",
                },
              ],
            },
            {
              id: 9,
              label: "一级 9",
              children: [
                {
                  id: 10,
                  label: "二级 4-1",
                },
                {
                  id: 11,
                  label: "二级 4-2",
                },
              ],
            },
            {
              id: 12,
              label: "一级 12",
              children: [
                {
                  id: 13,
                  label: "二级 5-1",
                },
                {
                  id: 14,
                  label: "二级 5-2",
                },
              ],
            },
            {
              id: 15,
              label: "一级 10",
              children: [
                {
                  id: 16,
                  label: "二级 6-1",
                },
                {
                  id: 17,
                  label: "二级 6-2",
                  children: [
                    {
                      id: 31,
                      label: "31",
                    },
                    {
                      id: 32,
                      label: "32",
                    },
                  ],
                },
              ],
            },
          ],
        },
      ];
      clearTimeout(t);
    }, 200);
  },
  methods: {
    getCheckedNodes() {
      console.log(this.$refs.tree.getCurrentKey(), "getCurrentKey");
    },
    delNodeData() {
      let t = window.setTimeout(() => {
        this.$refs.tree.remove(1);
        clearTimeout(t);
        t = null;
      }, 500);
    },
    confirmDeleteNode({ node, data, instance, done }) {
      setTimeout(() => {
        this.$refs.tree.remove(data.id);
        instance.confirmButtonLoading = false;
        done();
      }, 1500);
    },
    getCurrentKey() {
      // console.log(this.$refs.tree.getCheckedKeys(true))
      console.log(this.$refs.tree.getTreeMapData(6), 6666);
    },
    nodeAdd({ node, data }) {
      this.node = node;
      console.log(node,99999)
    },
    Add() {
      this.id++;
      let t = setTimeout(() => {
        this.$refs.tree.append(
          {
            id: this.id,
            label: "append + " + this.id,
          },
          this.node
        );
        clearTimeout(t);
        t = null;
      }, 100);
    },
    confirmEditNode({ node, data, instance, done, editLabel }) {
      setTimeout(() => {
        data.label = editLabel;
        instance.confirmButtonLoading = false;
        done();
        data.edit = false;
      }, 1000);
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
