<script lang="ts" setup>
import type { SidebarNavGroup } from "~/components/app/Sidebar.vue";
import { topbarNavDefaults } from "~/components/app/Topbar.vue";

const {
  fullPath,
  params: { id },
} = useRoute();
const router = useRouter();

useHead({
  title: "传感器应用技术 - 课程管理",
});

const sideNav: SidebarNavGroup[] = [
  {
    items: [
      {
        title: "课程章节",
        url: `/course/${id}/chapters`,
        icon: "tabler:books",
      },
      {
        title: "教师团队",
        url: `/course/${id}/team`,
        icon: "tabler:users-group",
      },
      {
        title: "学生班级",
        url: `/course/${id}/classes`,
        icon: "tabler:school",
      },
      {
        title: "学生评价",
        url: `/course/${id}/evaluation`,
        icon: "tabler:mood-smile",
      },
    ],
  },
];

const topNav = [
  {
    title: "课程管理",
    to: `/course/${id}`,
    icon: "tabler:layout-dashboard",
  },
  ...topbarNavDefaults.slice(1),
];

onMounted(() => {
  if (fullPath === `/course/${id}`) {
    router.replace(`/course/${id}/chapters`);
  }
});
</script>

<template>
  <AppPageWithSidebar :sidebar-nav="sideNav">
    <template #topbar>
      <AppTopbar :nav="topNav" />
    </template>

    <template #sidebar="{ sidebarNav }">
      <AppSidebar :nav="sidebarNav">
        <template #extra-header>
          <div class="px-4">
            <div class="flex flex-col items-center gap-1 overflow-hidden">
              <NuxtImg
                src="https://static-xsh.oss-cn-chengdu.aliyuncs.com/file/2024-08-05/9a8b2ed8d66340d43a4b840f58597f13.png"
                alt="课程封面"
                class="w-full aspect-video rounded-md shadow-md"
              />
              <h1
                class="text-base font-medium drop-shadow-md text-ellipsis line-clamp-1"
              >
                传感器应用技术
              </h1>
            </div>
          </div>
        </template>
      </AppSidebar>
    </template>

    <ClientOnly>
      <Suspense>
        <NuxtPage :page-key="fullPath" />
      </Suspense>
    </ClientOnly>
  </AppPageWithSidebar>
</template>

<style scoped></style>
