<template>
  <div style="padding: 60px">
    <el-tree
      :data="final"
      node-key="id"
      @node-drag-start="handleDragStart"
      @node-drag-enter="handleDragEnter"
      @node-drag-leave="handleDragLeave"
      @node-drag-over="handleDragOver"
      @node-drag-end="handleDragEnd"
      @node-drop="handleDrop"
      draggable
      :allow-drop="allowDrop"
      :allow-drag="allowDrag"
      :props="defaultProps"
    >
    </el-tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          id: "46734",
          pId: "0",
          sort: 0,
          checked: false,
          name: "系统链接",
          isParent: null,
          value: "link_html",
          iconClass: "icon-hand-right",
          ismenu: "1",
          classification: 1,
        },
        {
          id: "52190",
          pId: "0",
          sort: 1,
          checked: false,
          name: "ca",
          isParent: null,
          value: "a",
          iconClass: "icon-book",
          ismenu: "1",
          classification: 0,
        },
        {
          id: "46589",
          pId: "0",
          sort: 2,
          checked: true,
          name: "数据迁移",
          isParent: null,
          value: "dataInOut_html",
          iconClass: "icon-user",
          ismenu: "1",
          classification: 1,
        },
        {
          id: "45630",
          pId: "0",
          sort: 3,
          checked: true,
          name: "监控用户",
          isParent: null,
          value: "monitorUser_html",
          iconClass: "icon-hand-right",
          ismenu: "1",
          classification: 1,
        },
        {
          id: "46947",
          pId: "0",
          sort: 4,
          checked: true,
          name: "前台权限",
          isParent: null,
          value: "",
          iconClass: "icon-hand-right",
          ismenu: "0",
          classification: 0,
        },
        {
          id: "46951",
          pId: "46947",
          sort: 5,
          checked: true,
          name: "设置手机",
          isParent: null,
          value: "monitorUser_set_phone",
          iconClass: "icon-hand-right",
          ismenu: "2",
          classification: 0,
        },
        {
          id: "46953",
          pId: "46947",
          sort: 6,
          checked: true,
          name: "设置地址",
          isParent: null,
          value: "monitorUser_set_address",
          iconClass: "icon-hand-right",
          ismenu: "2",
          classification: 0,
        },

      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      final: [],
    };
  },
  mounted() {
    let arr = this.listToTree(this.list);
    this.final = arr;
    console.log(this.final);
  },

  methods: {
//  转换为树型结构
    listToTree(data) {
      let arr = JSON.parse(JSON.stringify(data));
      const listChildren = (obj, filter) => {
        [arr, obj.children] = arr.reduce(
          (res, val) => {
            if (filter(val)) res[1].push(val);
            else res[0].push(val);
            return res;
          },
          [[], []]
        );
        obj.children.forEach((val) => {
          val.label = val.name;
          if (arr.length) listChildren(val, (obj) => obj.pId === val.id);
        });
      };

      const tree = {};
      listChildren(
        tree,
        (val) => arr.findIndex((i) => i.id === val.pId) === -1
      );
      return tree.children;
    },
    handleDragStart(node, ev) {
      //   console.log("drag start", node);
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      //   console.log("tree drag enter: ", dropNode.label);
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      //   console.log("tree drag leave: ", dropNode.label);
    },
    handleDragOver(draggingNode, dropNode, ev) {
      //   console.log("tree drag over: ", dropNode.label);
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      console.log("tree drag end: ", dropNode && dropNode.label, dropType);
      if (dropType === "inner") {
        console.log("inner:" + dropNode.key);
      }else{
          console.log("else:"+dropNode.data.pId);
      }
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      //   console.log("tree drop: ", dropNode.label, dropType);
    },
    allowDrop(draggingNode, dropNode, type) {
      //   console.log(dropNode, type);
      console.log(
        draggingNode.label + "被扔进了" + dropNode.label + dropNode.id,
        type
      );

      //任意级别拖拽
      if (draggingNode.data.id === dropNode.data.id) {
        return type === "before" || type === "after";
      } else {
        return type === "before" || type === "after" || type === "inner";
      }
    },
    allowDrag(draggingNode) {
      return draggingNode.data.label.indexOf("三级 3-2-2") === -1;
    },
  },
};
</script>