<template>
  <div class="ap-dev-custom-data-tree">
    <el-input v-model="filterText" placeholder="输入关键字进行过滤(type)" />
    <el-tree
      ref="treeRef"
      :data="[storeJson]"
      node-key="ref"
      :props="{label:'ref'}"
      default-expand-all
      highlight-current
      draggable
      :allow-drop="allowDrop"
      :allow-drag="allowDrag"
      :filter-node-method="filterNode"
      @node-drag-start="handleDragStart"
      @node-drag-enter="handleDragEnter"
      @node-drag-leave="handleDragLeave"
      @node-drag-over="handleDragOver"
      @node-drag-end="handleDragEnd"
      @node-drop="handleDrop"
      @node-click="handleClick"
      @node-contextmenu="handleContextMenu"
    >

      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span :class="{'ap-dev-custom-data-tree-current': node.label == currentKey}">
          {{ node.label }}
        </span>
      </span>
    </el-tree>
  </div>

</template>

<script>
import { deepClone } from 'ap-util/util/ObjectUtil'

export default {
  name: 'CustomDataTree',
  data() {
    const treeData = deepClone(this.$store.getters.getJson)
    return {
      filterText: '',
      treeData: treeData
    }
  },
  computed: {
    storeJson() {
      return deepClone(this.$store.getters.getJson)
    },
    currentKey() {
      return this.$store.state.currentComps.ref
    }
  },
  watch: {
    filterText(val) {
      this.$refs.treeRef.filter(val)
    }
  },
  methods: {
    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);
    },
    // 拖拽成功完成时更新store数据
    handleDrop(draggingNode, dropNode, dropType, ev) {
      this.$store.commit('treeUpdate', {
        draggingNodeRef: draggingNode.data.ref,
        dropNodeRef: dropNode.data.ref,
        dropType: dropType
      })
    },
    // 点击事件
    handleClick(item, node, comp) {
      // 当前选择组件
      this.$store.commit('updateCurrentItem', {
        ref: item.ref,
        type: item.type
      })
    },
    handleContextMenu(event, obj, node, comp) {
      console.log('组件对象：' + obj.ref)
      console.log(obj)
    },
    // 放置判断
    allowDrop(draggingNode, dropNode, type) {
      // 只能放置到容器中
      if (dropNode.data.type != 'container-row' && type == 'inner') {
        return false
      }

      // 不允许放在根组件上方或下方
      if (dropNode.data.ref == 'rootContainer' && type != 'inner') {
        return false
      }
      return true
    },
    // 拖放判断
    allowDrag(draggingNode) {
      // 根组件不允许拖放
      if (draggingNode.data.ref == 'rootContainer') {
        return false
      }
      return true
    },
    // 过滤组件
    filterNode(value, data) {
      if (!value) return true
      return data.type.indexOf(value) !== -1
    },
    append(data) {
      console.log(1111)
    }
  }
}
</script>

<style scoped>
    .ap-dev-custom-data-tree {
        padding: 5px;
    }

    .ap-dev-custom-data-tree-current {
        background-color: #6093e5;
        color: white;
    }
</style>
