<template>
    <menu-item v-if="isLeaf" :id="menu.id" :icon="menu.icon">{{menu.name}}</menu-item>
    <sub-menu v-else :id="menu.id" :icon="menu.icon" :title="menu.name">
        <template slot-scope="{isOpen}">
            <menu-component v-for="item in menu.children" :menu="item" :key="item.id" :parentIsOpen="isOpen"></menu-component>
        </template>
    </sub-menu>
</template>
<script>
import SubMenu from './SubMenu'
import MenuItem from './MenuItem'
export default {
    name: 'MenuComponent',
    props: {
        menu: {
            type: Object,
            required: true
        },
        parentIsOpen: {
            type: Boolean
        }
    },
    mounted() {
        this.$on('onSelected', this.onSubMenuSelected)
    },
    destroyed() {
        this.$off('onSelected')
    },
    data() {
        return {}
    },
    methods: {
        activeChange(activeId) {
            this.$children.forEach(child => {
                child.activeChange(activeId)
            })
        },
        click(e) {
            console.log(e);
        },
        onSubMenuSelected(e) {
            this.$parent.$emit('onSelected', e)
        }
    },
    computed: {
        isLeaf() {
            return !(this.menu.children instanceof Array)
        }
    },
    components: {
        SubMenu,
        MenuItem
    }
}
</script>
