<template>
    <div>
        <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>
    </div>
</template>

<script>
import _ from 'lodash';

export default {
    name: 'purview-menu',
    data() {
        return {
            purviews: this.$oriPurviews,
            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">
$menuBg: #495060;
$collapseMenuBg: #313540;
$collapseMenuWidth: 200px;
$collapseWidth: 50px;
$collapseLeftBorder: 2px;

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

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

    .nor {
        display: inline-block;
    }
}

.layout-menu-foot {
    padding-left: 34px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: left;
    font-size: 13px;
    color: #fff;

    a {
        color: #fff;
    }
}

.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: $collapseMenuBg !important;
            display: none;
            position: absolute;
            top: 49px;
            left: $collapseWidth - $collapseLeftBorder;
            z-index: 999;
            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: $collapseMenuBg;
            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>