<template>
    <div class="video-info flex" @click="goDetail">
        <van-image width="110" height="70" fit="cover" radius="12" :src="img" />

        <div class="content">
            <div class="title text-white van-multi-ellipsis--l2 text-sm">{{ info.title }}</div>
            <div class="text-[#00FFE4] text-xs" v-if="history">观看至第{{ episodeNum }}集</div>
            <div class="text text-xs text-[#61657A] flex justify-between">
                <span>{{ category ? category + '·' : '' }}{{ info.totalEpisodes }}集</span>
                <span> {{ info.playCount }}播放</span>
            </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({
    history: {
        type: Boolean,
        default: false
    },
    info: {
        type: Object,
        default: () => {
            return {}
        }
    },
    episodeNum: {
        type: Number,
        default: 0
    }
})

const category = computed(() => {
    if (props.info.categories && props.info.categories.length > 0) {
        return props.info.categories[0].name
    }
    return ''
})
const img = computed(() => {
    return resolveUrl(fileURL, props.info.landscapeCover || props.info.cover)
})
const router = useRouter()
function goDetail() {
    router.push({
        name: 'video',
        query: {
            id: props.info.id
        }
    })
}
</script>

<style lang="less" scoped>
.video-info {
    .content {
        flex-grow: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 12px;
    }
}
</style>
