<template>
    <div class="sideBar" :style="{ 'min-width': minWidth }">
        <el-aside id="side" :width="minWidth" :style="{ background: $style.menuBg }">
            <el-scrollbar style="height:100%;" wrap-class="scrollbar-wrapper">
                <el-menu
                    :default-active="$route.name"
                    :collapse="isCollapse"
                    :default-openeds="defaultOpeneds"
                    :background-color="$style.menuBg"
                    :text-color="$style.menuText"
                    mode="vertical"
                >
                    <side-item :json="filterRoutes"></side-item>
                </el-menu>
            </el-scrollbar>
        </el-aside>
    </div>
</template>
<script>
import sideItem from './sideItem'
import cache from '@/utils/cache'
export default {
    components: { sideItem },
    data() {
        return {
            filterRoutes: [], // 过滤后的路由
            defaultOpeneds: [], // 默认打开的二级菜单
            userType: 0
        }
    },
    computed: {
        sideRoutes() {
            return this.$store.state.routes.sideRoutes[0].children
        },
        isCollapse() {
            return !this.$store.state.sidebarStatus
        },
        minWidth() {
            return this.isCollapse ? this.$style.menuIconWidth : this.$style.menuWidth
        }
    },
    created() {
        let user = JSON.parse(cache.getLocal('user'))
        this.userType = user.usertype
        this.filterRoutes = this.handleRoutes(this.sideRoutes)
    },
    methods: {
        // 递归过滤路由
        handleRoutes(Arr) {
            const Routes = Arr.filter(route => {
                // 侧边栏路由强制写name，不然会导致很多问题（缓存、跳转等问题）
                if (route.name) {
                    // if (route.meta) {
                    //     if (route.meta.hidden) {
                    //         return false
                    //     } else {
                    //         if (route.meta.open) {
                    //             this.defaultOpeneds.push(route.name)
                    //         }
                    //     }
                    // }
                    // 服务商
                    if (this.userType === 2) {
                        if (route.name === 'operator_management') {
                            return false
                        }
                    }
                    // 运营商
                    if (this.userType === 1) {
                        if (route.name === 'service_provider_management'
                            || route.name === 'ent_init') {
                            return false
                        }
                    }
                    if (route.children) {
                        route.children = this.handleRoutes(route.children)
                    }
                    return true
                } else {
                    if (!route.path.includes('redirect')) {
                        console.warn(`路由【${route.path}】：缺少name属性，存在bug隐患`)
                    }
                    return false
                }
            })
            return Routes
        }
    }
}
</script>
<style module>
:export {
    menuBg: #304156;
    menuText: #f5f5f5;
    menuWidth: 210px;
    menuIconWidth: 36px;
}
</style>
<style lang="stylus">
.sideBar {
    transition: min-width 0.28s;

    #side {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        display: flex;
        flex-direction: column;
        height: 100%;
        user-select: none;
        transition: width 0.28s;
        transform: translateZ(0); // 防止抖动

        .el-scrollbar__bar.is-horizontal {
            display: none;
        }

        .el-menu {
            width: 100%;
            flex-grow: 1;
            border: none;
        }

        .el-menu--collapse {
            .el-submenu {
                & > .el-submenu__title {
                    padding: 0 10px !important;

                    & > span {
                        height: 0;
                        width: 0;
                        overflow: hidden;
                        visibility: hidden;
                        display: inline-block;
                    }

                    .el-submenu__icon-arrow {
                        display: none;
                    }
                }
            }

            .el-tooltip {
                padding: 0 10px !important;
            }
        }

        .horizontal-collapse-transition {
            transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
        }
    }
}
</style>
