<template>
  <el-container class="is-vertical fullheight">
    <template v-if="menuStyle == 'topSide'">
      <biz-navigator :menu-show.sync="menuShow" :show-top-menu="false" @onChangeTopMenu="onChangeTopMenu" />
      <el-container style="overflow-x: hidden; overflow-y: hidden">
        <biz-side-menu class="side-menu" :menu-config="menuConfig" :menu-show.sync="menuShow" @menuChange="handleMenuChange" />
        <el-main :class="$route.meta.isHome ? 'home-page' : ''" class="main-container">
          <transition :name="transitionName" appear mode="out-in">
            <el-card
              v-if="showPage"
              :key="$route.path"
              :class="{
                'box-card-noheader': $route.meta.isHome || !showHeader,
                'single-sepical': $route.path == '/sysplat/tenantInfoManager',
              }"
              class="app-box__card"
              shadow="never"
              ><keep-alive v-if="!$route.meta.keepAlive">
                <router-view class="fullheight" @menuChange="handleMenuChange" />
              </keep-alive>
              <router-view v-else class="fullheight" @menuChange="handleMenuChange" />
            </el-card>
            <el-card
              v-else
              :key="$route.path"
              :class="{
                'box-card-noheader': !showHeader,
                'single-sepical': $route.path == '/sysplat/tenantInfoManager',
              }"
              class="app-box__card"
              shadow="never"
            >
              <keep-alive v-if="!$route.meta.keepAlive">
                <router-view class="fullheight" @menuChange="handleMenuChange" />
              </keep-alive>
              <router-view v-else class="fullheight" @menuChange="handleMenuChange" />
            </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 BizNavigator from './BizNavigator.vue';
import BizSideMenu from './BizSideMenu.vue';
import menu from '@/api/menu.js';
import portal from '@/api/portal.js';

export default {
  components: {
    BizSideMenu,
    BizNavigator,
  },
  data() {
    return {
      menuShow: true,
      currentMenuLabel: '',
      showHeader: true,
      menuStyle: 'topSide', // sideMenu  topMenu  topSide
      transitionName: 'fold-right',
      showPage: true,
      menuConfig: {},
    };
  },
  created() {
    // new DevicePixelRatio().init();
  },
  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';
      }
    },
  },
  mounted() {
    window.onresize = () => {
      this.$root.$emit('resize');
    };
    menu.getMenuByAlias(this.$route.name, (m) => {
      if (m) {
        this.$emit('menuChange', m);
      }
    });
  },
  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);
    },
    onChangeTopMenu(config) {
      this.menuConfig = config;
    },
  },
};
</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;
}
@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: 11px;
  background: #ebeef5;
  //background: #ebeef5 url(../../assets/img/loading.gif) no-repeat 50%;
}
.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;
}
.side-menu{
    width: 210px;
}
</style>
