<template>
  <div ref="container" class="org-tree-container">
    <div
      ref="tree"
      style="position: absolute"
      class="org-tree"
      :class="{ horizontal, collapsable }"
    >
      <org-tree-node
        :data="data"
        :props="props"
        :horizontal="horizontal"
        :label-width="labelWidth"
        :collapsable="collapsable"
        :disabled="disabled"
        :render-content="renderContent"
        :label-class-name="labelClassName"
        @on-expand="(e, data) => $emit('on-expand', e, data)"
        @on-expand-over="onExpandOver"
        @on-delete="onDelete"
        @on-node-focus="(e, data) => $emit('on-node-focus', e, data)"
        @on-node-click="(e, data) => $emit('on-node-click', e, data)"
        @on-node-mouseover="(e, data) => $emit('on-node-mouseover', e, data)"
        @on-node-mouseout="(e, data) => $emit('on-node-mouseout', e, data)"
      />
    </div>
    <div :style="size">
      <slot />
    </div>
  </div>
</template>

<script>
import render from './node'

export default {
  name: 'Vue2OrgTree',
  components: {
    OrgTreeNode: {
      render,
      functional: true
    }
  },
  props: {
    size: {
      type: Object,
      default: () => {}
    },
    data: {
      type: Object,
      required: true
    },
    props: {
      type: Object,
      default: () => ({
        label: 'label',
        expand: 'expand',
        children: 'children',
        isAddable: 'isAddable'
      })
    },
    horizontal: Boolean,
    selectedKey: String,
    collapsable: Boolean,
    disabled: Boolean,
    renderContent: Function,
    labelWidth: [String, Number],
    labelClassName: [Function, String],
    selectedClassName: [Function, String]
  },
  methods: {
    onDelete(e, data) {
      this.$emit('on-delete', e, data)
    },
    onExpandOver(e, data) {
      this.$emit('on-expand-over', e, data)
    }
  }
}
</script>

<style lang="scss" src="./css/org-tree.scss"></style>
