<template>
    <el-container id="app">
        <el-header class="header">
            <div style="flex-grow: 1">享居屋的后台管理</div>
            <el-dropdown @command="onCommand">
                <img :src="userInfo ? userInfo.icon || '' : ''" class="avatar"/>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <el-container>
            <el-aside width="200px" class="aside">
                <!--<el-menu-->
                <!--background-color="#324157"-->
                <!--text-color="#BFCBD9"-->
                <!--active-text-color="#20A0FF"-->
                <!--:unique-opened="true"-->
                <!--:router="true"-->
                <!--style="border-right: 1px solid #545c64">-->
                <!--<el-submenu index="1">-->
                <!--<template slot="title"><i class="el-icon-menu"></i>菜单1</template>-->
                <!--<el-menu-item index="1-1" :route="{path:'/users'}">选项1</el-menu-item>-->
                <!--<el-menu-item index="1-2" :route="{path:'/user'}">选项2</el-menu-item>-->
                <!--</el-submenu>-->
                <!--</el-menu>-->
                <el-menu
                    background-color="#324157"
                    text-color="#BFCBD9"
                    active-text-color="#20A0FF"
                    :unique-opened="true"
                    :router="true"
                    :default-active="activeMenu"
                    style="border-right: 1px solid #545c64">
                    <sys-menu v-for="item in menus" :menu="item" :key="item.id"></sys-menu>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import SysMenu from '../components/SysMenu'
    import {mapState} from 'vuex'

    export default {
        name: 'App',
        created() {
            this.getMenus();
        },
        data() {
            return {
                rawMenus: [],
                menus: [],
                activeMenu: ''
            }
        },
        computed: {
            ...mapState(['userInfo'])
        },
        methods: {
            findActiveMenu() {
                let path = this.$route.path;
                const findActiveMenu = menus => {
                    menus.forEach(i => {
                        if (i.extra.href === path) {
                            this.activeMenu = i.id;
                        } else {
                            if (i.children) {
                                findActiveMenu(i.children);
                            }
                        }
                    })
                };
                findActiveMenu(this.rawMenus);
            },
            getMenus() {
                this.$http.get({
                    url: '/sysMenu/userMenuTree',
                    data: {
                        userId: this.userInfo.id
                    }
                }).then(res => {
                    if (res.success) {
                        const parse = trees => {
                            trees.sort((a, b) => {
                                return a.extra.sort - b.extra.sort;
                            });
                            return trees.map(i => {
                                let t = {
                                    id: i.id,
                                    label: i.name,
                                    parentId: i.parentId,
                                    extra: i.extra
                                };
                                if (i.children instanceof Array) {
                                    t.children = parse(i.children);
                                }
                                return t;
                            });
                        };
                        this.rawMenus = res.data;
                        this.menus = parse(res.data);
                        this.findActiveMenu();
                    }
                })
            },
            onCommand(command) {
                if (command === 'logout') {
                    this.$http.post({
                        url: '/userInfo/logout'
                    }).then(res => {
                        if (res.success) {
                            this.$store.commit('updateUserInfo', null);
                            this.$router.replace('/login');
                        }
                    })
                }
            }
        },
        watch: {
            $route() {
                this.findActiveMenu(this.rawMenus);
            }
        },
        components: {
            SysMenu
        }
    }
</script>

<style lang="less" scoped>
    #app {
        height: 100%;
    }

    .header {
        color: #D7E5F5;
        background: #20A0FF;
        display: flex;
        align-items: center;
        .avatar {
            width: 40px;
            height: 40px;
            border: 1px solid #ebebeb;
            border-radius: 50%;
        }
    }

    .aside {
        background: #324157;
    }

    .aside::-webkit-scrollbar {
        display: none
    }
</style>
