<template>
    <el-container id="app">
        <el-header class="header" height='68px'>
            <div class="logo-wrapper">
                <img src="../assets/logo.png" alt="">
            </div>
            <div style="flex-grow: 1; margin-left: 20px; font-size: 18px;">
                <router-link :to="{name:'dashboard'}">牧业2.0系统</router-link>
            </div>

            <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>

            <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"/> -->
                <div class="header-btn">
                    <div>
                        <i class="fas fa-cog fa-fw" style="font-size: 20px;color:#fff"></i>
                    </div>
                </div>

                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <el-container>
            <el-aside class="aside">

                <div class="userInfo" :style="{height:collapse?'100px':'220px'}">
                    <img :style="{height:collapse?'30px':'70px',width:collapse?'30px':'70px'}" :src="userInfo ? userInfo.icon || '' : ''" class="avatar" />
                    <div v-if="!collapse" class="name">{{userInfo.username}}</div>
                    <div v-if="!collapse" class="workNumber">{{userInfo.workNumber}}</div>
                </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="#232E3B">
                </nav-menu>
            </el-aside>
            <el-container>
                <el-header height='40px' style='padding:0'>
                    <el-tabs class="head-tabs" height='40px' v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab" @tab-click="chooseOne">
                        <el-tab-pane v-for="(item, index) in loginHistory" :key="item.name" :label="item.title" :name="item.name">
                        </el-tab-pane>
                    </el-tabs>
                </el-header>
                <router-view v-if="pageStyle=='手持机录入'" class='main elseMian'></router-view>
                <el-main class="main" v-else>
                    <router-view></router-view>
                </el-main>

            </el-container>
        </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,
            editableTabsValue2: '/dashboard',
            flag: true
        }
    },
    computed: {
        ...mapState(['userInfo', 'loginHistory', 'chooseLogin']),
        pageStyle() {
            var str = '普通'
            if (this.$route.meta) {
                if (this.$route.meta.type) {
                    str = this.$route.meta.type
                }
            }
            return str
        }
    },
    methods: {
        findActiveMenu() {
            var list = [...this.loginHistory]
            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;
                        if (this.flag) {
                            var flag = false
                            list.forEach(item => {
                                if (item.name == i.href) {
                                    flag = true
                                }
                            })
                            if (!flag) {
                                list.push({
                                    name: i.href,
                                    title: i.name
                                })
                                this.$store.commit('updateLoginHistory', list)
                                this.editableTabsValue2 = i.href
                            }

                        }


                    } 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');
                    }
                })
            }else if (command === 'changePassword') {
                this.$router.push('/changePassword');
            }

        },
        removeTab(temp) {
            console.log(temp)
            var list = [...this.loginHistory]

            list.forEach((item, index) => {
                if (item.name == temp) {
                    list.splice(index, 1)
                }
            })

            if (list.length == 0) {
                list.push({
                    name: '/dashboard',
                    title: '首页'
                })
            }


            this.$store.commit('updateLoginHistory', list)
            setTimeout(() => {
                if (temp == this.editableTabsValue2) {

                    this.$router.push({
                        path: list[0].name
                    })
                    this.$store.commit('updateChooseLogin', list[0].name)

                }

            }, 100);
        },
        chooseOne(item) {
            this.$router.push({
                path: item.name
            })
            this.editableTabsValue2 = item.name
        }
    },
    watch: {
        $route(val) {
            this.findActiveMenu(this.rawMenus);
            this.flag = false
        },
        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();
        },
        chooseLogin() {
            if (this.chooseLogin) {
                this.editableTabsValue2 = this.chooseLogin
            }
        }
    },
    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: #fff;
    background-color: #409eff;
    display: flex;
    align-items: center;
    padding-left: 0;
    // border-bottom: 1px solid #dcdfe6;
    height: 68px;

    .logo-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 20px;
        font-weight: 700;
        // background: fade(black, 20%);
        padding-left: 15px;
        img {
            height: 36px;
        }
    }

    .header-btn {
        width: 60px;
        height: 68px;
        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: #fff;
            font-weight: bold;
        }
    }
}

.aside {
    background: #232e3b;
    transition: all 0.4s ease;
    -ms-overflow-style: none;

    .userInfo {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 220px;
        img {
            width: 70px;
            height: 70px;
            border-radius: 100%;
            margin-top: 20px;
        }

        .name {
            font-size: 20px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 28px;
            margin-top: 12px;
        }

        .workNumber {
            font-size: 14px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            line-height: 20px;
        }
    }
}

.aside::-webkit-scrollbar {
    display: none;
}

.main {
    background-color: #f2f4f5;
    &.elseMian {
        padding: 20px;
    }
}
</style>
