<template>
    <div>
        <template v-for="item in menus">

            <el-submenu :index="item.menuPath ? item.menuPath : '/'" v-if="item.children && item.children.length > 0">
                <template slot="title">
                    <i :class="item.menuIcon || 'el-icon-ijm-menu'"></i>
                    <span slot="title">{{item.menuName}}</span>
                </template>
                <left-menu :menus="item.children" />
            </el-submenu>
            <el-menu-item :index="item.menuPath ? item.menuPath : '/'" v-else>
                <i :class="item.menuIcon || 'el-icon-ijm-subMenu'"></i>
                <span slot="title">{{item.menuName}}</span>
            </el-menu-item>
        </template>
    </div>
</template>

<script>
export default {
    name: "leftMenu",
    props: {
        menus: {
            type: Array,
            default:  []
        }
    }
};
</script>
