<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * Copyright (c) 2020 陈尼克 all rights reserved.
 * 版权所有，侵权必究！
 *
-->
<template>
    <div id="app">
        <div :style="{ height: showTab ?appHeight:'100%' }" id="app-content">
            <transition :name="transitionName">
                <keep-alive :include="cachePage">
                    <router-view class="router-view" />
                </keep-alive>
            </transition>
        </div>
        <tab-bar v-if="showTab"></tab-bar>
    </div>
</template>

<script>
import tabBar from "@/components/TabBar";

export default {
    components: {
        tabBar,
    },
    data() {
        return {
            appHeight: "",
            tabH: "",
            rempx: 0,
            headH: "",
            screenH: "",
            transitionName: "slide-left",
            cachePage: [
                "add-danger",
                "change-info",
                "affirm-danger",
                "risk-affirm",
                "manager-survey",
                "super-survey",
                "major-survey",
                "risk-add",
                "noticeList",
                "confirmNote",
            ],
        };
    },

    mounted() {
        let tabH =
            document
                .getElementsByTagName("html")[0]
                .style.fontSize.split("px")[0] * 1.33333;
        let sH = document.documentElement.clientHeight;
        this.headH =
            document
                .getElementsByTagName("html")[0]
                .style.fontSize.split("px")[0] * 1.5;
        +"px";
        this.appHeight = sH - tabH + "px";
        this.tabH = tabH + "px";
        this.screenH = sH + "px";
    },
    computed: {
        showTab() {
            return !["login", "login2", "choose-people"].includes(
                this.$route.name
            );
        },
    },
    watch: {
        $route(to, from) {
            // 有主级到次级
            if (to.meta.index > from.meta.index) {
                this.transitionName = "slide-left"; // 向左滑动
            } else if (to.meta.index < from.meta.index) {
                // 由次级到主级
                this.transitionName = "slide-right";
            } else {
                this.transitionName = ""; //同级无过渡效果
            }
        },
    },
};
</script>

<style lang="less">
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    // text-align: center;
    color: #2c3e50;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    overflow: hidden;
    height: 100vh;
    // z-index:999999999999
}
#app-content {
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
}

.router-view {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
    background-color: #f0f1f5;
    overflow: auto;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
    height: 100%;
    will-change: transform;
    transition: all 500ms;
    position: absolute;
    backface-visibility: hidden;
}
.slide-right-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
</style>
