<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * Copyright (c) 2020 陈尼克 all rights reserved.
 * 版权所有，侵权必究！
 *
-->

<template>
  <div id="app" :style="{height:appHeight}">
      <transition :name="transitionName">
        <keep-alive :include="cachePage">
          <router-view class="router-view" />
        </keep-alive>
      </transition>
    <div :style="{height:tabH}"></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 = window.screen.height;
    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">
// body{
//   overflow: hidden;
// }
#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;
  // z-index:999999999999
}

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