<template>
  <div id="app">
    <transition :name="transitionName" @afterLeave="clearTransition">
      <keep-alive :exclude="/-exclude$/">
        <router-view></router-view>
      </keep-alive>
    </transition>
  </div>
</template>

<script type="es6">
  import {mapState, mapActions, mapMutations} from 'vuex';

  const NameSpace = 'app';
  export default {
    name: NameSpace,
    data() {
      return {
        prevRoutes: []
      };
    },
    watch: {
      /* ========================================
       * Apply Slide Transition Effects For
       * Each Route Switch,Except Some Route That
       * Don't Need Transition Effect
       * ========================================= */
      $route(to, from) {
        let me = this;
        let transition = 'turn';
        // 同一个页面，不做记录
        if (to.name === from.name) return;

        if (!me.prevRoutes.length) me.$router.home = from;

        if (to.name === me.prevRoutes[me.prevRoutes.length - 1]) {
          transition = (from.meta.transition || transition) + '-off';
          me.setTransitionName(transition);
          me.prevRoutes.pop();
        } else {
          if (from.name != null) {
            transition = (to.meta.transition || transition) + '-on';
            me.setTransitionName(transition);
            me.prevRoutes.push(from.name);
          }
        }
      }
    },
    computed: {
      ...mapState(NameSpace, ['transitionName'])
    },
    methods: {
      ...mapActions(NameSpace, ['getAuthority']),
      ...mapMutations(NameSpace, ['setTransitionName']),
      // Clear Transition Effects After Each Switch
      clearTransition() {
        this.setTransitionName('');
      }
    }
  };
</script>
