<template>
    <div class='menu-wrapper' v-if="!menuItem.hidden">
        <el-submenu v-if="menuItem.children" :index="currPath">
            <template slot="title">
                <Icon :type="menuItem.meta.icon || 'icon-dian'"></Icon>
                <span slot="title">{{menuItem.meta.title}}</span>
            </template>
            <template v-for="child in menuItem.children">
                <sidebar-item class="nest-menu" v-if="!child.hidden&&!isLimitLevel&&child.children" :menuItem="child"
                              :key="child.path" :base-path="currPath"></sidebar-item>
                <el-menu-item v-else-if="!child.hidden" :index="resolvePath(currPath, child.path)" :key="child.path">
                    <Icon :type="child.meta.icon || 'icon-dian'"></Icon>
                    <span slot="title">{{child.meta.title}}</span>
                </el-menu-item>
            </template>
        </el-submenu>
        <el-menu-item v-else :index="currPath">
            <Icon :type="menuItem.meta.icon"></Icon>
            <span slot="title">{{menuItem.meta.title}}</span>
        </el-menu-item>
    </div>
</template>

<script>
    import path from 'path';
    export default {
        name: 'SidebarItem',
        props: {
            menuItem: {
                type: Object
            },
            basePath: {
                type: String
            },
            isLimitLevel: {
                type: Boolean
            }
        },
        computed: {
            currPath() {
                return this.resolvePath(this.basePath, this.menuItem.path);
            }
        },
        methods: {
            resolvePath(basePath, routePath) {
                return path.resolve(basePath, routePath);
            }
        }
    };
</script>

<style>

</style>
