<template>
  <div class="app-main">
    <!-- 带有切换动画 -->
    <transition name="fade-transform" mode="out-in">
      <keep-alive>
        <router-view v-slot="{ Component, route }">
          <component :is="Component" :key="route.path"></component>
        </router-view>
      </keep-alive>
    </transition>
  </div>
</template>

<script setup>
import { watch } from 'vue'
import { useRoute } from 'vue-router'
import { isTags } from '@/utils/tags'
import { useStore } from 'vuex'

const getTitle = (route) => {
  let title = ''
  if (!route.meta) {
    const pathArr = route.path.split('/')
    title = pathArr[pathArr.lengh - 1]
  } else {
    title = route.meta.title
  }
  return title
}

const store = useStore()
const route = useRoute()

watch(
  route,
  (to, from) => {
    if (!isTags(to.path)) return
    const { fullPath, meta, name, params, path, query } = to
    store.commit('app/addTagsViewList', {
      fullPath,
      meta,
      name,
      params,
      path,
      query,
      title: getTitle(to)
    })
  },
  { immediate: true }
)
</script>

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