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

defineProps<{
  data: ICourse
  deleteMode?: boolean
}>()

const router = useRouter()

const emit = defineEmits<{
  'delete-course': [courseId: number]
}>()

const openCourse = (id: number) => {
  // window.open(`/course/${id}`, '_blank', 'noopener,noreferrer')
  router.push(`/course/${id}`)
}
</script>

<template>
  <div class="flex flex-col gap-2 relative">
    <div class="absolute top-0 right-0">
      <Button
        v-if="deleteMode"
        size="icon"
        variant="link"
        @click="emit('delete-course', data.id)"
      >
        <Icon
          name="tabler:trash"
          size="16px"
          class="text-red-500 text-lg"
        />
      </Button>
    </div>
    <NuxtImg
      :src="data.previewUrl || '/images/bg_home.jpg'"
      alt="课程封面"
      class="w-full aspect-video rounded-md shadow-md cursor-pointer hover:shadow-lg transition duration-300 ease-in-out hover:ring-4 hover:ring-primary-background"
      @click="openCourse(data.id)"
    />
    <div class="px-1.5 flex flex-col gap-1">
      <div class="flex justify-between items-center gap-2">
        <h1 class="flex-1 text-base font-medium text-ellipsis line-clamp-1">
          {{ data.courseName || "未知课程" }}
        </h1>
        <p
          class="text-xs text-muted-foreground font-medium flex items-center gap-0.5"
        >
          <Icon
            name="tabler:user"
            size="14px"
          />
          <span>{{ data.teacherName || "未知教师" }}</span>
        </p>
      </div>
      <div class="flex justify-between gap-4 text-xs text-muted-foreground/80">
        <div class=" flex flex-col">
          <p>
            学期 <span>{{ data.semester || "未知" }}</span>
          </p>
          <p>
            课程ID：<span>{{ data.id }}</span>
          </p>
        </div>
        <div class="flex-1 flex flex-col items-end">
          <p class="text-ellipsis line-clamp-1">{{ data.schoolName }}</p>
          <div class="flex items-center gap-1">
            <div
              v-if="data.status === 0"
              class="w-2 h-2 rounded-full bg-emerald-400"
            />
            <div
              v-else
              class="w-2 h-2 rounded-full bg-gray-400"
            />
            <p class="text-xs text-muted-foreground/80">
              {{ data.status === 0 ? "开课" : "关课" }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
