<template>
  <section class="app-main-container">
    <!-- <vab-keel v-if="show && skeleton" style="margin: 15px">
      <vab-keel-heading :img="true" />
      <vab-keel-text :lines="7" />
      <vab-keel-heading :img="true" />
      <vab-keel-text :lines="6" />
      <vab-keel-heading :img="true" />
      <vab-keel-text :lines="8" />
    </vab-keel> -->
    <transition mode="out-in" name="fade-transform">
      <keep-alive v-if="routerView" :include="cachedRoutes" :max="10">
        <router-view :key="key" style="min-height: 88vh" />
      </keep-alive>
    </transition>
  </section>
</template>

<script>
import { VabKeel, VabKeelHeading, VabKeelText } from "@/plugins/vabKeel"
import { mapGetters } from "vuex"
import { copyright } from "@/config/settings"

export default {
  name: "AppMain",
  components: {
    VabKeel,
    VabKeelHeading,
    VabKeelText,
  },
  data() {
    return {
      show: true,
      fullYear: new Date().getFullYear(),
      copyright,
      routerView: true,
      skeleton: this._skeleton,
    }
  },
  computed: {
    ...mapGetters({
      visitedRoutes: "tagsBar/visitedRoutes",
      device: "settings/device",
      _skeleton: "settings/skeleton",
    }),
    cachedRoutes() {
      const cachedRoutesArr = []
      this.visitedRoutes.forEach((item) => {
        if (!item.meta.noKeepAlive) {
          cachedRoutesArr.push(item.name)
        }
      })
      this.handleSkeleton(cachedRoutesArr)
      return cachedRoutesArr
    },
    key() {
      return this.$route.path
    },
  },
  watch: {
    //   $route: {
    //     handler(route) {
    //       if ("mobile" === this.device) {
    //         this.$store.dispatch("settings/foldSideBar")
    //       }
    //     },
    //     immediate: true,
    //   },
  },
  created() {
    //重载所有路由
    this.$baseEventBus.$on("reloadRouterView", () => {
      this.routerView = false
      this.skeleton = false
      this.$nextTick(() => {
        this.routerView = true
        this.skeleton = true
      })
    })
  },
  mounted() {
    setTimeout(() => {
      this.show = false
    }, 200)
  },
  methods: {
    // TODO 骨架屏处理还有bug我找到更好的解决方案待修复
    handleSkeleton(cachedRoutesArr) {
      if (this.skeleton) {
        cachedRoutesArr.push(this.$route.name)
        this.show = true
        setTimeout(() => {
          this.show = false
        }, 200)
      } else {
        this.show = false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.app-main-container {
  position: relative;
  width: 100%;
  overflow: hidden;

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