<template functional>
  <div
    class="hn-easy-tree-branch"
    :style="{ marginLeft: - (props.indent / 2) + 'px' }">
    <div class="hn-easy-tree-branch__top"></div>
    <div class="hn-easy-tree-branch__right"></div>
    <div v-if="!props.hideBottom" class="hn-easy-tree-branch__bottom"></div>
    <template v-if="props.node.level > 2">
      <span
        class="hn-easy-tree-branch__vertical"
        v-for="i in Array(props.node.level - 2).fill().map((i, index) => index).filter(v => !props.hideVerticalPositions.includes(v))"
        :key="'tree-branch' + i"
        :style="{ left: - (props.indent * (props.node.level - 2 - i)) + 'px' }"></span>
    </template>
  </div>
</template>

<script>
  export default {
    name: 'HnTreeBranch',
    props: {
      node: {
        type: Object,
        required: true
      },
      indent: {
        type: Number,
        required: true
      },
      hideBottom: {
        type: Boolean,
        default: false
      },
      hideVerticalPositions: {
        type: Array,
        default: []
      }
    }
  };
</script>

