<template>
    <li class="cursor">
        <div :class="{ 'tree-container flex align-center': true, 'selected': selectLayout.layout_nm === splitInfo.layout_nm }" @click.stop="clickLayout(splitInfo)" >
            <p><svg-icon type="mdi" :width="18" :height="18" :path="arrowPath"></svg-icon></p>           
            <p><svg-icon type="mdi" :width="18" :height="18" :path="folderPath" :color="'#fbbe28'"></svg-icon></p>
          
            <p class="node-text">{{ splitInfo.layout_nm}}</p>
        </div>
        <ul v-if="splitInfo.children.length > 0 " class="children-node"  style="height: auto;">
            <TreeItem  v-for="(node , indx) in splitInfo.children" :splitInfo="node" :selectLayout = 'selectLayout' :key="indx" @changeselectLayout = "changeselectLayout" />
        </ul>

        <!-- <ul v-if="item.children" class="children-node" :style="{ 'height': toggleSelect === idx ? 'auto' : '0' }">
            <TreeItem :connection="connection" :selectedNode="parentSelectNode" v-for="(child, idx) in item.children" :item="child" :idx="child.id" 
                :key="idx" @selectForder="emit"/>
        </ul> -->
    </li>
</template>

<script>
import axios from 'axios';
import SvgIcon from '@jamescoyle/vue-icon';
import {mdiLandPlots, mdiChevronRight, mdiChevronDown, mdiRhombusSplit, mdiFolderOpen } from '@mdi/js';
export default {
    props: {      
        splitInfo:{
            type: Object,
        },   
        selectLayout : {
            type: Object,
        }
    },
    data() {
        return {
            currentSelectLayout : this.selectLayout,
            toggleSelect: false,
            clidrunNode: false,
            folderPath: mdiLandPlots,
            arrowPath: mdiChevronRight,
            filePath: mdiRhombusSplit,
            selectedId: null,
            // host_code: null,
            parentSelectNode: null,
        }
    },
    methods: {
        handleClick: function (idx, event, item) {
          
        },

        emit(path){
            this.$emit('selectForder', path)
        },

        getChildren(path, children) {
            const vm = this;
            vm.connection.path = path
            vm.connection.type = 'folder'
            vm.connection.depth = 1

            axios.get('/files/list', {params: vm.connection})
                .then(response => {
                    let chilerenList = response.data.resultData.fileList
                    chilerenList.forEach ( item => {
                        children.push(item)
                    })
                    this.$emit('selectForder', path)
                }).catch(error => {

                })
        },

        clickLayout : function(splitInfo){          
            this.toggleSelect = !this.toggleSelect;
            this.$emit('changeselectLayout', splitInfo);
        },

        changeselectLayout : function(layout){           
            this.$emit('changeselectLayout', layout);
        },
    },
    watch: {
        selectLayout: function (v) {
            this.currentSelectLayout = v;
        },       
    },
    computed: {

    },
    components: {
        'SvgIcon': SvgIcon
    },
    beforeCreate() {
        this.$options.components.TreeItem = require('./LayoutTree.vue').default;
    },
    mounted() {
    }
}
</script>

<style scoped>
.tree-container {
    padding: 5px 10px;
}

.children-node {
    padding: 0 0 0 10px;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.node-text {
    font-size: 1.4rem;
    margin-left: 5px;
}
</style>