<template>
    <el-container class="layout">
        <el-aside :width="sideWidth">
            <Sidebar :menus.sync='menus' />
        </el-aside>
        <el-container class="container">
            <el-header class="header">
                <Header />
            </el-header>
            <el-main class="content">
                <Tab />
                <Main />
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import Header from './component/Header.vue'
import Sidebar from './component/Sidebar.vue'
import Main from './component/Main.vue'
import Tab from './component/Tab.vue'

import { getMenus } from '@/api/user'
import { auth } from '@/utils/auth'

import variables from '@/styles/variables.scss'

export default {
    components: {
        Header,
        Sidebar,
        Tab,
        Main
    },
    data() {
        return {
            menus: null,
        }
    },
    computed: {
        userIsLogin() {
            return this.$store.state.user.user !== null
        },
        isCollapse() {
            return this.$store.state.app.collapsed || false
        },
        sideWidth() {
            return this.isCollapse ? variables.sideBarMinWidth : variables.sideBarWidth
        },
        token() {
            return auth.getToken()
        }
    },
    mounted() {
        this.getLoginMenus()
    },
    methods: {
        getLoginMenus() {
            getMenus().then(res => {
                if (res.code === 0 && res.data && res.data.length > 0) {
                    this.menus = res.data
                    this.$store.dispatch('app/saveMenus', res.data)
                    const target = this.$route.fullPath
                    if (target && target !== '/') {
                        setTimeout(() => {
                            this.$router.push(target)
                        }, 100);
                    }
                    else if (res.data && res.data.length > 0) {
                        const first = res.data[0]
                        if (first.path) {
                            setTimeout(() => {
                                this.$router.push(first.path)
                            }, 100);
                        }
                    }
                }
                else {
                    this.$router.push('/401');
                }
            })
        }
    }
};
</script>

<style lang='scss' scoped>
@import '@/styles/variables.scss';

.layout {
    width: 100%;
    height: 100%;
}
.container {
    overflow: hidden;
    // height: 100%;
}
.header {
    background-color: #FFFFFF;
    padding: 0 14px;
    height: $headerHeight !important;
    line-height: $headerHeight !important;
    border-bottom: 1px solid #f0f0f0;
}
.content {
    background-color: #F5F5F5;
    height: 100%;
    overflow: hidden;
}
.ant-tabs-tabpane {
    padding: 4px 8px;
}
</style>