<template>
    <div id="SiderMenu" class="slider-menu ps-r">
        <el-menu
            :default-active="$route.path"
            :collapse="collapsed"
            class="el-menu-vertical-demo ptb20 border-box"
            text-color="#606266"
            router
        >
            <MenuTree :data-arr="navList" :collapse="collapsed" />
        </el-menu>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import MenuTree from './MenuTree';

import { getStorage } from '@/tool/storage';

export default {
    name: 'SiderMenu',
    components: {
        MenuTree
    },
    props: {
        collapsed: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            navList: [],
            openedTab: [],
            menuPath: ''
        };
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.userInfo
        })
    },
    watch: {
        $route() {
            // 选中路由
            this.getNavList();
        }
    },
    created() {
        this.getNavList();
    },
    methods: {
        getNavList() {
            const allRouters = this.$router.options.routes.find(childR => childR.name === 'main').children;
            this.navList = getStorage({ name: 'menuTree' }) || [];
            this.getActivePath(this.$route.name, allRouters);
        },
        getActivePath(name, allRouters) {
            allRouters.forEach(item => {
                this.menuPath = '';
                if (item.name === name) {
                    this.navList.forEach((list, keyIndex) => {
                        list.children.forEach(lc => {
                            lc['defaultActive'] = lc.path === item.path;
                            list['open'] = lc.path === item.path;
                        });
                    });
                } else {
                    this.getPath(item.children, name, item.path);
                }
            });
        },
        getPath(arr, name, path) {
            if (arr !== undefined && arr.length > 0) {
                arr.forEach(c => {
                    this.menuPath = '';
                    if (c.name === name) {
                        this.navList.forEach((list, keyIndex) => {
                            list.children.forEach(lc => {
                                lc['defaultActive'] = lc.path === path;
                                list['open'] = lc.path === path;
                                if (lc.path === path) {
                                    this.openeds = [keyIndex + ''];
                                }
                            });
                        });
                    } else {
                        this.getPath(c.children, name, path);
                    }
                });
            } else {
                this.menuPath = '';
            }
        }
    }
};
</script>

<style scoped lang="less">
#SiderMenu {
	height: calc(100% - 48px);
	box-sizing: border-box;

	.el-menu-vertical-demo {
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}
}
</style>
