<template>
    <li v-if="!data.hidden" role="menuitem" :class="[data.children && data.children.length ? 'menu-submenu' : 'menu-item', `/${data.path}` == $route.path ? 'selected' : '', isCollapsed ? 'collapsed' : '']">
        <template v-if="data.children">
            <div :class="['menu-submenu-title', isCollapsed ? 'collapsed' : '']" @click="toggle">
                <span>
                    <i aria-label="图标：form" class="webicon">
                        <IconFont :icon="data.icon" />
                    </i>{{ data.title }}
                </span>
                <i v-show="!isCollapsed" :class="['menu-submenu-arrow', flag ? 'up' : 'down']"></i>
            </div>
            <collapse-transition>
                <ul role="menu" class="menu menu-sub" style="padding-left: 24px;" v-show="flag">
                    <TreeMenu v-for="(child, index) in data.children" :key="index" :data="child"></TreeMenu>
                </ul>
            </collapse-transition>
        </template>
        <template v-else>
            <router-link :to="{ name: data.name }">
                <i aria-label="图标: ant-design" :class="['webicon', isCollapsed ? 'collapsed' : '']">
                    <IconFont :icon="data.icon" />
                </i>{{ data.title }}
            </router-link>
        </template>
    </li>
</template>

<script>
    import collapseTransition from './collapseTransition';

    export default {
        name: "TreeMenu",
        props: {
            data: {
                type: Object,
                default: () => ({})
            },
            isCollapsed: {
                type: Boolean,
                default: false
            },
        },
        watch: {
            isCollapsed() {
                this.flag = false
            }
        },
        components: {
            collapseTransition
        },
        data() {
            return {
                flag: false
            }
        },
        methods: {
            toggle() {
                if (this.data.children && this.data.children.length) this.flag = !this.flag
            },
        },
        created() {}
    }
</script>