<template>
  <div class="app-container">
    <div class="app-container__item">
      <xd-organize-tree
        @onLoadNode="handleLoadNode"
        @onCommand="handleCommand"
      ></xd-organize-tree>
    </div>
  </div>
</template>

<script>

import XdOrganizeTree from "@/components/XdOrganizeTree";
export default {
  name: "tree",
  components: {
    XdOrganizeTree,
  },
  data(){
    return {
      id: 2000,
      maxLevel : 3
    }
  },
  methods:{
    handleLoadNode({node, resolve}){
      let len = 1;
      if(node.level > 0) len = this.$xdHelper.random(3, 10);
      console.log(node);
      let data = [];
      for(let i =0; i < len; i++){
        data.push({
          id: this.id,
          label: `树 ${node.level} -- ${i}`,
          leaf: node.level === this.maxLevel
        });
        this.id++;
      }
      setTimeout(()=>{
        resolve(data)
      }, 300)
    },
    handleCommand({node, index, data , item , $refs}){
      console.log('handleCommand',node, index, data , item,$refs);
      if(index === 0) {
        this.append(node,$refs)
      }
      if(index === 2){
        this.remove(node,$refs)
      }
    },

    /**
     * @description 新增子节点
     * @param $refs
     * @param parentNode
     */
    append(parentNode , $refs) {
      //测试添加
      let i = 0;
      if(parentNode.childNodes && parentNode.childNodes.length > 0) i = parentNode.childNodes.length;
      let data = {
        id: this.id++,
        label: `树 ${parentNode.level} -- ${i}`,
        leaf : parentNode.level === this.maxLevel
      };

      //树增加一个子节点显示
      $refs.append(data,parentNode)

      // todo 正式添加

    },

    /**
     * @description 删除当前节点
     * @param node
     * @param $refs
     *
     */
    remove(node, $refs) {
      // todo 正式删除当前节点之后成功后

      //树增加一个节点显示
      $refs.remove(node)
    },
  }
}
</script>

<style scoped>
  .app-container__item {
    width: 300px;
  }
</style>

