<template>
    <el-scrollbar wrap-class="scrollbar-wrapper">
        <el-menu
            :default-active="activeMenu"
            :collapse="isCollapse"
            :unique-opened="false"
            :collapse-transition="false"
            mode="vertical"
        >
            <sidebar-item
                v-for="route in menus"
                :key="route.routeUrl || route.code"
                :active-menu="activeMenu"
                :item="route"
                :is-collapse="isCollapse"
                :base-path="route.path"
                :level="1"
                :show-menu-level="showMenuLevel"
            />
        </el-menu>
    </el-scrollbar>
</template>

<script>
    import {mapGetters} from 'vuex';
    import SidebarItem from './SidebarItem';
    import variables from '@/assets/styles/variables.scss';

    export default {
        components: {SidebarItem},
        props: {
            menus: {
                type: Array,
                default: () => {
                }
            }
        },
        data() {
            return {
                showMenuLevel: 2
            };
        },
        computed: {
            ...mapGetters(['sidebar']),
            activeMenu() {
                const route = this.$route;
                const {meta, fullPath} = route;
                if (meta.activeMenu) {
                    return meta.activeMenu;
                }
                return fullPath;
            },
            variables() {
                return variables;
            },
            isCollapse() {
                return !this.sidebar.opened;
            }
        },
        method: {
            defaultMenuOwned(data, lv) {
                data.forEach((item, i) => {
                    this.defaultMenuOwned(item, lv);
                });
            }
        }
    };
</script>