<template>
  <div class="tree-menu">
    <div class="label-wrapper" v-if="depth > 0" @click="toggleChildren">
      <div :style="indent" :class="labelClasses">
        {{ label }}
        <b v-if="nodes">[{{showChildren ? '-' : '+'}}]</b>
      </div>
    </div>
    <span v-if="showChildren">
      <TreeMenu
        v-for="node in nodes"
        :key="node.label"
        :nodes="node.nodes"
        :label="node.label"
        :depth="depth + 1"
      ></TreeMenu>
    </span>
  </div>
</template>

<script>
export default {
  name: "TreeMenu", // recursive component에는 name 설정 필수.
  props: ["nodes", "label", "depth"],
  data() {
    return {
      showChildren: true
    };
  },
  computed: {
    labelClasses() {
      return { "has-children": this.nodes };
    },
    indent() {
      return { transform: `translate(${(this.depth-1) * 50}px)` };
    }
  },
  methods: {
    toggleChildren() {
      this.showChildren = !this.showChildren;
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 300px;
  margin: 0 auto;
}

.tree-menu {
  .label-wrapper {
    padding-bottom: 10px;
    margin-bottom: 10px;
    .has-children {
      cursor: pointer;
    }
  }
}
</style>
