<template>
  <transition :name="transitionName" mode="out-in" appear>
    <el-card
      class="page-card"
      shadow="never"
      v-if="showPage"
      :key="$route.path"
    >
      <keep-alive v-if="!$route.meta.keepAlive">
        <router-view class="common-full-page"></router-view>
      </keep-alive>
      <router-view v-else class="common-full-page"></router-view>
    </el-card>
    <el-card v-else class="page-card" shadow="never" :key="$route.path">
      <keep-alive v-if="!$route.meta.keepAlive">
        <router-view class="common-full-page"></router-view>
      </keep-alive>
      <router-view v-else class="common-full-page"></router-view>
    </el-card>
  </transition>
</template>
<script>
import Navigator from './Navigator.vue'
import SideMenu from './SideMenu.vue'
import menu from '@/api/menu.js'
export default {
  components: {
    Navigator,
    SideMenu,
    Navigator
  },
  data() {
    return {
      menuShow: true,
      transitionName: 'fold-right',
      showPage: true
    }
  },
  mounted() {},
  watch: {
    $route(to, from) {
      if (!to.hash) {
        this.showPage = !this.showPage
        const toDepth = to.path.split('/').length
        const fromDepth = from.path.split('/').length
        this.transitionName = toDepth < fromDepth ? 'fold-right' : 'fold-left'
      }
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

.page-card {
  padding: 16px;
  background-color: $--background-color-base;
  box-sizing: border-box;
}

.page-card /deep/ > .el-card__body {
  height: 100%;
  padding: 0;
  position: relative;
}

.fold-left-enter-active {
  animation: fold-left-in 0.5s;
}

.fold-left-leave-active {
  animation: fold-left-on 0.5s;
}

@keyframes fold-left-in {
  0% {
    transform: translate3d(-10%, 0, 0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes fold-left-on {
  0% {
    transform: translate3d(0%, 0, 0);
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    transform: translate3d(10%, 0, 0);
    opacity: 0;
  }
}
</style>
