<script lang="tsx">
import { defineComponent, PropType, Fragment } from 'vue'
import * as env from '../../../types/instance.resolver'

export default defineComponent({
    name: 'SkyNavbarItem',
    props: {
        node: { type: Object as PropType<env.NavbarItemOption>, required: true },
        iconSize: { type: Number, default: 16 }
    },
    setup(props, { slots }) {
        return () => {
            if (props.node.children && props.node.children.length > 0) {
                /**目录**/
                return (
                    <el-sub-menu class="skyline-navbar-submenu" index={props.node.path}>
                        {{
                            title: () => (
                                <Fragment>
                                    {props.node.meta.icon && (
                                        <Fragment>
                                            {slots.iconRender ? (
                                                slots.iconRender(props.node)
                                            ) : (
                                                <el-icon size={props.iconSize}>{props.node.meta.icon}</el-icon>
                                            )}
                                        </Fragment>
                                    )}
                                    <span>{props.node.meta.title}</span>
                                </Fragment>
                            ),
                            default: () => (
                                <Fragment>
                                    {props.node.children.map((item: env.Omix) => (
                                        <sky-navbar-item node={item}>{slots}</sky-navbar-item>
                                    ))}
                                </Fragment>
                            )
                        }}
                    </el-sub-menu>
                )
            }
            return (
                <el-menu-item class="skyline-navbar-item" index={props.node.path}>
                    {props.node.meta.icon && (
                        <Fragment>
                            {slots.iconRender ? (
                                slots.iconRender(props.node)
                            ) : (
                                <el-icon size={props.iconSize}>{props.node.meta.icon}</el-icon>
                            )}
                        </Fragment>
                    )}
                    <span>{props.node.meta.title}</span>
                </el-menu-item>
            )
        }
    }
})
</script>
