<template>
    <Menu theme="dark" width="auto" :accordion="true" :open-names="openNames" @on-select="open" :active-name="activeName">
        <div class="layout-logo-left"></div>
        <Submenu :name="purview.id" v-for="purview in purviews" :key="purview.id" >
            <template slot="title">
                <div class="nor">
                    <Icon type="ios-navigate"></Icon>
                    {{purview.menu_name}}
                </div>
                <div class="collapse">
                    {{purview.menu_name[0]}}
                </div>
            </template>
            <Menu-item :name="subPurview.id" v-for="subPurview in purview.sub" :key="subPurview.id">{{subPurview.menu_name}}</Menu-item>
        </Submenu>
    </Menu>
</template>

<script>
import _ from 'lodash';

export default {
    name: 'purview-menu',
    data() {
        return {
            purviews: this.$oriPurviews, // TODO 根据用户权限，初始化菜单
            openNames: [],
            activeName: ''
        };
    },
    created() {
        this.render(_.get(this.$router, 'history.current'));
    },
    methods: {
        render(to) {
            let path = to.path;
            let menu = _.find(this.$purviews, purview => purview.menu_url === path);

            if (menu) {
                this.activeName = menu.id;
                if (menu.pMenu) {
                    this.openNames = [menu.pMenu.id];
                }
            }
        },
        open(menuId) {
            let menu = _.find(this.$purviews, purview => purview.id === menuId);

            if (menu) {
                this.$router.push(menu.menu_url);
            }
        }
    },
    watch: {
        $route(newRoute) {
            this.render(newRoute);
        }
    }
};
</script>

<style lang="scss">
$collapseMenuWidth: 200px;
$collapseWidth: 50px;
$collapseLeftBorder: 2px;

@mixin submenuHover {
    .ivu-menu-submenu-title {
        margin-left: 0;
        border-left: solid 2px #fff;
        background-color: #313540 !important;
        transition: border 0s;
    }
}

.ivu-menu-submenu-title {
    .collapse {
        display: none;
    }

    .nor {
        display: inline-block;
    }
}

.menu-collapse {
    .layout-logo-left {
        background: none;
        color: #fff;
        font-size: 18px;
        text-align: center;
        font-style: italic;

        &:before {
            content: "Yoho!";
        }
    }

    .ivu-menu-submenu {
        position: relative;
        margin-left: 2px;

        &:hover {
            .ivu-menu {
                display: block !important;
            }

            .nor {
                display: block;
            }
        }

        &:hover,
        &.ivu-menu-item-active {
            @include submenuHover;
        }

        .ivu-menu {
            background: #313540 !important;
            display: none;
            position: absolute;
            top: 49px;
            left: $collapseWidth - $collapseLeftBorder;
            z-index: 2;
            width: $collapseMenuWidth;
        }
    }

    .ivu-menu-submenu-title {
        position: initial !important;
        padding: 0 !important;
        width: 100%;
        height: $collapseWidth - $collapseLeftBorder;
        justify-content: center;
        align-items: center;
        display: flex;

        .ivu-icon-ios-arrow-down {
            display: none;
        }

        .nor {
            display: none;
            position: absolute;
            height: 49px;
            width: $collapseMenuWidth;
            left: $collapseWidth - $collapseLeftBorder;
            top: 0;
            background-color: #313540;
            z-index: 2;
            line-height: 49px;
            padding-left: 43px;
            color: #fff !important;
            cursor: initial;
        }

        .collapse {
            width: 30px;
            height: 30px;
            margin: 0 auto;
            display: block;
            line-height: 30px;
            text-align: center;
            font-size: 20px;
            background-color: #fff;
            color: #464c5b;
            border-radius: 50%;
            overflow: hidden;
        }
    }
}
</style>