<template>
    <div style="background:#4F789D;">
        <el-menu :default-active="active" @select="handleSelect" class="oMenu" mode="horizontal" ref="menuItem"  >
            <router-link :key="item.menuId" :menuList="menuList" :to="item.path" v-for="item in menuList">
                <el-menu-item :index="item.path" class="menu_item"  @click="handleMenuClick" >{{item.name}}</el-menu-item>
            </router-link>
        </el-menu>
    </div>
</template>
<script>
    export default {
        inject: ['reload'],
        data() {
            return {
                activeName: '1'
                // menList: this.filterData(this.menuList) || []
            }
        },
        props: ['menuList', 'active'],
        // watch: {
            // $route() {
            //     setTimeout(() => {
            //         this.$refs.menuItem.activeIndex = this.$route.path
            //     }, 100)
            // }
            // menList() {
            //     this.$refs.menuItem.activeIndex = this.menList[0].path
            // }
        // },
    
        methods: {
            handleMenuClick () {
                // console.log(this.active)
              //点击菜单时重新刷新页面
            //   this.reload()
            },
            handleSelect(key, keyPath) {
                // console.log(key, keyPath);
            }
            // filterData(list) {
            //     // console.log(list)
            //     let men = JSON.parse(sessionStorage.getItem('menuList') || '')
            //     let a = []
            //     men.map(item => {
            //         a.push.apply(a, item.list)
            //     })
            //     let urlList = a.map(item => {
            //         if (item.url != null) {
            //             return item.url
            //         }
            //     })
            //     // console.log('urlList', urlList)
            //     let ll = list.filter(item => {
            //         return urlList.includes(item.path)
            //     })
            //     // console.log('前台路由列表', list.map(item => item.path))
            //     // console.log('后台路由列表', urlList.filter(item => item))
            //     setTimeout(() => {
            //         this.$refs.menuItem.activeIndex = ll[0].path
            //     }, 100)
            //     this.$router.replace(ll[0].path)
            //     return ll
            // }
        }
    }
</script>
<style lang="scss" scoped>
    .oMenu {
        display: flex;
        background: #4f789d;
        height: 65px;
        align-items: center;
        width: 1200px;
        margin-left: 20px;
    }

</style>
<style>
    /* .theme-tx1 .el-menu--horizontal .menu_item:not(.is-disabled):hover {
        color: #fff;
        background: #2999dd;
    } */
</style>
