<script lang="ts" setup>
import type { ICourseChapter } from "~/types";

const chapters = ref<ICourseChapter[]>([
  {
    id: "1",
    title: "传感器的分类",
    is_published: true,
    sections: [
      {
        id: "1",
        title: "传感器的分类",
        resources: [
          {
            id: "1",
            name: "认识传感器.mp4",
            type: "video",
            url: "",
            allow_download: false,
          },
          {
            id: "2",
            name: "温度传感器.ppt",
            type: "ppt",
            url: "",
            allow_download: true,
          },
          {
            id: "3",
            name: "DHT11 传感器.png",
            type: "image",
            url: "",
            allow_download: true,
          },
          {
            id: "4",
            name: "液位传感器",
            type: "ppt",
            url: "",
            allow_download: true,
          },
        ],
      },
    ],
  },
  {
    id: "2",
    title: "传感器的工作原理",
    is_published: false,
    sections: [],
  },
]);
</script>

<template>
  <div class="flex flex-col gap-4 px-4 py-2">
    <div class="flex justify-between items-center">
      <h1 class="text-xl font-medium">课程章节管理</h1>
      <div class="flex items-center gap-4">
        <Tooltip :delay-duration="0">
          <TooltipTrigger>
            <Button
              variant="ghost"
              size="sm"
              class="flex items-center gap-2 text-muted-foreground"
            >
              <div class="w-2 h-2 rounded-full bg-emerald-500" />
              <span>训练完成</span>
            </Button>
          </TooltipTrigger>
          <TooltipContent>点击进行召回测试</TooltipContent>
        </Tooltip>
        <Button variant="secondary" size="sm" class="flex items-center gap-1">
          <Icon name="tabler:plus" size="16px" />
          <span>添加章节</span>
        </Button>
      </div>
    </div>

    <div class="flex flex-col gap-8">
      <!-- chatpter -->
      <CourseChapter
        v-for="chapter in chapters"
        :key="chapter.id"
        :tag="chapter.id"
        :chapter="chapter"
      />
    </div>
  </div>
</template>

<style scoped></style>
