<template>
    <div @click="goDetail" class="video-info inline-block">
        <div class="top relative">
            <van-image width="calc(33vw - 21.33px)" height="140" fit="cover" radius="12" :src="img" />
            <div class="top-text text-[10px] text-white p-[8px] absolute bottom-0 left-0 right-0">
                {{ history ? `观看至第${episodeNum}集` : `${info.playCount}播放` }}
            </div>
        </div>
        <div class="content">
            <div class="text-sm text-white van-ellipsis">{{ info.title }}</div>
            <div class="text-xs text-[#61657A]">{{ category ? category + '·' : '' }}{{ info.totalEpisodes }}集</div>
        </div>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import resolveUrl from 'resolve-url'
import { computed } from 'vue'

const fileURL = import.meta.env.VITE_HTTP_FILE_URL

const props = defineProps({
    info: {
        type: Object,
        default: () => {
            return {}
        }
    },
    history: {
        type: Boolean,
        default: false
    },
    episodeNum: {
        type: Number,
        default: 0
    }
})

const img = computed(() => {
    return resolveUrl(fileURL, props.info.cover)
})

const category = computed(() => {
    if (props.info.categories && props.info.categories.length > 0) {
        return props.info.categories[0].name
    }
    return ''
})

const router = useRouter()
function goDetail() {
    router.push({
        name: 'video',
        query: {
            id: props.info.id
        }
    })
}
</script>

<style lang="less" scoped>
.video-info {
    width: calc(33vw - 21.33px);
}
.top-text {
    background: linear-gradient(180deg, rgba(17, 19, 30, 0) 0%, rgba(17, 19, 30, 0.2) 51%, rgba(17, 19, 30, 0.8) 100%);
    border-radius: 0px 0px 12px 12px;
}
</style>
