<template>
  <ul class="tree-node">
    <li
      :class="{
        'flex align-center justify-between cursor p-tree no-gutters': true,
        'selected': displaySelectedNode === displayNode.id,
      }"
      @click="toggleNode(displayNode.id)"
    >
    <div class="gd-11 flex align-center no-gutters">
      <div class="gd-1">
        <svg-icon
        type="mdi"
        v-if="displayNode.childList.length"
        :width="18"
        :height="18"
        :path="iconPath()"
      ></svg-icon>
      </div>
      <div class="gd-11 flex align-center">
        <div class="gd-1">
          <svg-icon
          type="mdi"
          v-if="displayNode.childList.length"
          :width="18"
          :height="18"
          :path="icon"
          :color="'#5089ef'"
        ></svg-icon>
        </div>
       <div class="gd-11">
        <p class="node-name ml5" :title="displayNode.nm">{{ displayNode.nm }}</p>
       </div>
      </div>
    </div>
    </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>
import { mdiChevronRight, mdiChevronDown } from "@mdi/js";
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 ? mdiChevronDown : mdiChevronRight;
    },
    findByChildNode(node) {
      this.$emit("changeSelected", node);
    },
  },
  watch: {},
  computed: {
    displayNode() {
      return this.nodeList;
    },
    displaySelectedNode() {
      return this.selectedNode;
    },
  },
  components: {},
  mounted() {},
};
</script>

<style scoped>
.p-tree {
  padding: 0.5rem 1rem;
}

.node-name {
  font-size: 1.6rem;
}

.selected {
  border: 1px solid var(--blue);
  border-radius: 0.3rem;
}
</style>
