<template>
    <ul class="tree-node">
        <li :class="{ 'p-tree flex justify-start align-center cursor mb5 no-gutters': true, 'selected': node.dscsnCtgryId == selectedNode.dscsnCtgryId }"
            @click="toggleNode">
            <!-- <svg-icon type="mdi" v-if="node.children.length" :width="18" :height="18" :path="iconPath()"></svg-icon> -->
            <div class="gd-12 flex justify-start align-center  no-gutters">
               <div class="gd-1">
                <svg-icon type="mdi" :width="18" :height="18" :path="icon" :color="'#5089ef'"></svg-icon>
               </div>
               <div class="gd-11">
                <p class="node-name ml5" :title="node.dscsnCtgryNm">{{ node.dscsnCtgryNm }}</p>
               </div>
            </div>
        </li>
        <ul v-if="node.children" class="child-node pl15"> <!--isOpen &&-->
            <li v-for="child in node.children" :key="child.id">
                <Hierachy :node="child" :icon="icon" :selectedNode="selectedNode" @callback="nodeCallBack" />
                <!-- <Hierachy :node="child" :icon="icon"></Hierachy> -->
            </li>
        </ul>
    </ul>
</template>

<script>
import { mdiChevronRight, mdiChevronDown } from '@mdi/js';
export default {
    name: 'Hierachy',
    props: {
        node: {
            type: Object,
            required: true
        },
        icon: {
            required: true,
        },
        selectedNode: {
            type: Object,
        }
    },
    data() {
        return {
            isOpen: false,
        };
    },
    methods: {
        toggleNode: function () {
            this.isOpen = !this.isOpen;
            this.$emit('callback', this.node);
        },
        nodeCallBack: function (node) {
            this.$emit('callback', node);

        },
        iconPath: function () {
            return this.isOpen ? mdiChevronDown : mdiChevronRight;
        },

    },
    watch: {},
    computed: {
    },
    components: {
    },
    mounted() { }
};
</script>

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

}

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

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