<template>
  <div
    id="app"
    :class="{'is-ipx':isIPX == 1}"
  >
    <transition :name="routerAnimate">
      <keep-alive :include="keepAlive">
        <router-view class="app-content"></router-view>
      </keep-alive>
    </transition>
    <!-- <transition :name="routerAnimate">
      <router-view class="app-content" v-if="!$route.meta.keepAlive"></router-view>
    </transition> -->
    <!--底部导航 路由 -->
    <footer
      class="app-footer"
      v-if="$route.meta.index == 1 && carTabFlag!=2"
    >
      <wx-tab :tab="tabIndex"></wx-tab>
    </footer>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import wxTab from '@/components/common/tab'
export default {
  name: 'app',
  components: {
    wxTab,
  },
  data () {
    return {
      "tabIndex": 1,
      "pageName": "",
      "routerAnimate": "",
      keepAlive: ['cHome'],
      aliveRoute: ['screeningMap', 'screeningFiles']
    }
  },
  watch: {
    // 监听 $route 为内页设置不同的过渡效果
    "$route" (to, from) {
      /*动态设置路由缓存 start*/
      if (this.aliveRoute.includes(to.name)) {
        to.meta.keepAlive = true
      }
      let aliveRoute = this.$router.options.routes.filter(e => e.meta && e.meta.keepAlive).map(e => e.name)
      this.keepAlive = aliveRoute
      /*动态设置路由缓存 end*/
      // console.log(aliveRoute);
      if (to.path == "/homePageIdx") {
        this.tabIndex = 0
        this.setCarTabFlagData(1);
        this.$forceUpdate();
      } else if (to.path == "/categoryIdx") {
        this.tabIndex = 1
        this.setCarTabFlagData(1);
      } else if (to.path == "/carIndex") {
        this.tabIndex = 2
        this.$forceUpdate();
      } else if (to.path == "/userIndex") {
        this.setCarTabFlagData(1);
        this.tabIndex = 3
      }
      this.routerAnimate = ""
      if (to.meta.index === from.meta.index) {
        return;
        // this.routerAnimate = "slide-left"
      }
      //都有值时
      if (to.meta.index && from.meta.index) {
        if (to.meta.index > from.meta.index) {//前进
          this.routerAnimate = "slide-left"
        } else {//后退
          this.routerAnimate = "slide-right"
        }
      }
      // 如果 该路由 在 免登录之外 且 loginFlg 状态为 需要登录 则跳转登录页
      // console.log(this.$store.state.userInfo, '-this.userInfo');

      // if (!this.$normalPage().toString().includes(this.$route.path) && (!this.userInfo.loginFlg || this.userInfo.loginFlg != '1')) {
      //   console.log("检验未通过，走index")
      //   this.$router.push({
      //     path: "/index",
      //   });
      // }
    },
  },
  computed: {
    isIPX () {
      // console.log(this.$store.state.isLogin)
      return this.$store.state.isIPX
    },
    userInfo () {
      return this.$store.state.userInfo || {}
    },
    carTabFlag () {
      return this.$store.state.carTabFlag
    }

  },
  methods: {
    ...mapActions(['setIsFromShareAction', 'setCarTabFlagData']),

  },
  created () {

  },

  mounted () {
  }

}
</script>
<style lang="scss">
/*将公用的样式统一在此导入*/
@import './assets/css/base.css';
@import './assets/css/vuex-ui.css';
@import './assets/css/vant-ui.css';
@import './assets/iconfont.css';

html,
body {
  width: 100%;
  height: 100%;
  font-size: 16px;
  //overflow: hidden;
}

html {
  font-size: calc(100vw / 7.5); /*1rem = 100px*/
}

#app {
  height: 100%;
  width: 100%;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  /*opacity: 0;*/
  display: none;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  /*opacity: 0;*/
  display: none;
  transform: translate3d(-100%, 0, 0);
}
</style>