<template>
    <view class="news-card flex bg-white px-[20rpx] py-[32rpx]" @tap="goDetail">
        <view class="mr-[20rpx]" v-if="item.image">
            <u-image :src="item.image" width="240" height="180"></u-image>
        </view>
        <view class="news-card-content flex flex-col justify-between flex-1">
            <view class="news-card-content-title text-base">{{ item.title }}</view>
            <view class="news-card-content-intro text-gray-400 text-sm mt-[16rpx]">
                {{ item.desc }}
            </view>

            <view class="text-muted text-xs w-full flex justify-between mt-[12rpx]">
                <view>{{ item.create_time }}</view>
                <view class="flex items-center">
                    <image src="/static/images/icon/icon_visit.png" class="w-[30rpx] h-[30rpx]"></image>
                    <view class="ml-[10rpx]">{{ item.click }}</view>
                </view>
            </view>

            <view v-if="enableTranslate" class="news-card-translate">
                <view class="news-card-translate__btn" @tap.stop="emit('translate', item)">
                    <text>AI翻译</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
const props = withDefaults(
    defineProps<{
        item: any
        newsId: number
        enableTranslate?: boolean
    }>(),
    {
        item: {},
        newsId: '',
        enableTranslate: false
    }
)

const emit = defineEmits(['translate'])

const goDetail = () => {
    uni.navigateTo({ url: `/pages/news_detail/news_detail?id=${props.newsId}` })
}
</script>

<style lang="scss" scoped>
.news-card {
    border-bottom: 1px solid #f8f8f8;

    &-content {
        &-title {
            -webkit-line-clamp: 2;
            overflow: hidden;
            word-break: break-word;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }

        &-intro {
            -webkit-line-clamp: 1;
            overflow: hidden;
            word-break: break-word;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
    }

    &-translate {
        margin-top: 16rpx;

        &__btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12rpx 18rpx;
            border-radius: 999rpx;
            background: linear-gradient(135deg, #0ea5e9, #2563eb);
            color: #fff;
            font-size: 22rpx;
            font-weight: 600;
        }
    }
}
</style>
