<template>
  <div id="app">
    <transition :name="transitionName">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" />
      </keep-alive>
    </transition>
    <transition :name="transitionName">
      <router-view v-if="!$route.meta.keepAlive"/>
    </transition>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pathList: [],
      transitionName: 'slide-left',
    }
  },
  watch: { // 监听路由变化
    $route (to, from) {
      // debugger;
      if (this.pathList.includes(to.path)) {
        const index = (this.pathList.findIndex(() => {
          return from.path
        }))
        this.pathList.splice(index, 1)
        this.$router.isBack = true
      } else {
        this.pathList.push(to.path)
        this.$router.isBack = false
      }
      if (to.path === '/home') {
        this.$router.isBack = true
        this.pathList = []
      }
      this.transitionName = 'router-slide-right'
      /*let isBack = this.$router.isBack
      if (isBack) {
        this.transitionName = 'router-slide-right'
      } else {
        this.transitionName = 'router-slide-left'
      }*/
      this.$router.isBack = false
    },
  },
  mounted () {
    // this.getAccessToken()
  },
  methods: {
    getAccessToken () {
      let vm = this
      let url = process.env.loginPath + 'appadmin'
      let param = {}
      vm.hlsHttp.post(url, param).then(function (res) {
        window.localStorage.setItem('access_token', res.access_token)
      })
    },
    onSwipeLeft () {
      this.$router.go(-1)
    },
  },
}
</script>

<style lang="less">
  @import "styles/variables";
  @import "styles/platform-wx";

  html, body, #app {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }

  //overflow: auto;
  //-webkit-overflow-scrolling: touch;
  //overflow-scrolling: touch;
</style>
