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

const props = defineProps<{
  resource: ICourseResource;
}>();

const emit = defineEmits<{
  "delete-resource": [resourceId: number];
}>();

const resourceIcon = computed(() => {
  switch (props.resource.resource_type) {
    case "video":
      return "tabler:video";
    case "image":
      return "tabler:photo";
    case "ppt":
      return "tabler:file-type-ppt";
    case "doc":
      return "tabler:file-type-doc";

    default:
      return "tabler:file";
  }
});
</script>

<template>
  <div
    class="px-4 pl-8 py-1 flex justify-between group/resource hover:bg-muted/50"
  >
    <div class="flex items-center gap-2 relative text-muted-foreground">
      <div
        class="absolute inset-y-0 top-3 left-1.5 w-4 h-[1px] bg-gray-300 dark:bg-gray-700 z-0"
      />
      <div class="w-[7px] h-[7px] rounded-full bg-foreground/50 z-10" />
      <Icon :name="resourceIcon" class="ml-6" size="20px" />
      <span class="text-ellipsis line-clamp-1 text-xs font-medium">
        {{ resource.resource_name }}
      </span>
    </div>
    <div
      class="flex items-center gap-2 mr-8 opacity-0 group-hover/resource:opacity-100"
    >
      <Button
        variant="link"
        size="xs"
        class="flex items-center gap-1 text-muted-foreground"
      >
        <Icon name="tabler:eye" size="16px" />
        <span>预览</span>
      </Button>
      <Button
        variant="link"
        size="xs"
        class="flex items-center gap-1 text-muted-foreground"
        :class="{
          'text-amber-500': resource.allow_download,
        }"
      >
        <Icon
          :name="
            resource.allow_download ? 'tabler:download-off' : 'tabler:download'
          "
          size="16px"
        />
        <span>
          {{ resource.allow_download ? "禁止下载" : "允许下载" }}
        </span>
      </Button>
      <!-- <Tooltip :delay-duration="0">
        <TooltipTrigger>
          
        </TooltipTrigger>
        <TooltipContent>
          {{ `当前${resource.allow_download ? "允许" : "禁止"}下载` }}
        </TooltipContent>
      </Tooltip> -->
      <Button
        variant="link"
        size="xs"
        class="flex items-center gap-1 text-red-500"
        @click="emit('delete-resource', resource.id)"
      >
        <Icon name="tabler:trash" size="16px" />
        <span>删除</span>
      </Button>
    </div>
  </div>
</template>

<style scoped></style>
