<template>
    <div id="app">
        <el-container class="is-vertical fullheight">
            <template v-if="!$route.meta.single">
                <Navigator :menuShow.sync="menuShow" />
                <el-container style="overflow-x: hidden; overflow-y: hidden">
                    <Menu
                        @menuChange="handleMenuChange"
                        :menuShow.sync="menuShow"
                    />
                    <el-main
                        class="main-container"
                        :class="$route.meta.isHome ? 'home-page' : ''"
                    >
                        <transition :name="transitionName" mode="out-in" appear>
                            <el-card
                                class="app-box__card"
                                :class="{
                                    'box-card-noheader':
                                        $route.meta.isHome || !showHeader,
                                    'single-sepical':
                                        $route.path ==
                                        '/sysplat/tenantInfoManager',
                                }"
                                shadow="never"
                                v-if="showPage"
                                :key="$route.path"
                            >
                                <!-- <div
                                    v-if="showHeader && !$route.meta.isHome"
                                    slot="header"
                                    class="clearfix"
                                >
                                    <el-breadcrumb separator="/">
                                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                                        <el-breadcrumb-item>{{
                                            currentMenuLabel
                                        }}</el-breadcrumb-item>
                                    </el-breadcrumb>
                                </div> -->

                                <keep-alive v-if="!$route.meta.keepAlive">
                                    <router-view
                                        class="fullheight"
                                        @menuChange="handleMenuChange"
                                    ></router-view>
                                </keep-alive>
                                <router-view
                                    v-else
                                    class="fullheight"
                                    @menuChange="handleMenuChange"
                                ></router-view>
                            </el-card>
                            <el-card
                                class="app-box__card"
                                :class="{
                                    'box-card-noheader': !showHeader,
                                    'single-sepical':
                                        $route.path ==
                                        '/sysplat/tenantInfoManager',
                                }"
                                shadow="never"
                                :key="$route.path"
                                v-else
                            >
                                <keep-alive v-if="!$route.meta.keepAlive">
                                    <router-view
                                        class="fullheight"
                                        @menuChange="handleMenuChange"
                                    ></router-view>
                                </keep-alive>
                                <router-view
                                    v-else
                                    class="fullheight"
                                    @menuChange="handleMenuChange"
                                ></router-view>
                            </el-card>
                        </transition>
                    </el-main>
                </el-container>
            </template>
            <transition :name="transitionName">
                <router-view v-if="$route.meta.single" />
            </transition>
        </el-container>
    </div>
</template>
<script>
import {mapState} from 'vuex'
import Navigator from '@/views/Navigator.vue'
import Menu from '@/views/Menu.vue'
import menu from '@/api/menu.js'
import portal from '@/api/portal.js'
export default {
    name: 'app',
    components: {Navigator, Menu},
    computed: {
        ...mapState({
            hasToken: (state) => state.login.hasToken,
        }),
    },
    data() {
        return {
            showHeader: true,
            currentMenuLabel: '',
            menuShow: true,
            transitionName: 'fold-right',
            showPage: true,
            getToken: false,
            timer: null,
        }
    },
    mounted() {
        window.onresize = () => {
            this.$root.$emit('resize')
        }
    },
    watch: {
        $route(to, from) {
            if (!to.hash) {
                this.showPage = !this.showPage
                const toDepth = to.path.split('/').length
                const fromDepth = from.path.split('/').length
                this.transitionName =
                    toDepth < fromDepth ? 'fold-right' : 'fold-left'
            }
        },
    },
    methods: {
        handleMenuChange(menu) {
            this.currentMenuLabel = menu.name
            this.showHeader = !(menu.children && menu.children.length > 0)
        },
    },
}
</script>
<style lang="scss" scoped>
.fold-left-enter-active {
    animation: fold-left-in 0.5s;
}
.fold-left-leave-active {
    animation: fold-left-on 0.5s;
}
@keyframes fold-left-in {
    0% {
        transform: translate3d(-10%, 0, 0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
@keyframes fold-left-on {
    0% {
        transform: translate3d(0%, 0, 0);
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        transform: translate3d(10%, 0, 0);
        opacity: 0;
    }
}

#app {
    background: #f5f5f5;
    height: 100%;
}
.main-container {
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding: 10px;
    background-color: #ebeef5;
    background: url(../../assets/img/loading.gif) no-repeat 50% #ebeef5;
}
.main-container > .el-card {
    box-shadow: 0px 0px 12px 0 rgba($color: #000000, $alpha: 0.1);
}
.home-page > .el-card {
    box-shadow: none;
}
.el-main > .el-card {
    border-radius: 0;
}

.app-box__card {
    height: 100%;
}

.app-box__card /deep/ > .el-card__header {
    padding: 12px 20px;
    margin-bottom: 10px;
}

.app-box__card /deep/ > .el-card__body {
    height: calc(100% - 20px);
    padding: 0;
}
.single-sepical.app-box__card /deep/ > .el-card__body {
    height: 100%;
}

.home-page > .app-box__card /deep/ > .el-card__body {
    height: 100% !important;
}

.box-card-noheader /deep/ > .el-card__body {
    height: 100% !important;
}

>>> .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: rgba(155, 194, 230, 0.2) !important;
}
>>> .el-breadcrumb__item:last-child .el-breadcrumb__inner {
    color: #211bce;
    font-weight: bold;
}
</style>
