<template>
  <a-layout-content class="app-container">
    <!-- tab-tags -->
    <tabs-view />
    <!-- 44px app-tabs-view 高度 -->
    <!-- 12px 底部边距 -->
    <div
      id="app-content"
      :class="[
        'app-content',
        layout,
        pageWidth,
        multiPage && 'multiPage',
        fixedTabs && 'fixedTabs',
        isFullScreen && 'fullScreen',
      ]"
    >
      <page-transition
        :disabled="animate.disabled"
        :animate="animate.name"
        :direction="animate.direction"
      >
        <nuxt
          ref="tabContent"
          keep-alive
          :keep-alive-props="{
            include: cachedViews,
          }"
        />
      </page-transition>
    </div>
  </a-layout-content>
</template>

<script>
import { mapState } from "vuex";
import TabsView from "./TabsView";
import PageTransition from "./PageTransition";

export default {
  name: "AppMain",
  components: { TabsView, PageTransition },
  data() {
    return {
      minHeight: window.innerHeight - 64,
    };
  },
  computed: {
    ...mapState("setting", [
      "layout",
      "pageWidth",
      "fixedHeader",
      "fixedTabs",
      "animate",
      "multiPage",
    ]),
    ...mapState("tagsView", ["visitedViews", "cachedViews", "isFullScreen"]),
  },
};
</script>

<style scoped lang="less">
@import (optional, once) "../../theme/index.less";

.app-container {
  z-index: 2;
  .app-content {
    position: relative;
    min-height: calc(100vh - 50px - 12px);
    margin: 12px;
    background-color: @white;
    &.multiPage {
      margin: 0 12px 12px;
      min-height: calc(100vh - 50px - 44px - 12px);
    }
    &.fixedTabs {
      min-height: calc(100vh - 50px - 44px - 12px);
    }
    // &.fixedTabs.multiPage {
    //   min-height: 100%;
    // }
    &.head.static {
      width: 1400px;
      margin: 0 auto;
    }
    &.multiPage.head.fixed {
      margin: 12px auto 0;
    }
    &.fullScreen {
      margin: 12px;
    }
  }
}
.app-container.ant-layout-content {
  flex: none;
  min-height: calc(100vh - 50px - 12px);
}
</style>
