<template>
  <ul class="tree-node">
    <li
      :class="{
        'p-tree cursor mb5': true,
        selected: displaySelectedNode === displayNode.id,
      }"
      @click="toggleNode(displayNode.id)"
      :title="displayNode.nm"
    >
      <p class="node-name">{{ displayNode.nm }}</p>
    </li>
    <ul v-if="isOpen && displayNode.childList.length" class="child-node pl20">
      <li v-for="child in displayNode.childList" :key="child.id">
        <Hierachy
          :nodeList="child"
          :icon="icon"
          :selectedNode="selectedNode"
          @changeSelected="findByChildNode"
        />
      </li>
    </ul>
  </ul>
</template>

<script>
export default {
  name: "Hierachy",
  props: {
    nodeList: {
      type: Object,
      required: true,
    },
    icon: {
      required: true,
    },
    selectedNode: {
      type: String,
    },
  },
  data() {
    return {
      isOpen: false,
    };
  },
  methods: {
    toggleNode(node) {
      this.isOpen = !this.isOpen;
      this.$emit("changeSelected", node);
    },
    iconPath() {
      return this.isOpen ? this.$iconPath("mdiChevronDown") : this.$iconPath("mdiChevronRight");
    },
    findByChildNode(node) {
      this.$emit("changeSelected", node);
    },
  },
  watch: {},
  computed: {
    displayNode() {
      return this.nodeList;
    },
    displaySelectedNode() {
      return this.selectedNode;
    },
  },
  components: {},
  mounted() {},
};
</script>

