<template>
    <div class="admin-home__asider">
        <div class="top"></div>
        <el-scrollbar  class="my-menu_wrap">
            <el-menu
                    :default-active="$route.path"
                    active-text-color="#409EFF"
                    :router="true"
                    class="my-menu"
                    :collapse="isCollapse"
            >
                <my-submenu
                        v-for="item in menuData"
                        :data="item"
                        :key="item.path"
                ></my-submenu>
            </el-menu>
        </el-scrollbar>

        <div class="bottom"></div>
    </div>
</template>

<script>
    import mySubmenu from './menu-submenu';
    export default {
        name:       'Asider',
        props:      {
            isCollapse: {
                type:    Boolean,
                default: false,
            },
        },
        components: {
            mySubmenu,
        },
        data() {
            return {
                menuData:      [],
            };
        },
        methods:    {
            initMenu() {
                const {
                    options: { routes },
                } = this.$router;

                const arr = this.menusToRoutes(routes);
                this.menuData = arr;
            },
            menusToRoutes(routes) {
                const arr = [];
                routes.forEach(item => {
                    if (item.children && item.children.length && item.isAdminMenu) {
                        item.children = this.menusToRoutes(item.children);
                        arr.push(item);
                    } else if (item.isAdminMenu) {
                        arr.push(item);
                    }
                });
                return arr;
            },
        },
        created() {
            this.initMenu();
        },
    };
</script>

<style lang="scss" scoped>
    $menu_background_color: #D3DCE6;
    .admin-home {
        &__asider {
            .top {
                height: 60px;
            }

            .bottom {
                height: 60px;
            }

            .my-menu_wrap {
                height: calc(100vh - 120px);
                ::v-deep .el-scrollbar__wrap {
                    overflow-x: hidden;
                }
            }

            .my-menu:not(.el-menu--collapse) {
                width: 200px;
                min-height: 400px;
                background: $menu_background_color;
            }

            .my-menu.el-menu--collapse ::v-deep div
            > .el-submenu
            > .el-submenu__title
            span {
                height: 0;
                width: 0;
                overflow: hidden;
                visibility: hidden;
                display: inline-block;
            }
            .my-menu.el-menu--collapse ::v-deep div
            > .el-submenu
            > .el-submenu__title
            .el-submenu__icon-arrow {
                display: none;
            }
        }
    }
</style>