<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * 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",
        "riskAppvoreText",
        "taskLedger",
        "riskManage",
        "riskExecution",
        "riskAssess",
        "riskApprove",
        "taskList",
        "taskDetail"
      ],
      // 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>
