<template>
  <el-container class="is-vertical fullheight">
    <template v-if="menuStyle == 'sideMenu'">
      <Navigator :menuShow.sync="menuShow" :showTopMenu="false" />
      <el-container style="overflow-x: hidden; overflow-y: hidden">
        <side-menu @menuChange="handleMenuChange" :menuShow.sync="menuShow" />
        <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"
            >
              <!-- <div
                                    v-if="showHeader && !$route.meta.isHome"
                                    slot="header"
                                    class="clearfix"
                                >
                                    <el-breadcrumb separator="/">
                                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                                        <el-breadcrumb-item>{{
                                            currentMenuLabel
                                        }}</el-breadcrumb-item>
                                    </el-breadcrumb>
                                </div> -->

              <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
              class="app-box__card"
              :class="{
                'box-card-noheader': !showHeader,
                'single-sepical': $route.path == '/sysplat/tenantInfoManager',
              }"
              shadow="never"
              :key="$route.path"
              v-else
            >
              <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>
    </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: {
    Navigator,
    SideMenu,
  },
  data() {
    return {
      menuShow: true,
      currentMenuLabel: '',
      showHeader: true,
      menuStyle: 'sideMenu', // 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>
.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 {
  height: 100%;
}
.main-container {
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 0;
  padding: 10px;
  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);
}
.home-page > .el-card {
  box-shadow: none;
}
.el-main > .el-card {
  border-radius: 0;
  border: none;
  background-color: #e2e4eb;
}

.app-box__card {
  height: 100%;
}

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

.app-box__card /deep/ > .el-card__body {
  height: 100%;
  padding: 0;
  position: relative;
}
.single-sepical.app-box__card /deep/ > .el-card__body {
  height: 100%;
}

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

.box-card-noheader /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>