<script setup lang="ts">
import NavItem from '~/components/aigc/NavItem.vue'

useSeoMeta({
  title: '智能生成',
})

const navList = ref<
  {
    label: string
    icon: string
    to: string
    admin?: boolean
  }[]
>([
  {
    label: '微课视频生成',
    icon: 'tabler:presentation-analytics',
    to: '/generation/course',
  },
  {
    label: '绿幕视频生成',
    icon: 'i-tabler-video',
    to: '/generation/green-screen',
  },
  {
    label: '数字讲师管理',
    icon: 'tabler:user-screen',
    to: '/generation/avatar-models',
  },
  {
    label: '片头片尾模板',
    icon: 'tabler:keyframes',
    to: '/generation/materials',
  },
  {
    label: 'PPT 模板库',
    icon: 'tabler:file-type-ppt',
    to: '/generation/ppt-templates',
  },
  {
    label: '用户管理',
    icon: 'tabler:users',
    to: '/generation/admin/users',
    admin: true,
  },
])

const route = useRoute()
const router = useRouter()
const loginState = useLoginState()

onMounted(() => {
  if (route.fullPath === '/generation') {
    router.replace('/generation/course')
  }
})
</script>

<template>
  <div class="w-full flex relative">
    <div
      class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 flex flex-col h-[calc(100vh-4rem)] bg-neutral-100 dark:bg-neutral-900 p-4 w-full md:w-[300px] border-r border-neutral-200 dark:border-neutral-700 transition-all duration-300 ease-out"
    >
      <div class="flex flex-col flex-1 overflow-auto overflow-x-hidden">
        <div class="flex flex-col gap-1">
          <ClientOnly>
            <NavItem
              v-for="(item, i) in navList"
              :key="i"
              :icon="item.icon"
              :label="item.label"
              :to="item.to"
              :admin="item.admin"
              :hide="item.admin && loginState.user.auth_code !== 2"
            />
          </ClientOnly>
        </div>
      </div>
    </div>

    <LoginNeededContent
      content-class="h-[calc(100vh-4rem)] flex-1 overflow-y-auto bg-white dark:bg-neutral-900"
    >
      <Transition name="subpage" mode="out-in">
        <div>
          <Suspense>
            <NuxtPage :page-key="route.fullPath" keepalive />
          </Suspense>
        </div>
      </Transition>
    </LoginNeededContent>
  </div>
</template>

<style>
.subpage-enter-active,
.subpage-leave-active {
  @apply transition-all duration-300;
}

.subpage-enter-from,
.subpage-leave-to {
  @apply opacity-0 translate-x-4;
}

.loading-screen-leave-active {
  @apply transition-all duration-300;
}

.loading-screen-leave-to {
  @apply opacity-0;
}

.card-move,
.card-enter-active,
.card-leave-active {
  @apply transition-all duration-300;
}

.card-enter-from,
.card-leave-to {
  @apply opacity-0;
}

.card-leave-active {
  @apply absolute;
}
</style>
