<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 v-if='menuList && menuList.length>1' :index="item.path" class="menu_item" @click="handleMenuClick(item)" >{{item.name}}</el-menu-item>
                <el-menu-item v-else :index="item.path" class="menu_item" :class="{ia:menuList && menuList.length == 1}" @click="handleMenuClick(item)" >{{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 (item) {
                // console.log(item)
                this.$http({
                    url: this.$http.adornUrl('/sys/menu/clickMenu'),
                    method: 'post',
                    data: this.$http.adornParams({
                        menuName: item.name,
                        path: item.path,
                        pId: item.parentId,
                        stationId: localStorage.getItem('stationId')
                    })
                }).then(data => {
                    if (data && data.code === 0) {
                        // console.log(data)
                    }
                })
              //点击菜单时重新刷新页面
            //   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>