<template>
    <el-container>
        <el-header>
            <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                <template v-for="(menu, i) in menuList" >
                    <el-submenu v-if="menu.children"  index="2" :key="`submenu-${i}`">
                        <template slot="title">{{ menu.meta.title }}</template>
                        <el-menu-item v-for="(menu2, m) in menu.children" :key="`menu-${i}-${m}`"  :index="`menu-${i}-${m}`">{{ menu2.meta.title }}</el-menu-item>
                    </el-submenu>
                    <el-menu-item v-else :key="`menu-${i}`" :index="`menu-${i}`"><i :class="menu.meta.icon"></i>{{ menu.meta.title }}</el-menu-item>
                </template>

                <el-menu-item index="3" disabled>消息中心</el-menu-item>
                <el-menu-item index="4"><a href="https://inscode.csdn.net/@tinyu5/VueJS" target="_blank">InsCode</a></el-menu-item>
            </el-menu>
        </el-header>
        <el-main>
            <DynamicRoute />
        </el-main>
    </el-container>
</template>
<script>
import DynamicRoute from './dynamicRoute.vue';
import routes from '@/router/routes'
import Utils from '@/utils/index.js'
export default {
    name: 'layout',
    components: { DynamicRoute },
    data() {
        return {
            menuList: [],
            activeIndex2: ''
        }
    },
    created() {
        this.menuList = Utils.coventRouteData(routes, item => item);
    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        }
    }
}
</script>
<style scoped>
.el-header,
el-main {
    padding: 0;
}
</style>