<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view />
    </transition>
    <div class="loading-container" v-if="isLoading">
      <cr-loading class="loading" size="24px">加载中...</cr-loading>
    </div>
    <div class="loading-container pay" v-if="isPayWait">
      <cr-loading class="loading" size="24px" vertical>支付中</cr-loading>
    </div>
    <login-modal />
    <auth-from-xyqb v-if="showAuthXyqb !== -1" />
    <net-error />
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import LoginModal from "@/components/LoginModal";
import AuthFromXyqb from "@/components/AuthFromXyqb";
import NetError from "@/components/NetError";
export default {
  components: {
    LoginModal,
    AuthFromXyqb,
    NetError
  },
  data() {
    return {
      transitionName: "slide-right"
    };
  },
  computed: {
    ...mapState(["isLoading", "showAuthXyqb", "isPayWait"])
  },
  watch: {
    $route(to, from) {
      const firstPath = ["/home", "/goods", "/consultant", "/user"];
      if (
        [to.path, from.path].every(v => firstPath.includes(v)) ||
        [to.path, from.path].includes("/")
      ) {
        this.transitionName = "";
        return;
      }
      this.transitionName = this.$router.isBack ? "slide-right" : "slide-left";
      this.$router.isBack = false;
    }
  },
  methods: {
    ...mapActions(["setIsLoading"])
  }
};
</script>
<style lang="less" scoped>
@import "./style/index.less";

.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;
  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);
}

.loading-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  .loading {
    padding: 6px;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;

    @{deep} .cr-loading--text {
      color: #fff;
    }
  }
  &.pay {
    z-index: 1000;
    background-color: #fff;
    .loading {
      padding: 15px 25px;
      @{deep} .cr-loading--text {
        margin-top: 25px;
      }
    }
  }
}
</style>
