<script lang="ts" setup>
import CouponImg from '@img/index/coupon2.png'

const props = defineProps({
    coupon: {
        type: Object,
        default: () => ({
            ruleDiscountRate: '0',
            ruleMinSpendAmount: '0',
            relatedName: '',
            ruleDiscountCapAmount: '0',
            validityType: '1',
        }),
    }
})
const coupon = computed(() => props.coupon)
const deadline = computed(() => {
    const type = props.coupon.validityType
    if (type === '1') {
        return `自领取之日起${props.coupon.validDays}日内使用`
    }
    else if (type === '2') {
        return `限${props.coupon.validStartTime}到${props.coupon.validEndTime}日内使用`
    }
    return '长期有效'
})
</script>

<template>
    <view class="discount-coupon">
        <image class="coupon-bg" :src="CouponImg" mode="aspectFill" />
        <view class="discount-content">
            <view class="discount-amount">
                <view class="discount-amount-number">
                    {{ coupon.ruleDiscountRate }}
                </view>
                <view class="discount-amount-unit">
                    折
                </view>
            </view>
            <view class="discount-desc">
                <view class="discount-desc-text">
                    满{{ coupon.ruleMinSpendAmount }}元可用
                </view>
                <view class="discount-desc-type">
                    限{{ coupon.relatedName }}商品使用
                </view>
            </view>
        </view>
        <view class="discount-desc-time">
            {{ deadline }}，最高优惠{{ coupon.ruleDiscountCapAmount }}元
        </view>
        <view class="discount-btn">
            <view>立即</view>
            <view>发券</view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.discount-coupon {
    // width: 670rpx;
    width: 100%;
    max-width: 800rpx;
    height: 209rpx;
    position: relative;
    overflow: hidden;

    .coupon-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

    .discount-content {
        height: 95rpx;
        position: absolute;
        top: 35%;
        left: 43%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 30rpx;
        z-index: 1;

        .discount-amount {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: flex-end;
            gap: 6rpx;

            .discount-amount-number {
                flex: 1;
                font-weight: 500;
                font-size: 132rpx;
                color: #f8204b;
                margin-bottom: -16rpx;
            }

            .discount-amount-unit {
                flex: 1;
                font-weight: 500;
                font-size: 56rpx;
                color: #f8204b;
            }
        }

        .discount-desc {
            display: flex;
            flex-direction: column;
            gap: 13rpx;
            justify-content: center;
            padding-top: 17rpx;

            .discount-desc-text {
                font-weight: bold;
                font-size: 30rpx;
                color: #333333;
            }

            .discount-desc-type {
                font-weight: 400;
                font-size: 22rpx;
                color: #333333;
                line-height: 30rpx;
            }
        }
    }

    .discount-desc-time {
        position: absolute;
        bottom: 8%;
        left: 5%;
        // transform: translate(0, -50%);
        font-weight: 400;
        font-size: 18rpx;
        color: #666666;
        z-index: 1;
    }

    .discount-btn {
        position: absolute;
        font-weight: 500;
        font-size: 28rpx;
        color: #ffffff;
        top: 50%;
        right: 7%;
        transform: translateY(-60%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10rpx;
        z-index: 1;
    }
}
</style>
