<template>
    <li class="ui-tree-item">
        <div :class="{  }" @click="toggle" @dblclick="makeFolder">
            <i class="arrow iconfont icon-pull-down" :class="{open:isOpen,visibility:isFolder}"></i>{{ item.name }}
            <span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
        </div>
        <ul v-show="isOpen" v-if="isFolder">
            <ui-tree-item
                class="item"
                v-for="(child, index) in item.children"
                :key="index"
                :item="child"
                @make-folder="$emit('make-folder', $event)"
                @add-item="$emit('add-item', $event)"
            ></ui-tree-item>
            <li class="add" @click="$emit('add-item', item)">+</li>
        </ul>
    </li>
</template>
<script>
import { defineComponent, ref, computed } from 'vue'
export default defineComponent({
    name: 'ui-tree-item',
    props: {
        item: Object,
    },
    components: {},
    setup(props, ctx) {
        const item = props.item
        const toggle = () => {
            if (isFolder) {
                isOpen.value = !isOpen.value
            }
        }
        const makeFolder = () => {}
        const isOpen = ref(false)
        const isFolder = computed(() => item.children && item.children.length)

        return {
            item,
            toggle,
            makeFolder,
            isOpen,
            isFolder,
        }
    },
})
</script>