<template>
  <div v-if="labDesign.activity" class="lab-design-aside-content" style="padding: 6px 0">
    <tree-node :element="element" />
  </div>
</template>

<script>
import LabDesign from "../../../../mixins/LabDesign";
import TreeNode from "./TreeNode";

export default {
  name: "ElementTree",
  components: {TreeNode},
  mixins: [LabDesign],
  props: {
    /**
     * 当前组件
     */
    element: {
      type: Object,
      default: function () {
        return { elements: [] }
      }
    }
  },
  data(){
    return {
      expendKeys: [],
      defaultProps: {
        children: 'elements',
        label: 'label'
      }
    }
  },
  methods: {
    setting(node, data){
      let elements = this.labDesign.activity.elements
      if (node.parent) {
        elements = node.level === 1 ? node.parent.data: node.parent.data.elements
      }
      const index = elements.findIndex(item => item.key === data.key)
      if (index > -1) {
        this.labDesign.activeChange(elements[index], elements, index)
      }
    },
    remove(node, data) {
      let elements = this.labDesign.activity.elements
      if (node.parent) {
        elements = node.level === 1 ? node.parent.data: node.parent.data.elements
      }
      const index = elements.findIndex(item => item.key === data.key)
      if (index > -1) {
        elements.splice(index, 1)
      }
    },
    handleDragEnd(draggingNode, dropNode, dropType) {
      console.log('tree drag end: ', dropNode && dropNode.label, dropType);
    }
  }
}
</script>

<style scoped lang="scss">
.element-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  padding-right: 8px;
}
</style>
