<template>
  <div v-if="routerView" class="app-main-container">
    <div style="background: #fff">
      <router-view v-slot="{ Component, route }">
        <transition mode="out-in" name="fade-transform">
          <component
            :is="Component"
            :key="route.path"
            class="app-main-height"
          />
        </transition>
      </router-view>
      <footer class="footer-copyright">
        Copyright
        <vab-remix-icon icon="copyright-line" />
        {{ title }} {{ fullYear }} by {{ copyright }}
      </footer>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { copyright, title } from '@/config';

export default {
  name: 'VabAppMain',
  data() {
    return {
      show: false,
      fullYear: new Date().getFullYear(),
      copyright,
      title,
      routerView: true,
    };
  },
  computed: {
    ...mapGetters({
      visitedRoutes: 'tabsBar/visitedRoutes',
    }),
    cachedRoutes() {
      return [...new Set(this.visitedRoutes.flatMap(item => item.matched))];
    },
  },
};
</script>

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

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

  .footer-copyright {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55px;
    padding: 0 $base-padding 0 $base-padding;
    color: rgba(0, 0, 0, 0.45);
    background: $base-color-white;
    border-top: 1px dashed $base-border-color;

    i {
      margin: 0 5px;
    }
  }
}
</style>
