<!--
    menus: [
        {
            name: '学校工作安排',
            id: 'tab_1',
            permission: true,
            path: '/office/weeklyWork/schoolWork'
        },
        {
            name: '工作组',
            id: 'tab_2',
            permission: true,
            path: '/office/weeklyWork/workGroup'
        }
    ]
-->
<template>
    <div>
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            router
        >
            <el-menu-item
                v-for="(item,index) in menuList"
                :key="`menu_${index}`"
                :index="item.path" >
                {{ item.name }}
            </el-menu-item>
        </el-menu>
    </div>
</template>
<script>
export default {
    name: 'NavMenu',
    props: {
        menus: {
            type: Array,
            default: () => { return [] }
        }
    },
    components: {},

    data () {
        return {
            activeIndex: ''
        }
    },
    computed: {
        menuList () {
            return this.menus.filter(item => { return item.permission || item.permission === undefined })
        }

    },
    watch: {
        $route (to, from) {
            let { meta: { belongTo }, path } = to
            this.activeIndex = belongTo || path
        }
    },
    created () {},
    mounted () {
        let { meta: { belongTo }, path } = this.$route
        this.activeIndex = belongTo || path
    },
    methods: {}

}
</script>

<style lang="stylus" scoped>
</style>
