<script setup lang="ts">
const props = defineProps({
  record: {
    type: Object,
    required: true,
  },
})

const dayjs = useDayjs()
</script>

<template>
  <div
    class="relative w-full aspect-video rounded-lg overflow-hidden shadow"
  >
    <NuxtImg :src="record.video_cover"></NuxtImg>
    <div class="absolute inset-0 flex flex-col justify-between bg-black/10 bg-gradient-to-t from-black/20">
      <div class="flex justify-between items-start p-2.5 gap-2">
        <div>
          <UButton icon="i-solar-play-circle-bold-duotone">预览</UButton>
        </div>
        <div class="flex flex-col items-end gap-1">
          <UTooltip :text="record.task_id" :close-delay="300">
            <h1 class="text-white text-xs font-bold font-sans">
              ID: {{ record.task_id.slice(0, 6) }}
            </h1>
          </UTooltip>
          <UTooltip :text="dayjs(record.create_time * 1000).format('YYYY-MM-DD HH:mm:ss')">
            <h1 class="text-white text-xs font-bold font-sans">
              {{ dayjs(record.create_time * 1000).fromNow() }}
            </h1>
          </UTooltip>
        </div>
<!--        <UProgress-->
<!--          size="md"-->
<!--          indicator-->
<!--          :ui="{-->
<!--          wrapper: 'flex-col-reverse',-->
<!--            progress: {-->
<!--              base: '!bg-opacity-50'-->
<!--            }-->
<!--          }"-->
<!--          :value="10"-->
<!--          :max="100"-->
<!--          :animation="'carousel'"-->
<!--        />-->
      </div>
      <div class="flex justify-between items-center p-2.5 gap-2">
        <div class="overflow-hidden whitespace-nowrap">
          <UTooltip
            :text="record.title"
            :popper="{
              placement: 'bottom-start'
            }"
            :open-delay="300"
            :close-delay="300"
            class="w-full"
          >
            <h1 class="text-white text-base font-bold font-sans drop-shadow overflow-hidden text-ellipsis leading-none">
              {{ record.title }}
            </h1>
          </UTooltip>
        </div>
        <div class="flex-1 whitespace-nowrap flex gap-1.5">
          <UButton
            size="xs"
            color="red"
            variant="soft"
            icon="i-tabler-trash"
          />
          <UButton
            size="xs"
            color="primary"
            variant="soft"
            icon="i-solar-subtitles-linear"
          >
            字幕
          </UButton>
          <UButton
            size="xs"
            icon="i-tabler-download"
          >
            下载
          </UButton>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>