<script lang="ts" setup>
import { getCourseDetail, getTeacherTeamByCourse } from "~/api/course";

definePageMeta({
  requiresAuth: true,
});

const loginState = useLoginState();

const {
  params: { id: courseId },
} = useRoute();

const course = await getCourseDetail(courseId as string);

const { data: teacherTeam } = useAsyncData(() =>
  getTeacherTeamByCourse(parseInt(courseId as string))
);
</script>

<template>
  <div class="flex flex-col gap-4 px-4 py-2">
    <div class="flex justify-between items-start">
      <h1 class="text-xl font-medium">
        教师团队管理
        <span class="block text-sm text-muted-foreground">
          课程负责人：{{ course.data.teacherName || "未知" }}
        </span>
      </h1>
      <div class="flex items-center gap-4">
        <Button variant="secondary" size="sm" class="flex items-center gap-1">
          <Icon name="tabler:plus" size="16px" />
          <span>添加教师</span>
        </Button>
      </div>
    </div>
    <div
      v-if="teacherTeam?.data && teacherTeam.data.length > 0"
      class="grid gap-6 grid-cols-2 sm:grid-cols-3 2xl:grid-cols-5"
    >
      <CourseTeamMember
        v-for="member in teacherTeam.data"
        :key="member.teacherId"
        :is-current-user="loginState.user?.userId === member.teacherId"
        :member
      />
    </div>
    <EmptyScreen
      v-else
      title="暂无团队成员"
      description="请添加教师作为团队成员"
      icon="fluent-color:people-list-24"
    />
    <DevOnly>
      <pre>{{ teacherTeam }}</pre>
    </DevOnly>
  </div>
</template>

<style scoped></style>
