<template>
    <!-- 传入如果有children 时 -->
    <el-submenu v-if="sidebar.children && sidebar.children.length > 0" :key="sidebar.url" :index="stIndex.toString()">

        <!-- 分组名 -->
        <template slot="title">
            <i v-if="sidebar.classUrl" :class="sidebar.classUrl"></i>
            <!--<st-svg
                    height="23px"
                    width="23px"
                    v-if="sidebar.classUrl"
                    :class="sidebar.classUrl"
                    :name="sidebar.classUrl"
                    :color="$route.path === sidebar.url ? activeColor : defaultColor"
            ></st-svg>-->
            <span class="mta-menu-span" slot="title">{{sidebar.name}}</span>
        </template>
        <!-- 子项如果有children时 -->
        <sidebar-item
                :activeColor="activeColor"
                :defaultColor="defaultColor"
                v-for="child in sidebar.children"
                :sidebar="child" :key="child.url"></sidebar-item>
    </el-submenu>
    <!-- children 不存在时 :route="{path: item.url}"-->
    <el-menu-item v-else :index="sidebar.url" >
        <i v-if="sidebar.classUrl" :class="sidebar.classUrl"></i>
        <!--<st-svg
                height="23px"
                width="23px"
                v-if="sidebar.classUrl"
                :class="sidebar.classUrl"
                :name="sidebar.classUrl"
                :color="$route.path === sidebar.url ? activeColor : defaultColor"
        ></st-svg>-->
        <span class="mta-menu-span" slot="title">{{sidebar.name}}</span>
    </el-menu-item>
</template>

<script>
export default {
    name: "SidebarItem",
    props: {
        sidebar: { // 菜单数据
            type: Object,
            default: () => {},
        },
        stIndex: {
            type: Number,
        },
        defaultColor: {
            require: true
        },
        activeColor: {
            require: true
        }
    },
}
</script>

