<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * Copyright (c) 2020 陈尼克 all rights reserved.
 * 版权所有，侵权必究！
 *
-->
<template>
  <div id="app">
      <!-- :style="{ height: showTab ?appHeight:'100%' }"   之前是给id为app-content 设置的内联样式  id="app-content" -->
      <div>
          <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: [
          'riskAdd'
          ],
          // 不需要展示底部tabbar的页面
          noTab:["login", "login2", 'addCurrent','addPresent','addInherent','riskInherent',"choose-people","scan",'success','fail','warn','center','reset-pas-two','riskTaskList','riskBigDetail','riskView','resultPage'],
           // cachePage预先定义的缓存页面
          otherCache: [],
           // 专门处理列表缓存的页面，这些页面缓存逻辑与其他缓存不一样去详情返回列表缓存，但是进入列表必须刷新,如何有需要缓存的列表请放到这里来。
          listCache:['insert-danger','confirme-danger','change-danger','review-danger','stand-book','major-danger','delay-approval',
          'my-delay','risk-account','risk-confirme','my-delay'],
          // 'report-return', 'risk-return', 风险和隐患的上报退回不需要缓存
      };
  },

  mounted() {
      // 这个配合列表路由使用缓存初始缓存页面
      this.otherCache=[...this.cachePage];
      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 !this.noTab.includes(
              this.$route.name
          );
      },
  },
  methods:{
      // 处理缓存的方法
      handleCache(roterFromName, roterToName, markRoterName){
          if(roterToName == markRoterName){
              // 从定义缓存列表中移除
              if(this.cachePage.findIndex(item => item == roterFromName) != -1){
                  this.cachePage.splice(this.cachePage.findIndex(item => item == roterFromName), 1)
              }
          }else{
              // 判断有无路由 加入缓存
              if(this.cachePage.findIndex(item => item == roterFromName) == -1){
                  this.cachePage.push(roterFromName)
              }
          }
      }
  },
  watch: {
      $route(to, from) {
          // 列表操作去除缓存，刷新列表页
          if(from.name == 'confirme-danger' || to.name=='confirme-danger'){  // 隐患整改页面缓存处理
              this.handleCache('confirme-danger', to.name, 'affirm-danger')
          }else if(from.name == 'change-danger' || to.name=='change-danger'){  // 隐患整改页面缓存处理
              this.handleCache('change-danger', to.name, 'change-info')
          }else if(from.name == 'review-danger' || to.name=='review-danger'){  // 隐患复查页面缓存处理
              this.handleCache('review-danger', to.name, 'review-add')
          }else if(from.name == 'major-danger' || to.name=='major-danger'){  // 企业审批页面缓存处理
              this.handleCache('major-danger', to.name, 'major-survey')
          }else if(from.name == 'risk-confirme' || to.name=='risk-confirme'){  // 风险确认页面缓存处理
              this.handleCache('risk-confirme', to.name, 'risk-affirm')
          }


          // 列表页面动态添加缓存
          if(from.name=='save-workbench'){
              // 如何使从工作台进入列表页面在cachePage里添加页面
              if((!this.cachePage.includes(to.name))&&this.listCache.includes(to.name)){
                  this.cachePage.push(to.name)
              }
          }
          if(to.name=='save-workbench'){
              // 如何回到工作台默认恢复预定义缓存页面
             this.cachePage=[...this.otherCache];
          }

          // 有主级到次级
          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{
background-color: #f0f1f5;
}
#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;
  // background-color: #f0f1f5;
  // z-index:999999999999
}
#app-content {
  box-sizing: border-box;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  // padding-bottom: 1.3333rem;
  height: 100%; // 此处新增height 为了解决ios适配问题
}

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



  width: 100%;
  height: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #f0f1f5;
  overflow: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 50px;
  box-sizing: border-box;
}

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