<template>
  <el-menu :default-active="matchPath"
           background-color="#2d303e"
           :mode="mode"
           text-color="#cccccc"
           active-text-color="#ffffff"
           unique-opened
           @select="selectItem"
           :collapse="isCollapsed">
    <sidebar-item v-for="route in sideMenuData" :menuItem='route' :key="route.path" :isLimitLevel="isLimitLevel" :base-path="basePath"></sidebar-item>
  </el-menu>
</template>

<script>
import sidebarItem from './sidebarItem';

export default {
    props: {
        theme: {
            type: Object
        },
        mode: {
            type: String,
            default: 'vertical'
        },
        isCollapsed: {
            type: Boolean
        },
        menuData: {
            type: Array
        },
        logo: {
            type: String
        },
        shortLogo: String,
        name: {
            type: String
        },
        isLimitLevel: {
            type: Boolean,
            default: false
        },
        limitLevel: {
            type: Number,
            default: 4
        },
        basePath: {
            type: String,
            default: '/'
        },
        matchPath: {
            type: String,
            default: ''
        }
    },
    components: { sidebarItem },
    data () {
        return {
        };
    },
    computed: {
        sideMenuData () {
            return this.filterMenuData(this.menuData);
        }
    },
    created () {
    },
    methods: {
    // 对菜单数据做过滤，去掉隐藏菜单
        filterMenuData (data) {
            const menu = [];
            data.forEach(item => {
                if (!item.hidden) {
                    const cache = { ...item };
                    menu.push(cache);
                    if (item.children && item.path.split('/').length < this.limitLevel + 1) {
                        cache.children = this.filterMenuData(item.children);
                    } else {
                        cache.children = null;
                    }
                }
            });
            return menu.length ? menu : null;
        },
        selectItem (index) {
            this.$emit('select', index);
        }
    }
};
</script>
