<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const currentRoute = useRoute()
const router = useRouter()

const routerNameValue = ref(currentRoute.name)

const personalSpaceModuleList = [
  {
    routeName: 'PersonalSpaceApp',
    label: '应用',
  },
]

watch(
  () => currentRoute.fullPath,
  () => {
    routerNameValue.value = currentRoute.name
  },
)

function handleChangeRoute(routeName: string) {
  router.replace({ name: routeName })
}
</script>

<template>
  <div class="flex h-full flex-col">
    <ul class="mb-4 flex">
      <li
        v-for="personalSpaceModuleItem in personalSpaceModuleList"
        :key="personalSpaceModuleItem.routeName"
        class="hover:text-theme-color ml-[32px] h-9 cursor-pointer select-none text-xl leading-9 first:ml-0"
        :class="[routerNameValue === personalSpaceModuleItem.routeName ? 'text-theme-color' : '']"
        @click="handleChangeRoute(personalSpaceModuleItem.routeName)"
      >
        {{ personalSpaceModuleItem.label }}
      </li>
    </ul>

    <div class="h-full overflow-hidden rounded-2xl bg-white p-6 shadow-[0_2px_2px_#0000000a]">
      <RouterView v-slot="{ Component }">
        <Transition appear name="fade-slide" mode="out-in">
          <Component :is="Component" />
        </Transition>
      </RouterView>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.fade-slide-leave-active,
.fade-slide-enter-active {
  transition: all 0.3s;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
