<template>
  <el-container class="is-vertical fullheight">
    <template v-if="menuStyle == 'topSide'">
      <el-container style="overflow-x: hidden; overflow-y: hidden">
        <side-menu
          @menuChange="handleMenuChange"
          :menuShow.sync="menuShow"
          class="side-menu"
        />

        <el-container>
          <el-header>
            <Navigator :menuShow.sync="menuShow" :showTopMenu="false" />
          </el-header>
          <el-main
            class="main-container"
            :class="$route.meta.isHome ? 'home-page' : ''"
          >
            <transition :name="transitionName" mode="out-in" appear>
              <el-card
                class="app-box__card"
                :class="{
                  'box-card-noheader': $route.meta.isHome || !showHeader,
                  'single-sepical': $route.path == '/sysplat/tenantInfoManager',
                }"
                shadow="never"
                v-if="showPage"
                :key="$route.path"
                ><keep-alive v-if="!$route.meta.keepAlive">
                  <router-view
                    class="fullheight"
                    @menuChange="handleMenuChange"
                  ></router-view>
                </keep-alive>
                <router-view
                  v-else
                  class="fullheight"
                  @menuChange="handleMenuChange"
                ></router-view>
              </el-card>
              <el-card
                v-else
                class="app-box__card"
                :class="{
                  'box-card-noheader': !showHeader,
                  'single-sepical': $route.path == '/sysplat/tenantInfoManager',
                }"
                shadow="never"
                :key="$route.path"
              >
                <keep-alive v-if="!$route.meta.keepAlive">
                  <router-view
                    class="fullheight"
                    @menuChange="handleMenuChange"
                  ></router-view>
                </keep-alive>
                <router-view
                  v-else
                  class="fullheight"
                  @menuChange="handleMenuChange"
                ></router-view>
              </el-card>
            </transition>
          </el-main>
        </el-container>
      </el-container>
    </template>

    <!-- 多模式 -->
    <!-- <template v-if="menuStyle == 'topMenu'">
            <Navigator :menuShow.sync="menuShow" :showTopMenu="true" />
            <router-view />
        </template>
        <template v-if="menuStyle == 'topSide'">
            <Navigator :menuShow.sync="menuShow" :showTopMenu="true" />
            <router-view />
        </template> -->
  </el-container>
</template>

<script>
import Navigator from './Navigator.vue'
import SideMenu from './SideMenu.vue'
import menu from '@/api/menu.js'
import portal from '@/api/portal.js'
export default {
  components: {
    SideMenu,
    Navigator,
  },
  data() {
    return {
      menuShow: true,
      currentMenuLabel: '',
      showHeader: true,
      menuStyle: 'topSide', // sideMenu  topMenu  topSide
      transitionName: 'fold-right',
      showPage: true,
    }
  },
  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 toDepth = to.path.split('/').length
        const fromDepth = from.path.split('/').length
        this.transitionName = toDepth < fromDepth ? 'fold-right' : 'fold-left'
      }
    },
  },
  methods: {
    getAllDict() {
      portal.getSysDict().then((data) => {
        if (data) {
          sessionStorage.setItem('dict_data', JSON.stringify(data))
        }
      })
    },
    handleMenuChange: function (menu) {
      this.currentMenuLabel = menu.name
      this.showHeader = !(menu.children && menu.children.length > 0)
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.side-menu {
  width: 15%;
  height: 100%;
}
.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;
  }
}

#app {
  background: #f5f5f5;
  height: 100%;
}
.main-container {
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: #ebeef5;
  background: url(../../assets/img/loading.gif) no-repeat 50% #ebeef5;
}
.main-container > .el-card {
  // box-shadow: 0px 0px 12px 0 rgba($color: #000000, $alpha: 0.1);
  background: transparent;
}
.home-page.main-container {
  background-color: $--color-primary;
}
.home-page > .el-card {
  box-shadow: none;
}
.el-main > .el-card {
  border-radius: 0;
  border: none;
}

.app-box__card {
  height: 100%;
}

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

.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;
}
</style>
