<template>
  <el-container class="is-vertical fullheight">
    <Navigator :currentMenu="currentMenu" />
    <el-container style="overflow-x: hidden; overflow-y: hidden">
      <side-menu :currentMenu="currentMenu" />
      <el-main
        class="main-container"
        :class="$route.meta.isHome ? 'home-page' : ''"
      >
        <super-breadcrumb />
        <transition :name="transitionName" mode="out-in" appear>
          <el-card
            v-if="showPage"
            class="app-box__card"
            shadow="never"
            :key="$route.path"
          >
            <keep-alive v-if="!$route.meta.keepAlive">
              <router-view class="fullheight"></router-view>
            </keep-alive>
            <router-view v-else class="fullheight"></router-view>
          </el-card>
          <el-card
            v-else
            class="app-box__card"
            shadow="never"
            :key="$route.path"
          >
            <keep-alive v-if="!$route.meta.keepAlive">
              <router-view class="fullheight"> </router-view>
            </keep-alive>
            <router-view v-else class="fullheight"> </router-view>
          </el-card>
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Navigator from './Navigator/index.vue'
import SideMenu from './SideMenu/index.vue'
import menu from '@/api/menu.js'
import org from '@/api/org.js'
import utils from '@/utils/utils.js'
import portal from '@/api/portal.js'
import SuperBreadcrumb from '@/components/SuperBreadcrumb/index.vue'

export default {
  components: {
    SuperBreadcrumb,
    Navigator,
    SideMenu
  },
  data() {
    return {
      transitionName: 'fold-right',
      showPage: true,
      treeData: [],
      currentMenu: '' // 当前访问的一级菜单别名
    }
  },
  created() {
    this.currentMenu = this.$route.path.split('/')[2].replace('/', '')
  },
  mounted() {
    window.onresize = () => {
      this.$root.$emit('resize')
    }
    menu.getMenuByAlias(this.$route.name, m => {
      if (m) {
        this.$emit('menuChange', m)
      }
    })
  },
  watch: {
    $route(to, from) {
      if (!to.hash) {
        this.showPage = !this.showPage
        const toPathLevel = to.path.split('/').filter(Boolean).length
        const fromPathLevel = from.path.split('/').filter(Boolean).length
        // 'fold-right'  'fold-left'
        if (to.path === '/platLayout/homePage') {
          this.transitionName = ''
        } else if (fromPathLevel === 5 && toPathLevel === 5) {
          this.transitionName = 'fold-left-slow'
        } else {
          this.transitionName = 'fold-left'
        }

        // 筛选出选中菜单
        this.currentMenu = to.path.split('/')[2].replace('/', '')
      }
    }
  },
  beforeDestroy() {
    window.onresize = null
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

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

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

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

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

@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;
  }
}

#app {
  background: $--system-background-color;
  height: 100%;
}

.main-container {
  //flex-shrink: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: url(../../assets/img/loading.gif) no-repeat 50%, #0f304f;
}

.home-page.main-container {
  background-color: $--color-primary;
}

.home-page > .el-card {
  box-shadow: none;
}

> .el-card {
  border-radius: 0;
  border: none;
  flex: 1;
}

.el-main {
  padding: 0;
  //background: #f0f8fe;
}

.app-box__card {
  height: 100%;
  background-color: $--system-background-color;
  box-sizing: border-box;
}

.app-box__card ::v-deep > .el-card__header {
  padding: 12px 20px;
  margin-bottom: 10px;
}

.app-box__card ::v-deep > .el-card__body {
  height: 100%;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.single-sepical.app-box__card ::v-deep > .el-card__body {
  height: 100%;
}

.home-page > .app-box__card ::v-deep > .el-card__body {
  height: 100% !important;
}

.box-card-noheader ::v-deep > .el-card__body {
  height: 100% !important;
}

> .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: rgba(155, 194, 230, 0.2) !important;
}

> .el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: #211bce;
  font-weight: bold;
}

.fullheight {
  flex: 1;
}

::v-deep .el-card {
  border: 0;
  border-radius: 0;
}
</style>
