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

const props = defineProps({
    coupon: {
        type: Object,
        default: () => ({
            ruleReductionAmount: '0',
            ruleMinSpendAmount: '0',
        }),
    }
})
const coupon = computed(() => props.coupon)
console.log(coupon.value)
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 '长期有效'
})

const category = computed(() => {
    const relatedType = props.coupon.relatedType
    if (relatedType === '1') {
        return `限${props.coupon.relatedName}分类商品使用`
    }
    else {
        return `限${props.coupon.relatedName}商品使用`
    }
})
</script>

<template>
    <view class="discount-coupon">
        <image class="coupon-bg" :src="CouponImg" mode="aspectFit" />
        <view class="coupon-content">
            <view class="coupon-amount">
                <view class="coupon-amount-count">
                    <view class="coupon-amount-count-icon">
                        ￥
                    </view>
                    <view class="coupon-amount-count-number">
                        {{ coupon?.ruleReductionAmount }}
                    </view>
                </view>
                <view class="coupon-amount-text">
                    满{{ coupon?.ruleMinSpendAmount }}元可用
                </view>
            </view>
            <view class="coupon-info">
                <view class="coupon-info-category">
                    {{ category }}
                </view>
                <view class="coupon-info-time">
                    <template v-if="coupon.validityType === '1'">
                        <view>{{ deadline }}</view>
                    </template>
                    <template v-else-if="coupon.validityType === '2'">
                        <view>使用日期</view>
                        <view>{{ deadline }}</view>
                    </template>
                    <template v-else>
                        <view>{{ deadline }}</view>
                    </template>
                </view>
            </view>
        </view>
        <view class="discount-btn">
            <view class="coupon-btn-container">
                <view>立即</view>
                <view>发券</view>
            </view>
        </view>
    </view>
</template>

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

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

    .coupon-content {
        position: absolute;
        z-index: 1;
        height: 161.5rpx;
        width: calc(100% - 27.68%);
        padding-top: 18rpx;
        padding-left: 20rpx;
        padding-bottom: 20rpx;
        display: flex;
        flex-direction: row;
        gap: 3rpx;

        .coupon-amount {
            height: 100%;
            width: 32%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .coupon-amount-count {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: baseline;

                .coupon-amount-count-icon {
                    font-weight: 500;
                    font-size: 27rpx;
                    color: #f83003;
                }

                .coupon-amount-count-number {
                    font-weight: 500;
                    font-size: 70rpx;
                    color: #f83003;
                    clear: both;
                }
            }

            .coupon-amount-text {
                font-weight: 400;
                font-size: 24rpx;
                color: #f3513b;
            }
        }

        .coupon-info {
            height: 100%;
            width: 68%;
            display: flex;
            flex-direction: column;
            padding-left: 18rpx;

            .coupon-info-category {
                padding-top: 33rpx;
                font-weight: 400;
                font-size: 32rpx;
                color: #333333;
            }

            .coupon-info-time {
                padding-top: 14rpx;
                display: flex;
                flex-direction: column;
                gap: 5rpx;
                font-weight: 400;
                font-size: 22rpx;
                color: #888888;
            }
        }
    }

    .discount-btn {
        position: absolute;
        right: 0;
        z-index: 1;
        height: 100%;
        width: 27.68%;
        display: flex;
        justify-content: center;
        align-items: center;

        .coupon-btn-container {
            width: 115rpx;
            height: 115rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 10rpx;
            transform: translateX(7rpx);

            font-weight: 500;
            font-size: 28rpx;
            color: #ffffff;
        }
    }
}
</style>
