<script lang="ts" setup>
import CourseGenerate from '~/components/aigc/course-generate/CourseGenerate.vue'
import CourseGenerateGreenScreen from '~/components/aigc/course-generate/CourseGenerateGreenScreen.vue'

useHead({
  title: 'PPT 生成视频 | XSH AI',
})

const showSidebar = ref(false)
const toggleSidebar = () => {
  showSidebar.value = !showSidebar.value
}

const routes = [
  {
    name: '微课视频生成',
    component: CourseGenerate,
  },
  {
    name: '绿幕视频生成',
    component: CourseGenerateGreenScreen,
  },
]

const currentComponentIndex = ref(0)
</script>

<template>
  <div class="w-full flex relative">
    <div
      :class="{'translate-x-0': showSidebar}"
      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]
               shadow-sidebar border-r border-transparent dark:border-neutral-700 transition-all duration-300 ease-out"
    >
      <div class="flex-1 flex flex-col overflow-auto overflow-x-hidden">
        <div class="flex flex-col gap-3 relative">
          <div class="space-y-2 nav">

            <div
              v-for="(route, index) in routes"
              :key="index"
              :class="['nav-item', { active: currentComponentIndex === index }]"
              @click="currentComponentIndex = index"
            >
              {{ route.name }}
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="h-[calc(100vh-4rem)] flex-1 overflow-y-auto bg-white dark:bg-neutral-900">
      <ClientOnly>
        <Component :is="routes[currentComponentIndex].component"/>
      </ClientOnly>
    </div>
  </div>
</template>

<style scoped>
.nav {
  &-item {
    @apply w-full px-4 py-3 bg-transparent rounded-md cursor-pointer select-none;
    @apply transition duration-150 ease-out;

    &:hover {
      @apply bg-black/10;
    }

    &.active {
      @apply bg-primary/20 text-primary shadow shadow-primary/20 font-medium;
    }
  }
}
</style>