<script lang="ts" setup>
import { nav } from './config'
import { FnTeachLessonPlan } from '#components'
import type { NavTertiaryItem } from '~/components/nav/Tertiary.vue'

definePageMeta({
  requiresAuth: true,
  hideSidebar: true,
})

useHead({
  title: 'AI 教学设计 | 备课',
})

const route = useRoute()
const router = useRouter()
const { setBreadcrumbs } = useBreadcrumbs()

const tertiaryNavs: NavTertiaryItem[] = [
  { label: '教案设计', component: FnTeachLessonPlan },
  { label: '案例设计' },
  { label: '课程标准' },
  { label: '知识图谱' },
  { label: '课程章节' },
  { label: '教研计划' },
]

const currentNav = ref(0)

watch(currentNav, (val) => {
  router.replace({
    query: {
      fn: val,
    },
  })
})

onMounted(() => {
  if (route.query.fn && !isNaN(Number(route.query.fn))) {
    currentNav.value = Number(route.query.fn)
  }

  setBreadcrumbs([
    {
      label: 'AI 备课',
      path: '/course/prep',
    },
    {
      label: 'AI 教学设计',
    },
  ])
})
</script>

<template>
  <AppContainer
    :nav-secondary="nav"
    content-class="flex items-start p-0"
  >
    <div class="w-[188px] h-full border-r shadow-xl">
      <div class="flex justify-center items-center h-16 border-b gap-2">
        <Icon
          name="fluent-color:design-ideas-24"
          class="text-2xl"
        />
        <h1 class="text-base font-medium text-foreground">AI 教学设计</h1>
      </div>
      <div class="p-2">
        <NavTertiary
          v-model="currentNav"
          :navs="tertiaryNavs"
        />
      </div>
    </div>
    <div class="flex-1 h-full p-6">
      <Suspense>
        <component
          :is="tertiaryNavs[currentNav].component"
          v-if="tertiaryNavs[currentNav].component"
        />
        <div
          v-else
          class="flex flex-col items-center justify-center w-full h-full gap-2"
        >
          <Icon
            name="tabler:mood-sad"
            class="text-6xl text-muted-foreground"
          />
          <p class="text text-muted-foreground">
            该功能暂不可用
          </p>
        </div>
      </Suspense>
    </div>
  </AppContainer>
</template>

<style scoped></style>
