<script lang="ts" setup>
import CouponImg from '@img/index/coupon2.png'
import { pathToBase64 } from 'image-tools'
import { ref } from 'vue'

const couponBgBase64 = ref('')

// 将图片路径转换为base64格式
async function convertImageToBase64() {
    try {
        // 转换首页背景图
        couponBgBase64.value = await pathToBase64(CouponImg)

        console.log('图片转换base64成功')
    }
    catch (error) {
        console.error('图片转换base64失败:', error)
    }
}

onLoad(async () => {
    console.log('测试 uni API 自动引入: onLoad')
    await convertImageToBase64()
})
</script>

<template>
    <view class="discount-coupon" :style="{ backgroundImage: `url(${couponBgBase64})` }">
        <view class="discount-content">
            <view class="discount-amount">
                <view class="discount-amount-number">
                    8
                </view>
                <view class="discount-amount-unit">
                    折
                </view>
            </view>
            <view class="discount-desc">
                <view class="discount-desc-text">
                    满100元可用
                </view>
                <view class="discount-desc-type">
                    限汽车分类商品使用
                </view>
            </view>
        </view>
        <view class="discount-desc-time">
            自领取之日起七日内使用，最高优惠50元
        </view>
        <view class="discount-btn">
            <view>立即</view>
            <view>发券</view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.discount-coupon {
    width: 670rpx;
    height: 209rpx;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: cover;
    position: relative;

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

        .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;
            }
        }
    }

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

    .discount-btn {
        position: absolute;
        font-weight: 500;
        font-size: 28rpx;
        color: #ffffff;
        top: 50%;
        right: 20rpx;
        transform: translate(-51%, -49%);

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10rpx;
    }
}
</style>
