<template>
  <div
    class="group relative rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer"
  >
    <div class="relative overflow-hidden">
      <img
        :src="item.faceUrl"
        :class="[
          'w-full object-cover group-hover:scale-105 transition-transform duration-500',
          isFromYaPage ? 'h-36 xl:h-44' : 'aspect-video',
        ]"
      />
      <div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>

      <!-- 推荐角标 -->
      <div
        v-if="item.isRecommend"
        class="absolute top-0 left-0 w-15 h-7 bg-#FFF9B9 flex items-center justify-center border-2px border-solid border-#f4f0eb rounded-tl-lg rounded-br-lg"
      >
        <img class="w-6" src="@/assets/img/culture/recommend.png" alt="" />
        <div class="text-12px text-#000 line-height-12px">推荐</div>
      </div>

      <!-- 时长：ya 页常显；其它页仅桌面端显示 -->
      <div
        v-if="item.videoDuration && !smallerThanXl"
        class="absolute bottom-3 right-3 bg-black/80 text-white px-2 py-1 rounded-lg text-xs"
      >
        {{ item.videoDuration }}
      </div>

      <!-- 数据 -->
      <div class="absolute bottom-3 left-3 flex gap-3 text-white text-xs">
        <div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
          <el-icon class="text-sm"><IEpView /></el-icon>
          <span>{{ Math.max(item.playCount ?? 0, item.viewCount) }}</span>
        </div>
        <div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
          <el-icon class="text-sm"><IEpChatDotRound /></el-icon>
          <span>{{ item.replyCount }}</span>
        </div>
        <div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
          <el-icon class="text-sm"><IEpStar /></el-icon>
          <!-- 后端两个字段名不一致，兜底兼容 -->
          <span>{{ item.collectCount ?? item.collectionCount ?? 0 }}</span>
        </div>
      </div>
    </div>

    <div class="p-3 xl:p-4">
      <h3
        class="font-semibold text-base mb-2 group-hover:text-blue-600 transition-colors line-clamp-1"
      >
        {{ item.title }}
      </h3>
      <div class="flex items-center justify-between text-gray-500 text-xs">
        <div class="flex items-center gap-2 max-w-55%">
          <img :src="item.showAvatar" alt="" class="w-6 h-6 rounded-full object-cover" />
          <el-tooltip :content="item.showName" placement="top">
            <span class="font-medium line-clamp-1">{{ item.showName }}</span>
          </el-tooltip>
        </div>
        <span>{{
          smallerThanXl
            ? dayjs(time * 1000).format('YYYY-MM-DD')
            : dayjs(time * 1000).format('YYYY-MM-DD HH:mm')
        }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'

/** 视频卡所需字段（兼容 getVideoList 的 collectCount 与 getArticleList 的 collectionCount） */
interface VideoCardItem {
  faceUrl: string
  isRecommend?: boolean | number
  videoDuration?: string
  playCount?: number
  viewCount: number
  replyCount: number
  collectCount?: number
  collectionCount?: number
  title: string
  showAvatar?: string
  showName?: string
  publishTime?: number
  createTime?: number
}

const { item, isFromYaPage = false } = defineProps<{
  item: VideoCardItem
  /** 是否来自 ya 页面：决定封面尺寸 + 时长是否常显 */
  isFromYaPage?: boolean
}>()

const breakpoints = useBreakpoints(breakpointsTailwind)
const smallerThanXl = breakpoints.smaller('xl')

// 发布时间优先取 publishTime，没有则取 createTime（单位：秒）
const time = computed(() => item.publishTime ?? item.createTime ?? 0)
</script>
