<template>
    <el-container class="is-vertical fullheight">
        <template>
            <Navigator :menuShow.sync="menuShow" :showTopMenu="false" />
            <el-container style="overflow-x: hidden; overflow-y: hidden">
                <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"
                        >
                            <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>
    </el-container>
</template>

<script>
import Navigator from './Navigator.vue'
import menu from '@/api/menu.js'
import portal from '@/api/portal.js'
export default {
    components: {
        Navigator
    },
    data() {
        return {
            menuShow: true,
            currentMenuLabel: '',
            showHeader: true,
            menuStyle: 'sideMenu', // sideMenu  topMenu  topSide
            transitionName: 'fold-right',
            showPage: true
        }
    },
    mounted() {
        window.onresize = () => {
            this.$root.$emit("resize");
        };
        menu.getMenuByAlias(this.$route.name, (m) => {
            if (m) {
                this.$emit('menuChange', m)
            }
        })
    },
    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: {
        getAllDict() {
            portal.getSysDict().then((data) => {
                if (data) {
                    sessionStorage.setItem('dict_data', JSON.stringify(data))
                }
            })
        },
        handleMenuChange: function (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 {
    height: 100%;
}
.main-container {
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding: 0;
    padding-top: 15px;
    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;
    border: none;
    background-color: #e2e4eb;
}

.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: 100%;
    padding: 0;
    position: relative;
}
.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;
}
/deep/ .el-header{
    height: 55px !important;
}
</style>