export default {
    props: {
        nav: {
            type: Object,
            default() {
                return {
                    content: []
                }
            }
        }
    },

    methods: {
        onOpenContentWindow(menu) {
            this.$emit('open')
            setTimeout(() => {
                this.openContentWindow({
                    key: menu.id,
                    title: menu.meta.title,
                    icon: menu.meta.icon,
                    path: menu.component,
                })
            }, 300)
        },
    },

    render() {
        return (
            <container mode="container-fluid">
                {this.nav.content.map((item, i) => {
                    return (
                        <section class="yo-nav">
                            <h5 class="yo-nav--app">{item.app.name}</h5>
                            <div class="yo-nav--row">
                                {
                                    item.menu.map(sub => {
                                        return (
                                            <div class="yo-nav--col">
                                                <div class="yo-nav--sub-item">
                                                    {
                                                        sub.children ?
                                                            <div class="yo-nav--item-group">
                                                                {
                                                                    sub.meta.icon && <a-icon type={sub.meta.icon} class="mr-xs" />
                                                                }
                                                                {sub.meta.title}
                                                            </div>
                                                            :
                                                            <div class="yo-nav--item" onClick={() => this.onOpenContentWindow(sub)}>
                                                                {
                                                                    sub.meta.icon && <a-icon type={sub.meta.icon} class="mr-xs" />
                                                                }
                                                                {sub.meta.title}
                                                            </div>
                                                    }
                                                    {
                                                        sub.children && sub.children.map(menu => {
                                                            return <div class="yo-nav--item" onClick={() => this.onOpenContentWindow(menu)}>
                                                                {
                                                                    menu.meta.icon && <a-icon type={menu.meta.icon} class="mr-xs" />
                                                                }
                                                                {menu.meta.title}
                                                            </div>
                                                        })
                                                    }
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </section>
                    )
                })}
            </container>
        )
    }
}