<template>
  <section class="app-main">
    <jy-keel v-if="show" class="jy-keel">
      <jy-keel-heading :img="true" />
      <jy-keel-text :lines="7" />
      <jy-keel-heading :img="true" />
      <jy-keel-text :lines="6" />
      <jy-keel-heading :img="true" />
      <jy-keel-text :lines="8" />
    </jy-keel>
    <transition mode="out-in" name="fade-transform">
      <keep-alive :include="cachedViews" :max="keepAliveMaxNum">
        <router-view :key="key" :class="appMainHeight" />
      </keep-alive>
    </transition>
    <footer v-show="footerCopyright" class="footer-copyright">
      Copyright ©
      {{ title }} {{ fullYear }} by {{ copyright }}
    </footer>
  </section>
</template>

<script>
import { JyKeel, JyKeelHeading, JyKeelText } from "../../jyKeel";
import { copyright, footerCopyright, keepAliveMaxNum, title } from "@/config/settings";
import { mapGetters } from "vuex";

export default {
  name: "AppMain",
  components: {
    JyKeel,
    JyKeelHeading,
    JyKeelText,
  },
  data() {
    return {
      show: this.skeleton,
      fullYear: new Date().getFullYear(),
      copyright,
      title,
      keepAliveMaxNum,
      routerView: true,
      footerCopyright,
    };
  },
  computed: {
    ...mapGetters({
      visitedRoutes: "tagsView/visitedViews",
      device: "settings/device",
      skeleton: "settings/skeleton",
      tagsView: "settings/tagsView",
    }),
    appMainHeight() {
      return this.tagsView ? "app-main-height" : "app-notags-main-height";
    },
    cachedViews() {
      const cachedRoutesArr = [];
      this.visitedRoutes.forEach((item) => {
        if (!item.meta.noKeepAlive) {
          cachedRoutesArr.push(item.name);
          this.handleSkeleton();
        }
      });
      return cachedRoutesArr;
    },
    key() {
      return this.$route.path;
    },
  },
  watch: {
    $route: {
      handler() {
        if ("mobile" === this.device) {
          this.$store.dispatch("settings/closeSideBar", { withoutAnimation: false });
        }
      },
      immediate: true,
    },
  },
  created() {
    //重载所有路由
    this.$baseEventBus.$on("reloadRouterView", () => {
      this.routerView = false;
      this.$nextTick(() => {
        this.routerView = true;
        this.handleSkeleton();
      });
    });
  },
  mounted() {
    this.handleSkeleton();
  },
  methods: {
    handleSkeleton() {
      if (this.skeleton) {
        this.show = true;
        setTimeout(() => {
          this.show = false;
        }, 200);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.app-main {
  /* 50= navbar  50  */
  min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  overflow: hidden;

  .jy-keel {
    margin: $base-padding;
  }

  .app-main-height {
    min-height: $base-app-main-height;
  }

  .app-notags-main-height {
    min-height: $base-notags-app-main-height;
  }

  > [class*="-container"] {
    padding: $base-padding;
    background: $base-color-white;
  }
}

.fixed-header + .app-main {
  padding-top: 50px;
}

.hasTagsView {
  .footer-copyright {
    min-height: 30px;
    line-height: 30px;
    color: rgba(0, 0, 0, 0.45);
    text-align: center;
    border-top: 1px dashed $base-border-color;
  }

  .fixed-header + .app-main {
    padding-top: 84px;
  }
}

.main-container {
  .footer-copyright {
    min-height: 30px;
    line-height: 30px;
    color: rgba(0, 0, 0, 0.45);
    text-align: center;
    border-top: 1px dashed $base-border-color;
  }
}
</style>
