<template>
    <div>
        <Head>
            <Title>Vue Tree Component</Title>
            <Meta name="description" content="Tree is used to display hierarchical data." />
        </Head>

        <div class="content-section introduction">
            <div class="feature-intro">
                <h1>Tree</h1>
                <p>Tree is used to display hierarchical data.</p>
            </div>
            <AppDemoActions />
        </div>

        <div class="content-section implementation">
            <div class="card">
                <h5>Basic</h5>
                <Tree :value="nodes"></Tree>

                <h5>Programmatic Control</h5>
                <div style="margin-bottom: 1em">
                    <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
                    <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
                </div>
                <Tree :value="nodes" :expandedKeys="expandedKeys"></Tree>
            </div>
        </div>

        <TreeDoc />
    </div>
</template>
<script>
import NodeService from '../../service/NodeService';
import TreeDoc from './TreeDoc';

export default {
    data() {
        return {
            nodes: null,
            expandedKeys: {}
        };
    },
    nodeService: null,
    created() {
        this.nodeService = new NodeService();
    },
    mounted() {
        this.nodeService.getTreeNodes().then((data) => (this.nodes = data));
    },
    methods: {
        expandAll() {
            for (let node of this.nodes) {
                this.expandNode(node);
            }

            this.expandedKeys = { ...this.expandedKeys };
        },
        collapseAll() {
            this.expandedKeys = {};
        },
        expandNode(node) {
            if (node.children && node.children.length) {
                this.expandedKeys[node.key] = true;

                for (let child of node.children) {
                    this.expandNode(child);
                }
            }
        }
    },
    components: {
        TreeDoc: TreeDoc
    }
};
</script>

<style scoped>
button {
    margin-right: 0.5rem;
}
</style>
