<template>
    <view class="vip-card" @tap="goVip">
        <image v-if="bgImage" class="vip-card__bg" :src="bgImage" mode="aspectFill" />
        <view class="vip-card__content">
            <view class="vip-card__info">
                <text class="vip-card__title">{{ isVip ? vipLevelName : 'VIP会员' }}</text>
                <text class="vip-card__desc">
                    {{ isVip ? '每日无限次AI深度分析报告' : '即刻享受会员专属权益' }}
                </text>
            </view>
            <view class="vip-card__right">
                <text v-if="isVip && remainDays >= 0" class="vip-card__expire">
                    剩余{{ remainDays }}天
                </text>
                <text v-else class="vip-card__btn">限时特惠</text>
            </view>
        </view>
    </view>
</template>

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

const props = defineProps<{
    vipInfo?: {
        is_vip?: boolean
        vip_level?: number
        vip_level_name?: string
        vip_expire_time?: string
        vip_expire_timestamp?: number
        vip_card_image?: string
    }
}>()

const isVip = computed(() => !!props.vipInfo?.is_vip)
const vipLevelName = computed(() => props.vipInfo?.vip_level_name || '会员')

const bgImage = computed(() => {
    const img = props.vipInfo?.vip_card_image || ''
    if (!img) return ''
    if (img.startsWith('http')) return img
    return `${import.meta.env.VITE_APP_BASE_URL || ''}${img}`
})

const remainDays = computed(() => {
    if (!props.vipInfo?.vip_expire_timestamp) return -1
    const now = Math.floor(Date.now() / 1000)
    return Math.max(0, Math.ceil((props.vipInfo.vip_expire_timestamp - now) / 86400))
})

function goVip() {
    uni.navigateTo({ url: '/pages/vip/vip' })
}
</script>

<style lang="scss" scoped>
.vip-card {
    position: relative;
    border-radius: 24rpx;
    overflow: hidden;
    height: 156rpx;
    /* 默认渐变背景：当后端未配置 vip_card_image 时兜底，保证卡片始终可见 */
    background: linear-gradient(135deg, #1a2647 0%, #2a3a73 55%, #3f2459 100%);

    &__bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    &__content {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24rpx 28rpx;
        height: 100%;
    }

    &__info {
        display: flex;
        flex-direction: column;
        gap: 8rpx;
    }

    &__title {
        font-size: 34rpx;
        font-weight: 600;
        color: #a9c6ef;
    }

    &__desc {
        font-size: 22rpx;
        color: #a9c6ef;
    }

    &__right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
    }

    &__expire {
        font-size: 22rpx;
        color: #a9c6ef;
    }

    &__btn {
        height: 56rpx;
        line-height: 56rpx;
        padding: 0 28rpx;
        background: linear-gradient(135deg, #efc8a9, #d4a574);
        border-radius: 28rpx;
        font-size: 24rpx;
        color: #5b2f0b;
        font-weight: 600;
    }
}
</style>
