<template>
  <el-button>插入数据</el-button>
  <el-tree
    :allow-drop="allowDrop"
    :allow-drag="allowDrag"
    :data="data"
    draggable
    default-expand-all
    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"
  />
</template>

<script lang="ts" setup>
import type Node from 'element-plus/es/components/tree/src/model/node';
import type { DragEvents } from 'element-plus/es/components/tree/src/model/useDragNode';
import type {
  AllowDropType,
  NodeDropType
} from 'element-plus/es/components/tree/src/tree.type';

const handleDragStart = (node: Node, ev: DragEvents) => {
  console.log('drag start', node);
};
const handleDragEnter = (
  draggingNode: Node,
  dropNode: Node,
  ev: DragEvents
) => {
  console.log('tree drag enter:', dropNode.label);
};
const handleDragLeave = (
  draggingNode: Node,
  dropNode: Node,
  ev: DragEvents
) => {
  console.log('tree drag leave:', dropNode.label);
};
const handleDragOver = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
  console.log('tree drag over:', dropNode.label);
};
const handleDragEnd = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvents
) => {
  console.log('tree drag end:', dropNode && dropNode.label, dropType);
};
const handleDrop = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvents
) => {
  console.log('tree drop:', dropNode.label, dropType);
};
const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
  if (dropNode.data.label === 'Level two 3-1') {
    return type !== 'inner';
  }
  return true;
};
const allowDrag = (draggingNode: Node) => {
  return !draggingNode.data.label.includes('Level three 3-1-1');
};

const data = [
  {
    label: '姓名',
    key: 'name',
    type: 'string'
  },
  {
    label: '年龄',
    key: 'age',
    type: 'number'
  },
  {
    label: '性别',
    key: 'sex',
    type: 'string'
  },
  {
    label: '父母',
    key: 'parent',
    type: 'object',
    children: [
      {
        label: '母亲',
        key: 'moter',
        type: 'object',
        children: [
          {
            label: '姓名',
            key: 'name',
            type: 'string'
          },
          {
            label: '年龄',
            key: 'age',
            type: 'number'
          },
          {
            label: '性别',
            key: 'sex',
            type: 'string'
          }
        ]
      },
      {
        label: '父亲',
        key: 'father',
        type: 'object',
        children: [
          {
            label: '姓名',
            key: 'name',
            type: 'string'
          },
          {
            label: '年龄',
            key: 'age',
            type: 'number'
          },
          {
            label: '性别',
            key: 'sex',
            type: 'string'
          }
        ]
      }
    ]
  },
  {
    label: '子女',
    key: 'child',
    type: 'array',
    children: [
      {
        label: '姓名',
        key: 'name',
        type: 'string'
      },
      {
        label: '年龄',
        key: 'age',
        type: 'number'
      },
      {
        label: '性别',
        key: 'sex',
        type: 'string'
      }
    ]
  }
];
</script>