<template>
    <div class="aside">
        <div class="aside-logo" v-show="!aside_collapsed">
            <span>昆船随行式垛机监测系统</span>
        </div>
        <a-menu
            :selectedKeys="selectedKeys"
            :openKeys.sync="openKeys"
            @click="clickMenu"
            mode="inline"
            theme="dark"
            :inline-collapsed="aside_collapsed"
        >
            <template v-for="item in routes">
                <!-- 如果没有子路由 -->
                <a-menu-item :key="item.name" v-if="!item.meta.unfold">
                    <a-icon :type="item.meta.icon" />
                    <span>{{ item.meta.name }}</span>
                </a-menu-item>
                <!-- 存在子路由 -->
                <aside-item :key="item.name" :menuInfo="item" v-else></aside-item>
            </template>
        </a-menu>
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    name: "theAside",
    computed: {
        ...mapState(["aside_collapsed", "userInfo"])
    },
    watch: {
        $route() {
            console.log("123");
            this.setRoute();
        }
    },
    data() {
        return {
            selectedKeys: [],
            openKeys: [],
            routes: []
        };
    },
    methods: {
        clickMenu(item) {
            this.$router.push({
                name: item.key
            });
        },
        // 设置路由
        setRoute() {
            console.log(
                "this.$router.options.routes[0].children",
                this.$router.options.routes[0].children
            );
            // 由于目前页面权限和操作权限没分登录level
            // 所以需要先匹配出有权限的路由
            let parents = this.$router.options.routes[0].children.filter(
                ele => {
                    if (
                        this.userInfo.permissionList.some(item => {
                            return (
                                item.rights === ele.name &&
                                ele.name.indexOf("personal") < 0
                            );
                        })
                    ) {
                        return ele;
                    }
                }
            );
            // // 递归权限路由
            let recursionRoute = parents => {
                for (let i = 0; i < parents.length; i++) {
                    let isAuth = this.userInfo.permissionList.some(item => {
                        return parents[i].name === item.rights;
                    });
                    parents[i].meta.auth = isAuth;
                    parents[i].children &&
                        parents[i].children.length > 0 &&
                        recursionRoute(parents[i].children);
                }
            };
            recursionRoute(parents);

            // 无权限测试时
            // let parents = this.$router.options.routes[0].children.filter(
            //     item => {
            //         return !item.name.startsWith("center");
            //     }
            // );
            this.routes = parents;

            this.initialKeys();
        },
        initialKeys() {
            console.log("this.$route.matched", this.$route.matched);
            // 选中
            if (this.$route.matched[1].meta.unfold) {
                if (this.$route.matched.length > 3) {
                    this.selectedKeys = [this.$route.matched[2].name];
                } else {
                    this.selectedKeys = [
                        this.$route.matched[this.$route.matched.length - 1].name
                    ];
                }
            } else {
                this.selectedKeys = [this.$route.matched[1].name];
            }
            console.log("selectedKeys", this.selectedKeys);
            // this.$route.matched[1].meta.unfold ? this.selectedKeys = [this.$route.matched[2].name] : this.selectedKeys = [this.$route.matched[1].name]
            // 展开
            this.$route.matched[1].meta.unfold
                ? this.openKeys.push(this.$route.matched[1].name)
                : (this.openKeys = [""]);

            this.$forceUpdate();
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.setRoute();
        });
    }
};
</script>
<style lang="scss">
.aside {
    height: 100vh;
    color: #fff;
    position: relative;
    box-shadow: 2px 0px 6px 0px rgba(0, 21, 41, 0.35);
    z-index: 1000;
    &-logo {
        height: 65px;
        display: flex;
        align-items: center;
        background-color: #00284d;
        padding-left: 24px;
        span {
            font-size: 18px;
            font-weight: bold;
            margin-left: 24px;
        }
    }
    .ant-menu-inline {
        width: 256px;
    }
}
</style>
