<template>
    <el-container id="app">
        <el-aside class="aside">
            <div class="logo-wrapper">Logo</div>
            <!-- <el-menu :collapse="collapse" background-color="#324157" text-color="#BFCBD9" active-text-color="#20A0FF" :unique-opened="true" :router="true" :default-active="activeMenu" style="border-right: 1px solid #545c64" class="el-menu-vertical-demo">
                <sys-menu v-for="item in menus" :menu="item" :key="item.id"></sys-menu>
            </el-menu> -->
            <nav-menu :menus="menus" :activeId="activeMenu" :collapse="collapse" :width="220" theme="#324157">
            </nav-menu>
        </el-aside>
        <el-container>
            <el-header class="header">
                <div class="header-btn" @click="collapse=!collapse">
                    <div :style="{transform: collapse ? 'rotate(90deg)' : ''}">
                        <i class="fas fa-bars" style="font-size: 20px;"></i>
                    </div>
                </div>
                <div style="flex-grow: 1; margin-left: 20px;">
                    <router-link :to="{name:'dashboard'}">一个很厉害的后台管理</router-link>
                </div>

                <el-tooltip effect="dark" :content="isFullscreen ? '退出全屏' : '全屏'" placement="bottom" :open-delay="1000">
                    <div class="header-btn" @click="toggleFullScreen" ref="fullscreen">
                        <i class="fas fa-expand" style="font-size: 20px;"></i>
                    </div>
                </el-tooltip>

                <el-dropdown @command="onCommand" style="margin-left: 20px;">
                    <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-main>
                <router-view></router-view>
            </el-main>
        </el-container>

    </el-container>
</template>

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

export default {
    name: 'App',
    mounted() {
        this.getMenus();
        let fn = () => {
            this.isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;

        };
        document.addEventListener('fullscreenchange', fn);
        document.addEventListener('webkitfullscreenchange', fn);
        document.addEventListener('mozfullscreenchange', fn);
        document.addEventListener('MSFullscreenChange', fn);
    },
    data() {
        return {
            rawMenus: [],
            menus: [],
            activeMenu: '',
            menuPath: [],
            collapse: false,
            isFullscreen: false
        }
    },
    computed: {
        ...mapState(['userInfo'])
    },
    methods: {
        findActiveMenu() {
            this.activeMenu = '';
            this.menuPath = [];
            let path = this.$route.path;
            const findActiveMenu = (parents, childMenus) => {
                childMenus.forEach(i => {
                    let parents_copy = [...parents];
                    if (i.href === path) {
                        parents_copy.push(i);
                        this.menuPath = parents_copy.map(i => i.name);
                        this.activeMenu = i.id;
                    } else {
                        if (i.children) {
                            parents_copy.push(i);
                            findActiveMenu(parents_copy, i.children);
                        }
                    }
                })
            };
            findActiveMenu([], this.rawMenus);
        },
        getMenus() {
            this.$http.get({
                url: '/sysMenu/userMenuTree',
                data: {
                    userId: this.userInfo.id
                }
            }).then(res => {
                if (res.success) {
                    this.rawMenus = res.data;
                    this.menus = res.data;
                    this.findActiveMenu();
                }
            })
        },
        toggleFullScreen() {
            this.isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
            let element = document.body;
            let requestMethod;
            if (this.isFullscreen) {
                requestMethod = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen;
            } else {
                requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
            }
            if (requestMethod) {
                requestMethod.call(this.isFullscreen ? document : element);
            }
        },
        onCommand(command) {
            if (command === 'logout') {
                this.$http.post({
                    url: '/auth/logout'
                }).then(res => {
                    if (res.success) {
                        this.$store.commit('updateUserInfo', null);
                        this.$router.replace('/login');
                    }
                })
            }
        }
    },
    watch: {
        $route(val) {
            this.findActiveMenu(this.rawMenus);
        },
        isFullscreen(val) {
            this.$refs.fullscreen.innerHTML = '';
            let i = document.createElement('i');
            i.style.fontSize = '20px';
            i.className = val ? 'fas fa-compress' : 'fas fa-expand';
            this.$refs.fullscreen.append(i);
            FontAwesome.dom.i2svg();
        }
    },
    components: {
        SysMenu,
        NavMenu
    }
}
</script>
<style lang="less">
.aside {
    width: auto !important;
    .el-menu {
        border: none !important;
        &:not(.el-menu--collapse) {
            width: 200px;
        }
    }
}
</style>
<style lang="less" scoped>
#app {
    height: 100%;
}

.header {
    color: #303133;
    background: #fff;
    display: flex;
    align-items: center;
    padding-left: 0;
    border-bottom: 1px solid #dcdfe6;
    .header-btn {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s;
        & > div {
            transition: all 0.3s;
        }
        &:hover {
            background: fade(black, 10%);
        }
    }
    .avatar {
        width: 40px;
        height: 40px;
        border: 1px solid #ebebeb;
        border-radius: 50%;
    }
    a {
        &:visited {
            color: #303133;
        }
    }
}

.aside {
    background: #324157;
    transition: all 0.4s ease;
    .logo-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        color: white;
        font-size: 20px;
        font-weight: 700;
        background: fade(black, 20%);
    }
}

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