<script lang="ts">
    import type { Menu as MenuType } from '/@/router/types'
    import { computed, defineComponent } from 'vue'
    import { Menu } from 'ant-design-vue'
    import { useDesign } from '/@/hooks/web/useDesign'
    import { itemProps } from '../props'
    import BasicMenuItem from './BasicMenuItem.vue'
    import MenuItemContent from './MenuItemContent.vue'

    export default defineComponent({
        name: 'BasicSubMenuItem',
        isSubMenu: true,
        components: {
            BasicMenuItem,
            SubMenu: Menu.SubMenu,
            MenuItemContent,
        },
        props: itemProps,
        setup(props) {
            const { prefixCls } = useDesign('basic-menu-item')

            const getShowMenu = computed(() => !props.item.meta?.hideMenu)
            function menuHasChildren(menuTreeItem: MenuType): boolean {
                return (
                    !menuTreeItem.meta?.hideChildrenInMenu &&
                    Reflect.has(menuTreeItem, 'children') &&
                    !!menuTreeItem.children &&
                    menuTreeItem.children.length > 0
                )
            }
            return {
                prefixCls,
                menuHasChildren,
                getShowMenu,
            }
        },
    })
</script>

<template>
    <BasicMenuItem v-if="!menuHasChildren(item) && getShowMenu" v-bind="$props" />
    <SubMenu
        v-if="menuHasChildren(item) && getShowMenu"
        :class="[theme]"
        :key="`submenu-${item.path}`"
        popupClassName="app-top-menu-popup"
    >
        <template #title>
            <MenuItemContent v-bind="$props" :item="item" />
        </template>

        <template v-for="childrenItem in item.children || []" :key="childrenItem.path">
            <BasicSubMenuItem v-bind="$props" :item="childrenItem" />
        </template>
    </SubMenu>
</template>
