<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="KeepAliveList">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

<script setup>
import { Session } from '@utils/storage'

const router = useRouter()
const KeepAliveList = ref([])

router.beforeEach((to, from, next) => {
  const keepAlive = to?.meta?.keepAlive
  Session.set('token', to.query.token)

  if (!router.hasRoute(to.name)) {
    router.push('/home')
    return
  }

  if (keepAlive) {
    if (KeepAliveList.value.indexOf(to.name) === -1) {
      KeepAliveList.value.push(to.name)
    } else {
      const index = KeepAliveList.value.findIndex((name) => name === from.name)
      index > -1 ? KeepAliveList.value.splice(index, 1) : null
    }
  }

  next()
})
</script>

<style lang="scss">
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;

  @media only screen and (min-width: 500px) {
    max-width: 500px;
    margin: auto;
    transform: scale(1);
  }
}
</style>
