<template>
  <div id="app" class="fs16">
    <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">
      <keep-alive>
        <router-view class="router-view"></router-view>
      </keep-alive>
    </transition>
    <zgh-router-loading></zgh-router-loading>

    <div class="pull textC" id="pull">
      <div class="box-i">
        <i class="iconfont color-red box-shadow" style="font-size: 30px">&#xe61f;</i>

      </div>
    </div>
  </div>
</template>

<script>
  import {mapState, mapMutations} from 'vuex'
  import {RouteLoading} from './index.js'

  export default {
    name: 'app',
    data() {
      return {}
    },
    components: {
    	'router-loading':RouteLoading
    },
    computed: {
      ...mapState({
        direction: state => state.direction,
      })
    },
    mounted() {
      this.INIT();
    },
    methods: {
      ...mapMutations([
        'INIT'
      ])
    }
  }
</script>

<style lang="less">
  @import url("./assets/config.less");
  @import url("./assets/common.less");

  #app {
    width: 100%;
    /*max-width: 780px;*/
    height: 100%;
    margin: 0 auto;
  }

  .pull {
    @h: 50px;
    position: fixed;
    height: @h;
    top: 0px;
    left: 0;
    width: 100%;
    z-index: 9999;
    margin-top: -@h;
    i {
      @h: 40px;
      display: inline-block;
      width: @h;
      height: @h;
      line-height: @h;
      border-radius: 100%;
      background: #fff;
      transition: all .4s;
      font-weight: bold;
      animation-direction: reverse;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-timing-function: ease;
    }
    .box-i{
      transition: all .6s;
    }
    &.active {
      transition: all .5s;
      i {
        animation-name: zhuan;
      }
    }
    &.leave{
      z-index: 1000;
      .box-i{
        transform: scale(0);
      }
    }
  }

  @keyframes zhuan {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .vux-pop-out-enter-active,
  .vux-pop-out-leave-active,
  .vux-pop-in-enter-active,
  .vux-pop-in-leave-active {
    will-change: transform;
    transition: all 300ms;
    height: 100%;
    top: 0;
    position: absolute;
    backface-visibility: hidden;
    perspective: 1000;
  }

  .vux-pop-out-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  .vux-pop-out-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  .vux-pop-in-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  .vux-pop-in-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
</style>

