<template>
    <div>
        <div v-for="(menu, index) in $store.state.menus" :key="index">
            <el-submenu :index="String(index)" v-if="menu.submenus != null">
                <template slot="title">
                    <el-image :src="menu.url"></el-image>
                    <span>{{ menu.name }}</span>
                </template>
                <el-menu-item-group v-for="(submenu, index2) in menu.submenus" :key="index2">
                    <el-menu-item :index="submenu.path">
                        <span class="subMenu">{{ submenu.name }}</span>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-menu-item v-if="menu.submenus == null" :key="menu.path" :index="menu.path">
                <el-image :src="menu.url"></el-image>
                <span slot="title">
                    {{ menu.name }}
                </span>
            </el-menu-item>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {

        }
    },
    methods: {

    }
}
</script>

<style lang="less" scoped>
.subMenu {
    margin-left: 70px;
}

.el-image {
    position: absolute;
    display: flex;
    overflow: hidden;
    top: 13px;

    /deep/.el-image__inner {
        vertical-align: middle;
    }
}

.el-menu-item {
    padding: 0 0 0 15px !important;
    font-size: 18px;
}

/deep/.el-submenu__title {
    padding: 0 0 0 15px !important;
    font-size: 18px;
}

/deep/.el-menu-item-group__title {
    padding: 0;
}

.el-menu-item-group>.span {
    margin-left: 70px;
}

/deep/.el-menu--inline> {
    border: none;
    text-align: left;
}</style>