<template>
    <navigator :url="`/pages/news_detail/news_detail?id=${item.id}`" class="feed-card">
        <view class="feed-card__body">
            <view class="feed-card__info">
                <text class="feed-card__title">{{ item.title }}</text>
                <text v-if="descText" class="feed-card__desc">{{ descText }}</text>
                <view class="feed-card__footer">
                    <text class="feed-card__author">{{ authorText }}</text>
                    <text class="feed-card__time">{{ formatRelativeTime(item.create_time) }}</text>
                    <view class="feed-card__comments">
                        <view class="feed-card__comment-icon" />
                        <text>{{ item.comment_count || item.click || 0 }}</text>
                    </view>
                </view>
            </view>
            <image v-if="item.image && !imageFailed" :src="item.image" mode="aspectFill" class="feed-card__img"
                referrerpolicy="no-referrer" @error="imageFailed = true" />
        </view>
    </navigator>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'

const props = withDefaults(
    defineProps<{
        item: any
    }>(),
    {
        item: () => ({})
    }
)

const imageFailed = ref(false)

const stripHtml = (html: string) => {
    if (!html) return ''
    return html.replace(/<[^>]+>/g, ' ').replace(/&nbsp;/g, ' ').replace(/\s+/g, ' ').trim()
}

const descText = computed(() => {
    return stripHtml(props.item.desc || props.item.content || '').slice(0, 72)
})

const authorText = computed(() => {
    const rawAuthor = String(props.item.author || '')
    const cleanedAuthor = rawAuthor.replace(/@懂球帝/g, '').trim()
    return cleanedAuthor || 'SB 体育头条'
})

const formatRelativeTime = (time: string) => {
    if (!time) return ''
    const date = new Date(String(time).replace(/-/g, '/'))
    const delta = Date.now() - date.getTime()
    if (Number.isNaN(date.getTime()) || delta < 0) return String(time)
    const minute = 60 * 1000
    if (delta < minute) return '刚刚'
    if (delta < 60 * minute) return `${Math.floor(delta / minute)}分钟前`
    if (delta < 24 * 60 * minute) return `${Math.floor(delta / (60 * minute))}小时前`
    if (delta < 7 * 24 * 60 * minute) return `${Math.floor(delta / (24 * 60 * minute))}天前`
    return `${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}
</script>

<style lang="scss" scoped>
.feed-card {
    display: block;
    padding: 22rpx 20rpx;
    background: #fff;
    border-top: 1rpx solid #edf0f5;

    &:first-child {
        border-top: 0;
    }

    &__body {
        display: flex;
        align-items: stretch;
        gap: 20rpx;
        min-height: 144rpx;
    }

    &__info {
        min-width: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    &__title {
        display: -webkit-box;
        overflow: hidden;
        color: #151b26;
        font-size: 28rpx;
        font-weight: 700;
        line-height: 1.4;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    &__desc {
        display: -webkit-box;
        overflow: hidden;
        margin-top: 8rpx;
        color: #7c8798;
        font-size: 24rpx;
        line-height: 1.42;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    &__footer {
        display: flex;
        align-items: center;
        gap: 18rpx;
        min-width: 0;
        margin-top: auto;
        padding-top: 12rpx;
        color: #909aaa;
        font-size: 22rpx;
        line-height: 1.2;
    }

    &__author,
    &__time {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    &__author {
        max-width: 156rpx;
    }

    &__comments {
        display: flex;
        align-items: center;
        gap: 6rpx;
        min-width: 0;
        margin-left: auto;
        white-space: nowrap;
    }

    &__comment-icon {
        position: relative;
        width: 24rpx;
        height: 19rpx;
        box-sizing: border-box;
        border: 2rpx solid #8e99a9;
        border-radius: 10rpx;

        &::after {
            content: '';
            position: absolute;
            right: 1rpx;
            bottom: -5rpx;
            width: 7rpx;
            height: 7rpx;
            box-sizing: border-box;
            border-right: 2rpx solid #8e99a9;
            border-bottom: 2rpx solid #8e99a9;
            background: #fff;
            transform: rotate(28deg);
        }
    }

    &__img {
        width: 216rpx;
        height: 144rpx;
        flex-shrink: 0;
        border-radius: 12rpx;
        background: #eef1f5;
    }
}
</style>
