<template>
    <div class="sidebar">
        <div class="logo">
            <img :src="logo" alt="" srcset="">
            <span v-show="!isCollapse">消防执法监管系统</span>
        </div>
        <el-menu class="menus" background-color="#001529" :default-active="selectedKeys" :default-openeds="openKeys" text-color="#fff" @select="handleClick" :collapse="isCollapse">
            <template v-for="i in menus">
                <el-submenu v-if="i.sub_menus && i.sub_menus.length!=0" :index="i.id" :key="i.id">
                    <template slot="title">
                        <i :class="i.icon" />
                        <span slot="title">{{i.name}}</span>
                    </template>
                    <el-menu-item v-for="k in i.sub_menus" :key="k.id" :index="k.id">{{k.name}}</el-menu-item>
                </el-submenu>
                <el-menu-item v-else :key="i.id" :index="i.id">
                    <i :class="i.icon" />
                    <span slot="title">{{i.name}}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<script>
import LOGO from '@/assets/logo.png'

export default {
    props: ['menus'],
    data() {
        return {
            openKeys: [],
            logo: LOGO,
            lastkey: null,
            selectedKeys: ''
        }
    },
    computed: {
        isCollapse() {
            return this.$store.state.app.collapsed || false
        },
        rootSubmenuKeys() {
            if (this.menus && this.menus.length > 0) {
                const res = []
                this.menus.map(item => {
                    res.push(item.id)
                })
                return res
            }
            return []
        },
    },
    watch: {
        '$route'(to,from){
            const target = this.getRouteInfo(to.path)
            if (target) {
                this.selectedKeys = target.id
                if (this.lastkey !== target.id) {
                    this.lastkey = target.id
                }
            }
        },
        menus(n) {
            if (n && n.length > 0) {
                this.configDefaultData()
            }
        }
    },
    methods: {
        configDefaultData() {
            const matched = this.$route.matched
            if (matched.length > 0) {
                const t = matched[matched.length - 1]
                const path = t.meta && t.meta.parent ? t.meta.parent : t.path
                // const path = item.redirect ? item.redirect : item.path
                this.configDefaultRoute(path)
            }
            
        },
        configDefaultRoute(path) {
            const data = this.getRouteInfo(path)
            if (data) {
                if (data.parentId) {
                    this.openKeys = [data.parentId]
                }
                this.selectedKeys = data.id
            }
        },
        getRouteInfo(path, list) {
            if (!list) {
                list = this.menus || []
            }
            for (let index = 0; index < list.length; index++) {
                const item = list[index]
                if (item.url === path) {
                    return item
                }
                if (item.sub_menus && item.sub_menus.length > 0) {
                    const res = this.getRouteInfo(path, item.sub_menus)
                    if (res) {
                        return res
                    }
                }
            }
            return null
        },
        onOpenChange(openKeys) {
            const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
            if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
                this.openKeys = openKeys;
            } else {
                this.openKeys = latestOpenKey ? [latestOpenKey] : [];
            }
        },
        handleClick(key) {
            if (this.lastkey === key) {
                return
            }
            this.lastkey = key

            let have = false
            for (let i = 0; i < this.menus.length; i++) {
                const item = this.menus[i]
                if (item.sub_menus && item.sub_menus.length > 0) {
                    for (let j = 0; j < item.sub_menus.length; j++) {
                        const child = item.sub_menus[j]
                        if (key === child.id) {
                            have = true
                            this.$router.push(child.url)
                            break
                        }
                    }
                }
                else if (key === item.id) {
                    have = true
                    this.$router.push(item.url)
                    this.openKeys = []
                }
                if (have) {
                    break
                }
            }
        },
    }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.el-menu {
    border-right: none !important;
}

.sidebar {
    // width: $sideBarWidth;
    background: #001529;
    height: 100%;
    .logo {
        width: 100%;
        height: $headerHeight;
        line-height: $headerHeight;
        display: flex;
        align-items: center;
        justify-content: center;
        &>img {
            height: calc(#{$headerHeight} - 20px);
        }
        &>span {
            color: #FFFFFF;
            font-size: 14px;
            font-weight: bolder;
            margin-left: 8px;
        }
    }
    .menus {
        height: $sideMenuHeight;
        overflow-y: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .menus::-webkit-scrollbar {
        display: none;
    }
}
</style>