<template>
    <view class="monthgift">
        <!-- 根据展示等级动态显示对应等级页面 -->
        <view v-if="currentLevelName === 'diamond'" class="diamond">
            <image class="diamondbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BG}`" mode="aspectFit"></image>
            <view class="diamondgoodcoupon">
                <view class="diamondgoodcoupons">
                    <image class="diamondgoodcouponstitle"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.TITLE}`" mode="aspectFit"></image>
                    <image class="diamondgoodcouponsbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.BG}`"
                        mode="aspectFit"></image>
                    <image class="diamondgoodcoupons1"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.COUPON1}`" mode="aspectFit"></image>
                    <image class="diamondgoodcoupons2"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.COUPON2}`" mode="aspectFit"></image>
                    <image class="diamondgoodcoupons3"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.COUPON3}`" mode="aspectFit"></image>
                    <image class="diamondgoodcoupons4"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.COUPON4}`" mode="aspectFit"></image>
                    <image class="diamondgoodcoupons5"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.COUPON5}`" mode="aspectFit"></image>
                </view>
                <!-- 精选好券按钮 -->
                <view class="coupon-button-container">
                    <button class="coupon-btn" :class="getCouponButtonClass('diamond')"
                        @click="handleCouponClick('diamond')">
                        {{ getCouponButtonText('diamond') }}
                    </button>
                    <!-- 调试信息 -->
                    <view v-if="__DEV__" style="font-size: 12px; color: #999; margin-top: 5px;">
                        状态: {{ state.couponStatus.diamond }}
                    </view>
                </view>
            </view>
            <view class="diamond1buycom">
                <!-- 时间段背景图片 - 根据选中状态动态显示 -->
                <image v-if="state.selectedTimeSlot === 3" class="diamond1buycomsel4"
                    :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.SEL4}`" mode="aspectFit"></image>
                <image v-if="state.selectedTimeSlot === 2" class="diamond1buycomsel3"
                    :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.SEL3}`" mode="aspectFit"></image>
                <image v-if="state.selectedTimeSlot === 1" class="diamond1buycomsel2"
                    :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.SEL2}`" mode="aspectFit"></image>
                <image v-if="state.selectedTimeSlot === 0" class="diamond1buycomsel1"
                    :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.SEL1}`" mode="aspectFit"></image>

                <!-- 时间段选择 -->
                <view class="diamond1buycomtime1" @click="switchTimeSlot(0)" :class="getTimeSlotClass(0)">
                    <image class="diamond1buycomtime1text"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.TIME1.TEXT}`" mode="aspectFit"></image>
                    <image class="diamond1buycomtime1status"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.TIME1.STATUS}`" mode="aspectFit"
                        v-if="!isLevelSufficient()">
                    </image>
                </view>
                <view class="diamond1buycomtime2" @click="switchTimeSlot(1)" :class="getTimeSlotClass(1)">
                    <image class="diamond1buycomtime2text"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.TIME2.TEXT}`" mode="aspectFit"></image>
                    <image class="diamond1buycomtime2status"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.TIME2.STATUS}`" mode="aspectFit"
                        v-if="!isLevelSufficient()">
                    </image>
                </view>
                <view class="diamond1buycomtime3" @click="switchTimeSlot(2)" :class="getTimeSlotClass(2)">
                    <image class="diamond1buycomtime3text"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.TIME3.TEXT}`" mode="aspectFit"></image>
                    <image class="diamond1buycomtime3status"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.TIME3.STATUS}`" mode="aspectFit"
                        v-if="!isLevelSufficient()">
                    </image>
                </view>
                <view class="diamond1buycomtime4" @click="switchTimeSlot(3)" :class="getTimeSlotClass(3)">
                    <image class="diamond1buycomtime4text"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.TIME4.TEXT}`" mode="aspectFit"></image>
                    <image class="diamond1buycomtime4status"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.TIME4.STATUS}`" mode="aspectFit"
                        v-if="!isLevelSufficient()">
                    </image>
                </view>
                <view class="diamond1buycomgoods">
                    <image class="diamond1buycomgoodsbg"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.GOODS.BG}`" mode="aspectFit"></image>
                    <!-- 限时1分购按钮 -->
                    <view class="buy-button-container">
                        <button class="buy-btn" :class="getBuyButtonClass('diamond')"
                            @click="handleBuyClick('diamond')">
                            {{ getBuyButtonText('diamond') }}
                        </button>
                    </view>
                </view>
                <image class="diamond1buycomtitle" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.TITLE}`"
                    mode="aspectFit"></image>
                <image class="diamond1buycomdesc" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.DESC}`"
                    mode="aspectFit"></image>
                <!-- <image class="diamond1buycomstatus" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.STATUS}`"
                    mode="aspectFit"></image> -->
            </view>
        </view>

        <view v-if="currentLevelName === 'starshine'" class="starshine">
            <image class="starshinebg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BG}`" mode="aspectFit"></image>
            <view class="starshinegoodcoupon">
                <view class="starshinegoodcoupons">
                    <image class="starshinegoodcouponstitle"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.TITLE}`" mode="aspectFit"></image>
                    <image class="starshinegoodcouponsbg"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.BG}`" mode="aspectFit"></image>
                    <image class="starshinegoodcoupons1"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.COUPON1}`" mode="aspectFit">
                    </image>
                    <image class="starshinegoodcoupons2"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.COUPON2}`" mode="aspectFit">
                    </image>
                    <image class="starshinegoodcoupons3"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.COUPON3}`" mode="aspectFit">
                    </image>
                    <image class="starshinegoodcoupons4"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.COUPON4}`" mode="aspectFit">
                    </image>
                    <image class="starshinegoodcoupons5"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.COUPON5}`" mode="aspectFit">
                    </image>
                </view>
                <!-- 精选好券按钮 -->
                <view class="coupon-button-container">
                    <button class="coupon-btn" :class="getCouponButtonClass('starshine')"
                        @click="handleCouponClick('starshine')">
                        {{ getCouponButtonText('starshine') }}
                    </button>
                </view>
            </view>
            <view class="starshine1buycom">
                <!-- 时间段背景图片 - 根据选中状态动态显示 -->
                <image v-if="state.selectedTimeSlot === 3" class="starshine1buycomsel4"
                    :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.SEL4}`" mode="aspectFit"></image>
                <image v-if="state.selectedTimeSlot === 2" class="starshine1buycomsel3"
                    :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.SEL3}`" mode="aspectFit"></image>
                <image v-if="state.selectedTimeSlot === 1" class="starshine1buycomsel2"
                    :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.SEL2}`" mode="aspectFit"></image>
                <image v-if="state.selectedTimeSlot === 0" class="starshine1buycomsel1"
                    :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.SEL1}`" mode="aspectFit"></image>

                <!-- 时间段选择 -->
                <view class="starshine1buycomtime1" @click="switchTimeSlot(0)" :class="getTimeSlotClass(0)">
                    <image class="starshine1buycomtime1text"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME1.TEXT}`" mode="aspectFit"></image>
                    <image class="starshine1buycomtime1status"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME1.STATUS}`" mode="aspectFit"
                        v-if="!isLevelSufficient()">
                    </image>
                </view>
                <view class="starshine1buycomtime2" @click="switchTimeSlot(1)" :class="getTimeSlotClass(1)">
                    <image class="starshine1buycomtime2text"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME2.TEXT}`" mode="aspectFit"></image>
                    <image class="starshine1buycomtime2status"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME2.STATUS}`" mode="aspectFit"
                        v-if="!isLevelSufficient()">
                    </image>
                </view>
                <view class="starshine1buycomtime3" @click="switchTimeSlot(2)" :class="getTimeSlotClass(2)">
                    <image class="starshine1buycomtime3text"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME3.TEXT}`" mode="aspectFit"></image>
                    <image class="starshine1buycomtime3status"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME3.STATUS}`" mode="aspectFit"
                        v-if="!isLevelSufficient()"></image>
                </view>
                <view class="starshine1buycomtime4" @click="switchTimeSlot(3)" :class="getTimeSlotClass(3)">
                    <image class="starshine1buycomtime4text"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME4.TEXT}`" mode="aspectFit"></image>
                    <image class="starshine1buycomtime4status"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME4.STATUS}`" mode="aspectFit"
                        v-if="!isLevelSufficient()">
                    </image>
                </view>
                <view class="starshine1buycomgoods">
                    <image class="starshine1buycomgoodsbg"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.GOODS.BG}`" mode="aspectFit"></image>
                    <!-- 限时1分购按钮 -->
                    <view class="buy-button-container">
                        <button class="buy-btn" :class="getBuyButtonClass('starshine')"
                            @click="handleBuyClick('starshine')">
                            {{ getBuyButtonText('starshine') }}
                        </button>
                    </view>
                </view>
                <!-- <image class="starshine1buycomstatus" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.STATUS}`"
                    mode="aspectFit"></image> -->
                <image class="starshine1buycomtitle" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TITLE}`"
                    mode="aspectFit"></image>
                <image class="starshine1buycomdesc" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.DESC}`"
                    mode="aspectFit"></image>
            </view>
        </view>

        <view v-if="currentLevelName === 'starlight'" class="starlight">
            <image class="starlightbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BG}`" mode="aspectFit"></image>
            <view class="startlightgoodcoupon">
                <view class="startlightgoodcoupons">
                    <image class="startlightgoodcouponstitle"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.TITLE}`" mode="aspectFit"></image>
                    <image class="startlightgoodcouponsbg"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.BG}`" mode="aspectFit"></image>
                    <image class="startlightgoodcoupons1"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.COUPON1}`" mode="aspectFit">
                    </image>
                    <image class="startlightgoodcoupons2"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.COUPON2}`" mode="aspectFit">
                    </image>
                    <image class="startlightgoodcoupons3"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.COUPON3}`" mode="aspectFit">
                    </image>
                    <image class="startlightgoodcoupons4"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.COUPON4}`" mode="aspectFit">
                    </image>
                    <image class="startlightgoodcoupons5"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.COUPON5}`" mode="aspectFit">
                    </image>
                </view>
                <!-- 精选好券按钮 -->
                <view class="coupon-button-container">
                    <button class="coupon-btn" :class="getCouponButtonClass('starlight')"
                        @click="handleCouponClick('starlight')">
                        {{ getCouponButtonText('starlight') }}
                    </button>
                </view>
            </view>
            <view class="startlight1buycom">
                <!-- 时间段背景图片 - 根据选中状态动态显示 -->
                <image v-if="state.selectedTimeSlot === 3" class="startlight1buycomsel4"
                    :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.SEL4}`" mode="aspectFit"></image>
                <image v-if="state.selectedTimeSlot === 2" class="startlight1buycomsel3"
                    :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.SEL3}`" mode="aspectFit"></image>
                <image v-if="state.selectedTimeSlot === 1" class="startlight1buycomsel2"
                    :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.SEL2}`" mode="aspectFit"></image>
                <image v-if="state.selectedTimeSlot === 0" class="startlight1buycomsel1"
                    :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.SEL1}`" mode="aspectFit"></image>

                <!-- 时间段选择 -->
                <view class="startlight1buycomtime1" @click="switchTimeSlot(0)" :class="getTimeSlotClass(0)">
                    <image class="startlight1buycomtime1text"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME1.TEXT}`" mode="aspectFit"></image>
                    <image class="startlight1buycomtime1status"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME1.STATUS}`" mode="aspectFit"
                        v-if="!isLevelSufficient()">
                    </image>
                </view>
                <view class="startlight1buycomtime2" @click="switchTimeSlot(1)" :class="getTimeSlotClass(1)">
                    <image class="startlight1buycomtime2text"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME2.TEXT}`" mode="aspectFit"></image>
                    <image class="startlight1buycomtime2status"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME2.STATUS}`" mode="aspectFit"
                        v-if="!isLevelSufficient()">
                    </image>
                </view>
                <view class="startlight1buycomtime3" @click="switchTimeSlot(2)" :class="getTimeSlotClass(2)">
                    <image class="startlight1buycomtime3text"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME3.TEXT}`" mode="aspectFit"></image>
                    <image class="startlight1buycomtime3status"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME3.STATUS}`" mode="aspectFit"
                        v-if="!isLevelSufficient()"></image>
                </view>
                <view class="startlight1buycomtime4" @click="switchTimeSlot(3)" :class="getTimeSlotClass(3)">
                    <image class="startlight1buycomtime4text"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME4.TEXT}`" mode="aspectFit"></image>
                    <image class="startlight1buycomtime4status"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME4.STATUS}`" mode="aspectFit"
                        v-if="!isLevelSufficient()">
                    </image>
                </view>
                <view class="startlight1buycomgoods">
                    <image class="startlight1buycomgoodsbg"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.GOODS.BG}`" mode="aspectFit"></image>
                    <!-- 限时1分购按钮 -->
                    <view class="buy-button-container">
                        <button class="buy-btn" :class="getBuyButtonClass('starlight')"
                            @click="handleBuyClick('starlight')">
                            {{ getBuyButtonText('starlight') }}
                        </button>
                    </view>
                </view>
                <image class="startlight1buycomtitle" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TITLE}`"
                    mode="aspectFit"></image>
                <image class="startlight1buycomdesc" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.DESC}`"
                    mode="aspectFit"></image>
                <!-- <image class="startlight1buycomstatus" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.STATUS}`"
                    mode="aspectFit"></image> -->
            </view>
        </view>

        <view v-if="currentLevelName === 'gold'" class="gold">
            <image class="goldbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BG}`" mode="aspectFit"></image>
            <view class="goldgoodcoupon">
                <view class="goldgoodcoupons">
                    <image class="goldgoodcouponstitle" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.TITLE}`"
                        mode="aspectFit"></image>
                    <image class="goldgoodcouponsbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.BG}`"
                        mode="aspectFit"></image>
                    <image class="goldgoodcoupons1" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.COUPON1}`"
                        mode="aspectFit"></image>
                    <image class="goldgoodcoupons2" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.COUPON2}`"
                        mode="aspectFit"></image>
                    <image class="goldgoodcoupons3" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.COUPON3}`"
                        mode="aspectFit"></image>
                    <image class="goldgoodcoupons4" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.COUPON4}`"
                        mode="aspectFit"></image>
                    <image class="goldgoodcoupons5" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.COUPON5}`"
                        mode="aspectFit"></image>
                </view>
                <!-- 精选好券按钮 -->
                <view class="coupon-button-container">
                    <button class="coupon-btn" :class="getCouponButtonClass('gold')" @click="handleCouponClick('gold')">
                        {{ getCouponButtonText('gold') }}
                    </button>
                </view>
            </view>
            <view class="gold1buycom">
                <image class="gold1buycomtitle" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TITLE}`"
                    mode="aspectFit"></image>
                <image class="gold1buycomdesc" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.DESC}`"
                    mode="aspectFit"></image>
                <!-- <image class="gold1buycomstatus" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.STATUS}`"
                    mode="aspectFit"></image> -->
                <!-- 时间段背景图片 - 根据选中状态动态显示 -->
                <image v-if="state.selectedTimeSlot === 3" class="gold1buycomsel4"
                    :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.SEL4}`" mode="aspectFit"></image>
                <image v-if="state.selectedTimeSlot === 2" class="gold1buycomsel3"
                    :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.SEL3}`" mode="aspectFit"></image>
                <image v-if="state.selectedTimeSlot === 1" class="gold1buycomsel2"
                    :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.SEL2}`" mode="aspectFit"></image>
                <image v-if="state.selectedTimeSlot === 0" class="gold1buycomsel1"
                    :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.SEL1}`" mode="aspectFit"></image>

                <!-- 时间段选择 -->
                <view class="gold1buycomtime1" @click="switchTimeSlot(0)" :class="getTimeSlotClass(0)">
                    <image class="gold1buycomtime1text" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME1.TEXT}`"
                        mode="aspectFit"></image>
                    <image class="gold1buycomtime1status"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME1.STATUS}`" mode="aspectFit"
                        v-if="!isLevelSufficient()">
                    </image>
                </view>
                <view class="gold1buycomtime2" @click="switchTimeSlot(1)" :class="getTimeSlotClass(1)">
                    <image class="gold1buycomtime2text" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME2.TEXT}`"
                        mode="aspectFit"></image>
                    <image class="gold1buycomtime2status"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME2.STATUS}`" mode="aspectFit"
                        v-if="!isLevelSufficient()">
                    </image>
                </view>
                <view class="gold1buycomtime3" @click="switchTimeSlot(2)" :class="getTimeSlotClass(2)">
                    <image class="gold1buycomtime3text" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME3.TEXT}`"
                        mode="aspectFit"></image>
                    <image class="gold1buycomtime3status"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME3.STATUS}`" mode="aspectFit"
                        v-if="!isLevelSufficient()"></image>
                </view>
                <view class="gold1buycomtime4" @click="switchTimeSlot(3)" :class="getTimeSlotClass(3)">
                    <image class="gold1buycomtime4text" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME4.TEXT}`"
                        mode="aspectFit"></image>
                    <image class="gold1buycomtime4status"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME4.STATUS}`" mode="aspectFit"
                        v-if="!isLevelSufficient()">
                    </image>
                </view>
                <view class="gold1buycomgoods">
                    <image class="gold1buycomgoodsbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.GOODS.BG}`"
                        mode="aspectFit"></image>
                    <!-- 限时1分购按钮 -->
                    <view class="buy-button-container">
                        <button class="buy-btn" :class="getBuyButtonClass('gold')" @click="handleBuyClick('gold')">
                            {{ getBuyButtonText('gold') }}
                        </button>
                    </view>
                </view>
            </view>
            <image class="goldlocktip" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.LOCKTIP}`" mode="aspectFit"></image>
        </view>

        <view v-if="currentLevelName === 'platinum'" class="platinum">
            <image class="platinumbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BG}`" mode="aspectFit"></image>
            <view class="platinumgoodcoupon">
                <view class="platinumgoodcoupons">
                    <image class="platinumgoodcoupontitle"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.TITLE}`" mode="aspectFit"></image>
                    <image class="platinumgoodcouponbg"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.BG}`" mode="aspectFit"></image>
                    <image class="platinumgoodcoupons1"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.COUPON1}`" mode="aspectFit"></image>
                    <image class="platinumgoodcoupons2"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.COUPON2}`" mode="aspectFit"></image>
                    <image class="platinumgoodcoupons3"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.COUPON3}`" mode="aspectFit"></image>
                    <image class="platinumgoodcoupons4"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.COUPON4}`" mode="aspectFit"></image>
                    <image class="platinumgoodcoupons5"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.COUPON5}`" mode="aspectFit"></image>
                </view>
                <!-- 精选好券按钮 -->
                <view class="coupon-button-container">
                    <button class="coupon-btn" :class="getCouponButtonClass('platinum')"
                        @click="handleCouponClick('platinum')">
                        {{ getCouponButtonText('platinum') }}
                    </button>
                </view>
            </view>
            <view class="platinum1buycom">
                <image class="platinum1buycomtitle" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TITLE}`"
                    mode="aspectFit"></image>
                <image class="platinum1buycomdesc" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.DESC}`"
                    mode="aspectFit"></image>
                <!-- <image class="platinum1buycomstatus" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.STATUS}`"
                    mode="aspectFit"></image> -->
                <!-- 时间段背景图片 - 根据选中状态动态显示 -->
                <image v-if="state.selectedTimeSlot === 3" class="platinum1buycomsel4"
                    :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.SEL4}`" mode="aspectFit"></image>
                <image v-if="state.selectedTimeSlot === 2" class="platinum1buycomsel3"
                    :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.SEL3}`" mode="aspectFit"></image>
                <image v-if="state.selectedTimeSlot === 1" class="platinum1buycomsel2"
                    :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.SEL2}`" mode="aspectFit"></image>
                <image v-if="state.selectedTimeSlot === 0" class="platinum1buycomsel1"
                    :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.SEL1}`" mode="aspectFit"></image>
                <!-- 时间段选择 -->
                <view class="platinum1buycomtime1" @click="switchTimeSlot(0)" :class="getTimeSlotClass(0)">
                    <image class="platinum1buycomtime1text"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME1.TEXT}`" mode="aspectFit"></image>
                    <image class="platinum1buycomtime1status"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME1.STATUS}`" mode="aspectFit"
                        v-if="!isLevelSufficient()">
                    </image>
                </view>
                <view class="platinum1buycomtime2" @click="switchTimeSlot(1)" :class="getTimeSlotClass(1)">
                    <image class="platinum1buycomtime2text"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME2.TEXT}`" mode="aspectFit"></image>
                    <image class="platinum1buycomtime2status"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME2.STATUS}`" mode="aspectFit"
                        v-if="!isLevelSufficient()">
                    </image>
                </view>
                <view class="platinum1buycomtime3" @click="switchTimeSlot(2)" :class="getTimeSlotClass(2)">
                    <image class="platinum1buycomtime3text"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME3.TEXT}`" mode="aspectFit"></image>
                    <image class="platinum1buycomtime3status"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME3.STATUS}`" mode="aspectFit"
                        v-if="!isLevelSufficient()"></image>
                </view>
                <view class="platinum1buycomtime4" @click="switchTimeSlot(3)" :class="getTimeSlotClass(3)">
                    <image class="platinum1buycomtime4text"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME4.TEXT}`" mode="aspectFit"></image>
                    <image class="platinum1buycomtime4status"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME4.STATUS}`" mode="aspectFit"
                        v-if="!isLevelSufficient()">
                    </image>
                </view>
                <view class="platinum1buycomgoods">
                    <image class="platinum1buycomgoodsbg"
                        :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.GOODS.BG}`" mode="aspectFit"></image>
                    <!-- 限时1分购按钮 -->
                    <view class="buy-button-container">
                        <button class="buy-btn" :class="getBuyButtonClass('platinum')"
                            @click="handleBuyClick('platinum')">
                            {{ getBuyButtonText('platinum') }}
                        </button>
                    </view>
                </view>
            </view>
            <image class="platinumlocktip" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.LOCKTIP}`" mode="aspectFit">
            </image>
        </view>

        <!-- 精选好券领取成功弹窗 -->

        <!-- 精选好卷弹窗 isUnlock  // 是否解锁 商品兑换券  type  1 黄金、2 铂金、3 钻石、4 星光、5 星耀 -->
        <popup-jingxuan v-if="state.showJingxuanPopup" :type=LEVEL_TO_POPUP_TYPE[currentLevelName] isUnlock="true"
            @close="closeJingxuanPopup"></popup-jingxuan>


    </view>
</template>

<script setup>
import { getCurrentInstance, reactive, computed, onMounted, watch, onUnmounted } from 'vue'
import { MONTH_GIFT_IMAGES } from './monthGiftImages.js'
import { monthlyGiftIndex, monthlyGiftDrawOne, monthlyGiftDrawAll } from '../../api/monthGift.js'
import { jump } from '../../utils/index.js'
// import popupJingxuan from '../popup-jingxuan/popup-jingxuan.vue'

// 获取全局属性
const { proxy } = getCurrentInstance()
const $baseUrl = proxy.$baseUrl

// 接收用户等级参数
const props = defineProps({
    currentLevel: {
        type: Number,
        required: true,
        validator: (value) => [0, 1, 2, 3, 4].includes(value)
    },
    userLevel: {
        type: Number,
        required: true,
        validator: (value) => [0, 1, 2, 3, 4].includes(value)
    }
})

// 业务逻辑状态
const state = reactive({
    // 精选好券状态 - 根据 equityCouponList 动态生成
    couponStatus: {
        diamond: 'unlocked', // 'locked', 'unlocked', 'used'
        starshine: 'unlocked',
        starlight: 'unlocked',
        gold: 'unlocked',
        platinum: 'unlocked'
    },
    // 限时1分购状态 - 根据 batchCoupon 动态生成
    buyStatus: {
        diamond: 'locked', // 'locked', 'unlocked', 'purchased'
        starshine: 'locked',
        starlight: 'locked',
        gold: 'locked',
        platinum: 'locked'
    },
    // 当前选中的时间段
    selectedTimeSlot: 0, // 0: 10:00, 1: 12:00, 2: 14:00, 3: 16:00
    // 时间段状态 - 根据 batchCoupon.stockBatchList 动态生成
    timeSlots: [
        {
            time: '10:00',
            status: 'locked', // 'locked', 'unlocked', 'purchased'
            stockBatchId: null,
            startTime: '',
            endTime: '',
            stockUsage: 0,
            stockLimit: 0,
            received: false
        },
        {
            time: '12:00',
            status: 'locked',
            stockBatchId: null,
            startTime: '',
            endTime: '',
            stockUsage: 0,
            stockLimit: 0,
            received: false
        },
        {
            time: '14:00',
            status: 'locked',
            stockBatchId: null,
            startTime: '',
            endTime: '',
            stockUsage: 0,
            stockLimit: 0,
            received: false
        },
        {
            time: '16:00',
            status: 'locked',
            stockBatchId: null,
            startTime: '',
            endTime: '',
            stockUsage: 0,
            stockLimit: 0,
            received: false
        }
    ],
    // 新增：batchCoupon 数据 - 根据接口返回结构调整
    batchCoupon: [], // 改为数组，因为接口返回的是数组
    // 新增：equityCouponList 数据
    equityCouponList: [],
    // 新增：倒计时相关状态
    next2810Countdown: -1,
    countdownTimer: null,
    // 新增：弹窗控制状态
    showJingxuanPopup: false
})

// 等级映射常量
const LEVEL_MAP = {
    0: 'gold',
    1: 'platinum',
    2: 'diamond',
    3: 'starlight',
    4: 'starshine'
}

// 等级名称到弹窗类型的映射
const LEVEL_TO_POPUP_TYPE = {
    'gold': '1',      // 1 黄金
    'platinum': '2',  // 2 铂金
    'diamond': '3',   // 3 钻石
    'starlight': '4', // 4 星光
    'starshine': '5'  // 5 星耀
}

// 计算属性：当前展示等级
const currentLevelName = computed(() => LEVEL_MAP[props.currentLevel])



// 方法
// 显示精选好券领取成功弹窗
const showJingxuanPopup = () => {
    state.showJingxuanPopup = true
}

// 关闭精选好券领取成功弹窗
const closeJingxuanPopup = () => {
    state.showJingxuanPopup = false
}

const handleCouponClick = async (level) => {
    console.log("handleCouponClick level:", level, "state.couponStatus:", state.couponStatus)

    if (state.couponStatus[level] === 'used') {
        jump({
            type: 2,
            url: "subPackages/shopMainProcess/coupons/couponList",
            extra: {
                appId: "wx4205ec55b793245e",
                envVersion: "release"
            }
        })
        return
    }

    try {
        const result = await monthlyGiftDrawAll()
        console.log('Coupon draw result:', result)
        if (result.code === '000000') {
            // 更新对应等级的状态为已购买
            state.couponStatus[level] = 'purchased'
            console.log("Updated couponStatus for", level, ":", state.couponStatus[level])

            // 领取成功后弹窗
            showJingxuanPopup()

            // 刷新页面数据
            await fetchMonthlyGiftData()
        } else {
            uni.showToast({
                title: '领取失败',
                icon: 'none',
                duration: 2000
            })
        }
    } catch (error) {
        console.error('Error drawing coupon:', error)
        uni.showToast({
            title: '领取失败',
            icon: 'none',
            duration: 2000
        })
    }
}

const handleBuyClick = async (level) => {
    console.log(`Clicked buy for ${level}`)

    // 检查用户等级是否符合领取条件（优先级最高）
    const levelOrder = [0, 1, 2, 3, 4]; // gold, platinum, diamond, starlight, starshine
    const userLevelIndex = levelOrder.indexOf(props.userLevel * 1)
    const diamondIndex = levelOrder.indexOf(2); // Diamond level is 2

    // 如果用户等级不够，显示提示
    if (userLevelIndex < diamondIndex) {
        //点击跳转升级攻略页面


        uni.navigateTo({
            url: '/pages/webview/webview?url=https://mom.feihe.com/member/mine/pointStrategy'
        });

        return
    }

    // 检查倒计时状态（其次）
    if (state.next2810Countdown !== -1) {
        uni.showToast({
            title: '活动暂未开启',
            icon: 'none',
            duration: 2000
        });
        return
    }

    console.log("state.buyStatus", state.buyStatus, level)

    // 在 next2810Countdown == -1 的情况下
    const currentTimeSlot = state.timeSlots[state.selectedTimeSlot]

    // 如果已领取，跳转到使用页面
    if (currentTimeSlot.received) {
        jump({
            type: 2,
            url: "subPackages/shopMainProcess/coupons/couponList",
            extra: {
                appId: "wx4205ec55b793245e",
                envVersion: "release"
            }
        })
        return
    }

    // 根据 status 处理不同状态
    if (currentTimeSlot.status === 0) {
        // status = 0，显示"活动暂未开启"
        uni.showToast({
            title: '活动暂未开启',
            icon: 'none',
            duration: 2000
        });
        return
    } else if (currentTimeSlot.status === 1) {
        // status = 1，一键完成领取
        try {
            const equityCouponInfoId = currentTimeSlot.equityCouponInfoId
            const stockBatchId = currentTimeSlot.stockBatchId
            console.log("equityCouponInfoId", equityCouponInfoId, stockBatchId)
            const result = await monthlyGiftDrawOne({ equityCouponInfoId, stockBatchId })
            console.warn("result", result)

            if (result.code == '000000' && result.data.receiveResult === 1) {
                // 购买成功，更新时间段状态
                currentTimeSlot.status = 'purchased'
                currentTimeSlot.received = true
                state.buyStatus[level] = 'purchased'
                uni.showToast({
                    title: '领取成功',
                    icon: 'none',
                    duration: 2000
                })

                // 刷新页面数据
                fetchMonthlyGiftData()
            } else {
                uni.showToast({
                    title: '领取失败',
                    icon: 'none',
                    duration: 2000
                })
            }
        } catch (error) {

        }
    } else if (currentTimeSlot.status === 2) {
        try {

        } catch (error) {

        }
    }
}

// 切换时间段
const switchTimeSlot = (index) => {
    state.selectedTimeSlot = index
    console.log(`切换到时间段: ${state.timeSlots[index].time}`)
}

// 获取精选好券按钮文本
const getCouponButtonText = (level) => {
    if (state.couponStatus[level] === 'used') {
        return '去使用'
    }
    const levelOrder = [0, 1, 2, 3, 4];
    const userLevelIndex = levelOrder.indexOf(props.userLevel * 1)
    const goldIndex = levelOrder.indexOf(0) // Gold level is 0
    if (userLevelIndex < goldIndex) {
        return '待解锁'
    }
    return '立即领取'
}

// 获取精选好券按钮样式类
const getCouponButtonClass = (level) => {
    console.warn("getCouponButtonClass level:", level, "state.couponStatus:", state.couponStatus)

    // 检查用户等级是否符合领取条件
    const levelOrder = [0, 1, 2, 3, 4]; // gold, platinum, diamond, starlight, starshine
    const userLevelIndex = levelOrder.indexOf(props.userLevel * 1)
    const levelIndex = levelOrder.indexOf(LEVEL_MAP[props.currentLevel])

    // 如果用户等级不够，显示锁定状态
    if (userLevelIndex < levelIndex) {
        return 'coupon-btn-locked'
    }

    // 根据当前等级的状态返回对应样式
    if (state.couponStatus[level] === 'used') {
        return 'coupon-btn-purchased-' + level
    } else if (state.couponStatus[level] === 'unlocked') {
        return 'coupon-btn-unlocked-' + level
    } else {
        return 'coupon-btn-locked'
    }
}

// 获取限时1分购按钮文本
const getBuyButtonText = (level) => {
    // 检查用户等级是否符合领取条件
    const levelOrder = [0, 1, 2, 3, 4]; // gold, platinum, diamond, starlight, starshine
    const userLevelIndex = levelOrder.indexOf(props.userLevel * 1)
    const diamondIndex = levelOrder.indexOf(2) // Diamond level is 2

    // 如果用户等级不够，显示"去升级"（优先级最高）
    if (userLevelIndex < diamondIndex) {
        return '去升级'
    }

    // 检查倒计时状态（其次）
    if (state.next2810Countdown !== -1) {
        return '待开启'
    }

    // 在 next2810Countdown == -1 的情况下
    // 检查当前选中的时间段状态
    const currentTimeSlot = state.timeSlots[state.selectedTimeSlot]

    // 如果已领取，显示"去使用"
    if (currentTimeSlot.received) {
        return '去使用'
    }

    // 根据 stockBatchList 对应 index 的 status 显示按钮文本
    if (currentTimeSlot.status === 0) {
        return '待开启'
    } else if (currentTimeSlot.status === 1) {
        return '立即领取'
    } else if (currentTimeSlot.status === 2) {
        return '已结束'
    }

    return '待开启'
}

// 获取限时1分购按钮样式类
const getBuyButtonClass = (level) => {
    const levelName = currentLevelName.value
    const levelOrder = [0, 1, 2, 3, 4]; // gold, platinum, diamond, starlight, starshine
    const userLevelIndex = levelOrder.indexOf(props.userLevel * 1)
    const diamondIndex = levelOrder.indexOf(2); // Diamond level is 2
    console.log("userLevelIndex", userLevelIndex, diamondIndex)

    if (userLevelIndex < diamondIndex) {
        return 'buy-btn-upgrade-' + levelName
    }

    // 检查倒计时状态
    if (state.next2810Countdown !== -1) {
        return 'buy-btn-locked-' + levelName
    }

    const currentTimeSlot = state.timeSlots[state.selectedTimeSlot]

    if (currentTimeSlot.received) {
        return 'buy-btn-purchased-' + levelName
    } else if (currentTimeSlot.status === 1) {
        return 'buy-btn-unlocked-' + levelName
    } else {
        return 'buy-btn-locked-' + levelName
    }
}


// 获取时间段样式类
const getTimeSlotClass = (index) => {
    const timeSlot = state.timeSlots[index]

    if (index === state.selectedTimeSlot) {
        return 'time-slot-active'
    }

    // 根据时间段状态应用不同样式
    switch (timeSlot.status) {
        case 'unlocked':
            return 'time-slot-unlocked'
        case 'ended':
            return 'time-slot-ended'
        case 'purchased':
            return 'time-slot-purchased'
        case 'locked':
        default:
            return 'time-slot-inactive'
    }
}

// 获取月礼包数据
const fetchMonthlyGiftData = async () => {
    console.log('Fetching monthly gift data for level:', currentLevelName.value)

    try {
        // 获取月礼包首页数据
        const result = await monthlyGiftIndex({ level: currentLevelName.value })
        console.log('API response:', result)

        if (result.success) {
            const data = result.data
            console.log('API data:', data)

            // 保存 equityCouponList 数据
            if (data.equityCouponList) {
                console.log('equityCouponList:', data.equityCouponList)
                state.equityCouponList = data.equityCouponList
                // 根据 equityCouponList 更新精选好券状态
                updateCouponStatus(data.equityCouponList)
            }

            // 保存 batchCoupon 数据 - 根据接口结构调整
            if (data.batchCoupon) {
                console.log('batchCoupon:', data.batchCoupon)
                state.batchCoupon = data.batchCoupon // 直接保存对象
                // 根据 batchCoupon 更新限时1分购状态和时间段状态
                updateBuyStatusAndTimeSlots(data.batchCoupon)
            }

            // 设置当前选中的时间段
            if (data.currentTimeSlot !== undefined) {
                state.selectedTimeSlot = data.currentTimeSlot
            }


            console.warn('next2810Countdown', data.next2810Countdown)

            // 处理倒计时逻辑
            if (data.next2810Countdown !== undefined) {
                state.next2810Countdown = data.next2810Countdown
                if (data.next2810Countdown !== -1) {
                    startCountdown(data.next2810Countdown)
                }
            }
        }
    } catch (error) {
        console.error('获取月礼包数据失败:', error)
    }
}

// 倒计时处理函数
const startCountdown = (milliseconds) => {
    // 清除之前的定时器
    if (state.countdownTimer) {
        clearTimeout(state.countdownTimer)
    }

    console.warn("milliseconds", milliseconds)

    // 设置倒计时
    // 修正：某些极大值（如 2609485287）会导致 setTimeout 立即执行（超出 32 位有符号整型最大值 2147483647）
    // 需要将超出最大安全值的毫秒数限制为 2147483647（约24.8天）
    const MAX_TIMEOUT = 100000000
    let timeoutMs = typeof milliseconds === 'number' && milliseconds > 0 ? milliseconds : 0
    if (timeoutMs > MAX_TIMEOUT) {
        console.warn('倒计时超出最大安全值，已自动截断为 2147483647 ms', milliseconds)
        timeoutMs = MAX_TIMEOUT
    }
    if (timeoutMs > 0) {
        state.countdownTimer = setTimeout(() => {
            console.log('倒计时结束，1秒后刷新页面')
            // 延时1秒后刷新页面接口
            // setTimeout(() => {
            //     fetchMonthlyGiftData()
            // }, 1000)
        }, timeoutMs)
    } else {
        console.warn('倒计时参数异常，milliseconds:', milliseconds)
        // 可选：立即刷新或忽略
        // fetchMonthlyGiftData()
    }
}

// 清理定时器
onUnmounted(() => {
    if (state.countdownTimer) {
        clearTimeout(state.countdownTimer)
    }
})

// 初始化
onMounted(async () => {
    console.log('MonthGift component mounted, current level:', props.currentLevel, props.userLevel)
    await fetchMonthlyGiftData()
})

// 调试函数：打印当前状态
const debugState = () => {
    console.log('=== Debug State ===')
    console.log('currentLevelName:', currentLevelName.value)
    console.log('couponStatus:', state.couponStatus)
    console.log('buyStatus:', state.buyStatus)
    console.log('equityCouponList:', state.equityCouponList)
    console.log('==================')
}

// 根据 equityCouponList 更新精选好券状态
const updateCouponStatus = (equityCouponList) => {
    console.warn("updateCouponStatus", equityCouponList, state.couponStatus)

    // 重置所有等级的状态为锁定
    Object.keys(state.couponStatus).forEach(level => {
        state.couponStatus[level] = 'locked'
    })

    if (equityCouponList.length === 0) {
        // 如果没有优惠券数据，所有等级都设为已使用状态
        Object.keys(state.couponStatus).forEach(level => {
            state.couponStatus[level] = 'used'
        })
        return
    }

    // 检查是否有未领取的优惠券
    let hasUnreceived = false
    equityCouponList.forEach(coupon => {
        if (coupon.receiveStatus === 0) {
            hasUnreceived = true
        }
    })

    console.warn("hasUnreceived", hasUnreceived)

    if (hasUnreceived) {
        // 如果有未领取的优惠券，解锁所有等级
        Object.keys(state.couponStatus).forEach(level => {
            state.couponStatus[level] = 'unlocked'
        })
    } else {
        // 如果所有优惠券都已领取，设为已使用状态
        Object.keys(state.couponStatus).forEach(level => {
            state.couponStatus[level] = 'used'
        })
    }

    console.warn("Updated couponStatus:", state.couponStatus)
}

// 根据 batchCoupon 更新限时1分购状态和时间段状态
const updateBuyStatusAndTimeSlots = (batchCouponData) => {
    // 重置所有等级的购买状态
    Object.keys(state.buyStatus).forEach(level => {
        state.buyStatus[level] = 'locked'
    })

    // 根据用户等级解锁相应等级及以下的功能
    const levelOrder = [0, 1, 2, 3, 4]; // gold, platinum, diamond, starlight, starshine
    const userLevelIndex = levelOrder.indexOf(props.userLevel * 1);

    // 解锁用户等级及以下的所有等级
    for (let i = 0; i <= userLevelIndex; i++) {
        const levelName = LEVEL_MAP[i];
        if (state.buyStatus.hasOwnProperty(levelName)) {
            state.buyStatus[levelName] = 'unlocked';
        }
    }

    // 处理 batchCoupon 数据
    if (batchCouponData) {
        console.log('Processing batchCoupon data:', batchCouponData)

        // 更新限时1分购状态
        if (batchCouponData.gradeAllow !== undefined) {
            const level = currentLevelName.value
            if (state.buyStatus.hasOwnProperty(level)) {
                // 如果用户等级足够，保持unlocked状态；否则设为locked
                if (userLevelIndex >= levelOrder.indexOf(props.currentLevel * 1)) {
                    state.buyStatus[level] = batchCouponData.gradeAllow ? 'unlocked' : 'locked'
                }
            }
        }

        // 更新限时1分购状态（如果已领取）
        if (batchCouponData.received !== undefined) {
            const level = currentLevelName.value
            if (state.buyStatus.hasOwnProperty(level) && batchCouponData.received) {
                state.buyStatus[level] = 'purchased'
            }
        }

        // 处理 stockBatchList 数据，更新时间段状态
        if (batchCouponData.stockBatchList && batchCouponData.stockBatchList.length > 0) {
            console.log('Processing stockBatchList:', batchCouponData.stockBatchList)

            // 根据实际的时间段数据更新，而不是硬编码的4个时间段
            batchCouponData.stockBatchList.forEach((batch, index) => {
                console.log(`Processing batch ${index}:`, batch)

                // 确保 timeSlots 数组有足够的元素
                while (state.timeSlots.length <= index) {
                    state.timeSlots.push({
                        time: '', // 动态时间，从API获取
                        status: 'locked',
                        stockBatchId: null,
                        equityCouponInfoId: null, // 添加这个字段
                        startTime: '',
                        endTime: '',
                        stockUsage: 0,
                        stockLimit: 0,
                        received: false
                    })
                }

                // 更新时间段信息
                const mappedStatus = getBatchStatus(batch.status)
                console.log(`Batch ${index} status: ${batch.status} -> mapped to: ${mappedStatus}`)

                state.timeSlots[index] = {
                    ...state.timeSlots[index],
                    stockBatchId: batch.stockBatchId,
                    equityCouponInfoId: batchCouponData.equityCouponInfoId, // 从 batchCoupon 对象中获取
                    startTime: batch.startTime,
                    endTime: batch.endTime || '',
                    stockUsage: batchCouponData.stockUsage || 0,
                    stockLimit: batchCouponData.stockLimit || 0,
                    received: batchCouponData.received || false,
                    status: batch.status // 直接使用原始 status 值
                }

                console.log(`Updated timeSlot ${index}:`, state.timeSlots[index])
            })

            // 如果API返回的时间段少于4个，保持原有的4个时间段结构
            if (batchCouponData.stockBatchList.length < 4) {
                // 保持原有的4个时间段，未返回的保持默认状态
                for (let i = batchCouponData.stockBatchList.length; i < 4; i++) {
                    if (state.timeSlots[i]) {
                        state.timeSlots[i].status = 'locked'
                        state.timeSlots[i].time = getDefaultTimeText(i)
                    }
                }
            }

            console.log('Final timeSlots state:', state.timeSlots)
        }
    }

    console.log('Updated buyStatus:', state.buyStatus)
}



// 获取批次状态的辅助函数
const getBatchStatus = (status) => {
    // 根据 stockBatchList 中的 status 字段映射到时间段状态
    // status: 0-待开始, 1-抢券中, 2-已结束
    console.log('getBatchStatus called with status:', status, 'type:', typeof status)

    // 确保 status 是数字类型
    const numStatus = Number(status)

    switch (numStatus) {
        case 1:
            console.log('Status 1 -> unlocked (抢券中)')
            return 'unlocked' // 抢券中 - 可领取
        case 0:
            console.log('Status 0 -> locked (待开始)')
            return 'locked' // 待开始 - 锁定状态
        case 2:
            console.log('Status 2 -> ended (已结束)')
            return 'ended' // 已结束 - 结束状态
        default:
            console.log('Status', numStatus, '-> locked (默认)')
            return 'locked' // 默认锁定状态
    }
}




// 获取默认时间段文本（当API没有返回足够时间段时使用）
const getDefaultTimeText = (index) => {
    const defaultTimes = ['10:00', '12:00', '14:00', '16:00']
    return defaultTimes[index] || ''
}

// 检查用户等级是否足够
const isLevelSufficient = () => {
    const levelOrder = [2, 3, 4]; // gold, platinum, diamond, starlight, starshine
    const userLevelIndex = levelOrder.indexOf(props.userLevel * 1);
    return userLevelIndex >= 0;
}

// 监听 userLevel 变化
watch(() => props.userLevel, (newUserLevel, oldUserLevel) => {
    console.log(`userLevel changed from ${oldUserLevel} to ${newUserLevel}`)

    // 如果 userLevel 发生变化，重新获取数据
    if (newUserLevel !== oldUserLevel) {
        console.log('newUserLevel', newUserLevel)
        console.log('Refreshing data due to userLevel change')
        fetchMonthlyGiftData()
    }
}, { immediate: false })

// 获取时间段状态文本
const getTimeSlotStatusText = (index) => {
    const timeSlot = state.timeSlots[index]

    console.log(`getTimeSlotStatusText called for index ${index}:`, timeSlot)

    if (!timeSlot) {
        console.log(`No timeSlot for index ${index}, returning '待开始'`)
        return '待开始'
    }

    // 检查用户等级是否符合要求 - 用户等级必须等于或高于要操作的等级
    const levelOrder = [0, 1, 2, 3, 4]; // gold, platinum, diamond, starlight, starshine
    const userLevelIndex = levelOrder.indexOf(props.userLevel * 1)
    const requiredLevelIndex = levelOrder.indexOf(props.currentLevel * 1)

    console.log(`User level: ${props.userLevel} (${userLevelName.value}), Required level: ${props.currentLevel} (${currentLevelName.value})`)
    console.log(`User level index: ${userLevelIndex}, Required level index: ${requiredLevelIndex}`)

    // 如果用户等级不够，显示"待解锁"
    if (userLevelIndex < requiredLevelIndex) {
        console.log('User level insufficient, showing 待解锁')
        return '待解锁'
    }

    // status: 0-待开始, 1-抢券中, 2-已结束
    console.log(`TimeSlot status: ${timeSlot.status}`)

    switch (timeSlot.status) {
        case 'unlocked': // 对应 status: 1
            return '抢券中'
        case 'locked': // 对应 status: 0
            return '待开始'
        case 'ended': // 对应 status: 2
            return '已结束'
        case 'purchased':
            return '已领取'
        default:
            return '待开始'
    }
}
</script>

<style lang="less" scoped>
.monthgift {
    width: 686rpx;
    height: 1113rpx;
    left: 0rpx;
    top: 0rpx;
    right: 0rpx;
    margin: auto;
    position: relative;

    .diamond {
        width: 686rpx;
        height: 1113rpx;
        left: 0rpx;
        top: 0rpx;

        position: absolute;

        .diamondbg {
            width: 686rpx;
            height: 1113rpx;
            left: 0rpx;
            top: 0rpx;
            position: absolute;
            border-radius: 45rpx 0 45rpx 45rpx;

            opacity: 0.2;
        }

        .diamondgoodcoupon {
            width: 640rpx;
            height: 561rpx;
            left: 24rpx;
            top: 523rpx;
            position: absolute;

            .diamondgoodcoupons {
                width: 640rpx;
                height: 561rpx;
                left: 0rpx;
                top: 0rpx;
                position: absolute;

                .diamondgoodcouponstitle {
                    width: 126rpx;
                    height: 31rpx;
                    left: 6rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .diamondgoodcouponsbg {
                    width: 640rpx;
                    height: 494rpx;
                    left: 0rpx;
                    top: 67rpx;
                    position: absolute;
                    opacity: 0.3;
                }

                .diamondgoodcoupons1 {
                    width: 190rpx;
                    height: 160rpx;
                    left: 25rpx;
                    top: 89rpx;
                    position: absolute;
                }

                .diamondgoodcoupons2 {
                    width: 191rpx;
                    height: 160rpx;
                    left: 226rpx;
                    top: 89rpx;
                    position: absolute;
                }

                .diamondgoodcoupons3 {
                    width: 191rpx;
                    height: 160rpx;
                    left: 425rpx;
                    top: 89rpx;
                    position: absolute;
                }

                .diamondgoodcoupons4 {
                    width: 191rpx;
                    height: 159rpx;
                    left: 124rpx;
                    top: 263rpx;
                    position: absolute;
                }

                .diamondgoodcoupons5 {
                    width: 191rpx;
                    height: 159rpx;
                    left: 325rpx;
                    top: 263rpx;
                    position: absolute;
                }
            }

            .diamondgoodcouponnowbtn {
                width: 442rpx;
                height: 85rpx;
                left: 99rpx;
                top: 453rpx;
                position: absolute;
            }
        }

        .diamond1buycom {
            width: 640rpx;
            height: 426rpx;
            left: 24rpx;
            top: 47rpx;
            position: absolute;

            .diamond1buycomsel4 {
                width: 640rpx;
                height: 319rpx;
                left: 0rpx;
                top: 106rpx;
                position: absolute;
            }

            .diamond1buycomsel3 {
                width: 640rpx;
                height: 319rpx;
                left: 0rpx;
                top: 107rpx;
                position: absolute;
            }

            .diamond1buycomsel2 {
                width: 640rpx;
                height: 319rpx;
                left: 0rpx;
                top: 107rpx;
                position: absolute;
            }

            .diamond1buycomsel1 {
                width: 640rpx;
                height: 319rpx;
                left: 0rpx;
                top: 106rpx;
                position: absolute;
            }

            .diamond1buycomtime1 {
                width: 69rpx;
                height: 46rpx;
                left: 45rpx;
                top: 120rpx;
                position: absolute;

            }

            .diamond1buycomtime2 {
                width: 69rpx;
                height: 46rpx;
                left: 205rpx;
                top: 120rpx;
                position: absolute;


            }

            .diamond1buycomtime3 {
                width: 69rpx;
                height: 46rpx;
                left: 365rpx;
                top: 120rpx;
                position: absolute;


            }

            .diamond1buycomtime4 {
                width: 69rpx;
                height: 46rpx;
                left: 525rpx;
                top: 120rpx;
                position: absolute;


            }

            .diamond1buycomgoods {
                width: 592rpx;
                height: 206rpx;
                left: 25rpx;
                top: 197rpx;
                position: absolute;

                .diamond1buycomgoodsbg {
                    width: 592rpx;
                    height: 206rpx;
                    left: 0rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .diamond1buycomgoodslockbtn {
                    width: 145rpx;
                    height: 52rpx;
                    left: 427rpx;
                    top: 80rpx;
                    position: absolute;
                }

                .diamond1buycomgoodsnowbtn {
                    width: 145rpx;
                    height: 52rpx;
                    left: 427rpx;
                    top: 80rpx;
                    position: absolute;
                }
            }

            .diamond1buycomtitle {
                width: 137rpx;
                height: 31rpx;
                left: 7rpx;
                top: 3rpx;
                position: absolute;
            }

            .diamond1buycomdesc {
                width: 396rpx;
                height: 23rpx;
                left: -6rpx;
                top: 46rpx;
                position: absolute;
            }

            // .diamond1buycomstatus {
            //     width: 163rpx;
            //     height: 73rpx;
            //     left: 452rpx;
            //     top: 0rpx;
            //     position: absolute;
            // }
        }
    }

    .starshine {
        width: 686rpx;
        height: 1113rpx;
        left: 0rpx;
        top: 0rpx;
        position: absolute;

        .starshinebg {
            width: 686rpx;
            height: 1113rpx;
            left: 0rpx;
            top: 0rpx;
            position: absolute;
            border-radius: 45rpx 0 45rpx 45rpx;

            opacity: 0.1;
        }

        .starshinegoodcoupon {
            width: 640rpx;
            height: 561rpx;
            left: 24rpx;
            top: 523rpx;
            position: absolute;

            .starshinegoodcoupons {
                width: 640rpx;
                height: 561rpx;
                left: 0rpx;
                top: 0rpx;
                position: absolute;

                .starshinegoodcouponstitle {
                    width: 126rpx;
                    height: 31rpx;
                    left: 6rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .starshinegoodcouponsbg {
                    width: 640rpx;
                    height: 494rpx;
                    left: 0rpx;
                    top: 67rpx;
                    position: absolute;
                    opacity: 0.05;
                }

                .starshinegoodcoupons1 {
                    width: 190rpx;
                    height: 160rpx;
                    left: 25rpx;
                    top: 89rpx;
                    position: absolute;
                }

                .starshinegoodcoupons2 {
                    width: 191rpx;
                    height: 160rpx;
                    left: 226rpx;
                    top: 89rpx;
                    position: absolute;
                }

                .starshinegoodcoupons3 {
                    width: 191rpx;
                    height: 160rpx;
                    left: 425rpx;
                    top: 89rpx;
                    position: absolute;
                }

                .starshinegoodcoupons4 {
                    width: 191rpx;
                    height: 159rpx;
                    left: 124rpx;
                    top: 263rpx;
                    position: absolute;
                }

                .starshinegoodcoupons5 {
                    width: 191rpx;
                    height: 159rpx;
                    left: 325rpx;
                    top: 263rpx;
                    position: absolute;
                }
            }

            .starshinegoodcouponnowbtn {
                width: 442rpx;
                height: 85rpx;
                left: 99rpx;
                top: 453rpx;
                position: absolute;
            }
        }

        .starshine1buycom {
            width: 640rpx;
            height: 426rpx;
            left: 24rpx;
            top: 47rpx;
            position: absolute;

            .starshine1buycomsel4 {
                width: 640rpx;
                height: 319rpx;
                left: 0rpx;
                top: 106rpx;
                position: absolute;
            }

            .starshine1buycomsel3 {
                width: 640rpx;
                height: 319rpx;
                left: 0rpx;
                top: 107rpx;
                position: absolute;
            }

            .starshine1buycomsel2 {
                width: 640rpx;
                height: 319rpx;
                left: 0rpx;
                top: 107rpx;
                position: absolute;
            }

            .starshine1buycomsel1 {
                width: 640rpx;
                height: 319rpx;
                left: 0rpx;
                top: 106rpx;
                position: absolute;
            }

            .starshine1buycomtime1 {
                width: 69rpx;
                height: 46rpx;
                left: 45rpx;
                top: 120rpx;
                position: absolute;

                .starshine1buycomtime1text {
                    width: 69rpx;
                    height: 22rpx;
                    left: 0rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .starshine1buycomtime1status {
                    width: 49rpx;
                    height: 16rpx;
                    left: 10rpx;
                    top: 30rpx;
                    position: absolute;
                }
            }

            .starshine1buycomtime2 {
                width: 69rpx;
                height: 46rpx;
                left: 205rpx;
                top: 120rpx;
                position: absolute;

                .starshine1buycomtime2text {
                    width: 69rpx;
                    height: 22rpx;
                    left: 0rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .starshine1buycomtime2status {
                    width: 49rpx;
                    height: 16rpx;
                    left: 10rpx;
                    top: 30rpx;
                    position: absolute;
                }
            }

            .starshine1buycomtime3 {
                width: 69rpx;
                height: 46rpx;
                left: 365rpx;
                top: 120rpx;
                position: absolute;

                .starshine1buycomtime3text {
                    width: 69rpx;
                    height: 22rpx;
                    left: 0rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .starshine1buycomtime3status {
                    width: 49rpx;
                    height: 16rpx;
                    left: 10rpx;
                    top: 30rpx;
                    position: absolute;
                }
            }

            .starshine1buycomtime4 {
                width: 69rpx;
                height: 46rpx;
                left: 525rpx;
                top: 120rpx;
                position: absolute;

                .starshine1buycomtime4text {
                    width: 69rpx;
                    height: 22rpx;
                    left: 0rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .starshine1buycomtime4status {
                    width: 49rpx;
                    height: 16rpx;
                    left: 10rpx;
                    top: 30rpx;
                    position: absolute;
                }
            }

            .starshine1buycomgoods {
                width: 592rpx;
                height: 206rpx;
                left: 25rpx;
                top: 197rpx;
                position: absolute;

                .starshine1buycomgoodsbg {
                    width: 592rpx;
                    height: 206rpx;
                    left: 0rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .starshine1buycomgoodslockbtn {
                    width: 145rpx;
                    height: 52rpx;
                    left: 427rpx;
                    top: 80rpx;
                    position: absolute;
                }

                .starshine1buycomgoodsnowbtn {
                    width: 145rpx;
                    height: 52rpx;
                    left: 427rpx;
                    top: 80rpx;
                    position: absolute;
                }
            }

            // .starshine1buycomstatus {
            //     width: 163rpx;
            //     height: 73rpx;
            //     left: 452rpx;
            //     top: 0rpx;
            //     position: absolute;
            // }

            .starshine1buycomtitle {
                width: 137rpx;
                height: 31rpx;
                left: 7rpx;
                top: 3rpx;
                position: absolute;
            }

            .starshine1buycomdesc {
                width: 396rpx;
                height: 23rpx;
                left: -6rpx;
                top: 46rpx;
                position: absolute;
            }
        }
    }

    .starlight {
        width: 686rpx;
        height: 1113rpx;
        left: 0rpx;
        top: 0rpx;
        position: absolute;

        .starlightbg {
            width: 686rpx;
            height: 1113rpx;
            left: 0rpx;
            top: 0rpx;
            border-radius: 45rpx 0 45rpx 45rpx;

            position: absolute;
            opacity: 0.2;
        }

        .startlightgoodcoupon {
            width: 640rpx;
            height: 561rpx;
            left: 24rpx;
            top: 523rpx;
            position: absolute;

            .startlightgoodcoupons {
                width: 640rpx;
                height: 561rpx;
                left: 0rpx;
                top: 0rpx;
                position: absolute;

                .startlightgoodcouponstitle {
                    width: 126rpx;
                    height: 31rpx;
                    left: 6rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .startlightgoodcouponsbg {
                    width: 640rpx;
                    height: 494rpx;
                    left: 0rpx;
                    top: 67rpx;
                    position: absolute;
                    opacity: 0.3;
                }

                .startlightgoodcoupons1 {
                    width: 190rpx;
                    height: 160rpx;
                    left: 25rpx;
                    top: 89rpx;
                    position: absolute;
                }

                .startlightgoodcoupons2 {
                    width: 191rpx;
                    height: 160rpx;
                    left: 226rpx;
                    top: 89rpx;
                    position: absolute;
                }

                .startlightgoodcoupons3 {
                    width: 191rpx;
                    height: 160rpx;
                    left: 425rpx;
                    top: 89rpx;
                    position: absolute;
                }

                .startlightgoodcoupons4 {
                    width: 191rpx;
                    height: 159rpx;
                    left: 124rpx;
                    top: 263rpx;
                    position: absolute;
                }

                .startlightgoodcoupons5 {
                    width: 191rpx;
                    height: 159rpx;
                    left: 325rpx;
                    top: 263rpx;
                    position: absolute;
                }
            }

            .startlightgoodcouponnowbtn {
                width: 442rpx;
                height: 85rpx;
                left: 99rpx;
                top: 453rpx;
                position: absolute;
            }
        }

        .startlight1buycom {
            width: 640rpx;
            height: 426rpx;
            left: 24rpx;
            top: 47rpx;
            position: absolute;

            .startlight1buycomsel4 {
                width: 640rpx;
                height: 319rpx;
                left: 0rpx;
                top: 106rpx;
                position: absolute;
            }

            .startlight1buycomsel3 {
                width: 640rpx;
                height: 319rpx;
                left: 0rpx;
                top: 107rpx;
                position: absolute;
            }

            .startlight1buycomsel2 {
                width: 640rpx;
                height: 319rpx;
                left: 0rpx;
                top: 107rpx;
                position: absolute;
            }

            .startlight1buycomsel1 {
                width: 640rpx;
                height: 319rpx;
                left: 0rpx;
                top: 106rpx;
                position: absolute;
            }

            .startlight1buycomtime1 {
                width: 69rpx;
                height: 46rpx;
                left: 45rpx;
                top: 120rpx;
                position: absolute;

                .startlight1buycomtime1text {
                    width: 69rpx;
                    height: 22rpx;
                    left: 0rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .startlight1buycomtime1status {
                    width: 49rpx;
                    height: 16rpx;
                    left: 10rpx;
                    top: 30rpx;
                    position: absolute;
                }
            }

            .startlight1buycomtime2 {
                width: 69rpx;
                height: 46rpx;
                left: 205rpx;
                top: 120rpx;
                position: absolute;

                .startlight1buycomtime2text {
                    width: 69rpx;
                    height: 22rpx;
                    left: 0rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .startlight1buycomtime2status {
                    width: 49rpx;
                    height: 16rpx;
                    left: 10rpx;
                    top: 30rpx;
                    position: absolute;
                }
            }

            .startlight1buycomtime3 {
                width: 69rpx;
                height: 46rpx;
                left: 365rpx;
                top: 120rpx;
                position: absolute;

                .startlight1buycomtime3text {
                    width: 69rpx;
                    height: 22rpx;
                    left: 0rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .startlight1buycomtime3status {
                    width: 49rpx;
                    height: 16rpx;
                    left: 10rpx;
                    top: 30rpx;
                    position: absolute;
                }
            }

            .startlight1buycomtime4 {
                width: 69rpx;
                height: 46rpx;
                left: 525rpx;
                top: 120rpx;
                position: absolute;

                .startlight1buycomtime4text {
                    width: 69rpx;
                    height: 22rpx;
                    left: 0rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .startlight1buycomtime4status {
                    width: 49rpx;
                    height: 16rpx;
                    left: 10rpx;
                    top: 30rpx;
                    position: absolute;
                }
            }

            .startlight1buycomgoods {
                width: 592rpx;
                height: 206rpx;
                left: 25rpx;
                top: 197rpx;
                position: absolute;

                .startlight1buycomgoodsbg {
                    width: 592rpx;
                    height: 206rpx;
                    left: 0rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .startlight1buycomgoodslockbtn {
                    width: 145rpx;
                    height: 52rpx;
                    left: 427rpx;
                    top: 80rpx;
                    position: absolute;
                }

                .startlight1buycomgoodsnowbtn {
                    width: 145rpx;
                    height: 52rpx;
                    left: 427rpx;
                    top: 80rpx;
                    position: absolute;
                }
            }

            .startlight1buycomtitle {
                width: 137rpx;
                height: 31rpx;
                left: 7rpx;
                top: 3rpx;
                position: absolute;
            }

            .startlight1buycomdesc {
                width: 396rpx;
                height: 23rpx;
                left: -6rpx;
                top: 46rpx;
                position: absolute;
            }

            // .startlight1buycomstatus {
            //     width: 163rpx;
            //     height: 73rpx;
            //     left: 452rpx;
            //     top: 0rpx;
            //     position: absolute;
            // }
        }
    }

    .gold {
        width: 686rpx;
        height: 1113rpx;
        left: 0rpx;
        top: 0rpx;
        position: absolute;

        .goldbg {
            width: 686rpx;
            height: 1113rpx;
            left: 0rpx;
            border-radius: 45rpx 0 45rpx 45rpx;
            top: 0rpx;
            position: absolute;
            opacity: 0.2;
        }

        .goldgoodcoupon {
            width: 640rpx;
            height: 561rpx;
            left: 24rpx;
            top: 523rpx;
            position: absolute;

            .goldgoodcoupons {
                width: 640rpx;
                height: 561rpx;
                left: 0rpx;
                top: 0rpx;
                position: absolute;

                .goldgoodcouponstitle {
                    width: 126rpx;
                    height: 31rpx;
                    left: 6rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .goldgoodcouponsbg {
                    width: 640rpx;
                    height: 494rpx;
                    left: 0rpx;
                    top: 67rpx;
                    position: absolute;
                    opacity: 0.3;
                }

                .goldgoodcoupons1 {
                    width: 190rpx;
                    height: 160rpx;
                    left: 25rpx;
                    top: 89rpx;
                    position: absolute;
                }

                .goldgoodcoupons2 {
                    width: 191rpx;
                    height: 160rpx;
                    left: 226rpx;
                    top: 89rpx;
                    position: absolute;
                }

                .goldgoodcoupons3 {
                    width: 191rpx;
                    height: 160rpx;
                    left: 425rpx;
                    top: 89rpx;
                    position: absolute;
                }

                .goldgoodcoupons4 {
                    width: 191rpx;
                    height: 159rpx;
                    left: 124rpx;
                    top: 263rpx;
                    position: absolute;
                }

                .goldgoodcoupons5 {
                    width: 191rpx;
                    height: 159rpx;
                    left: 325rpx;
                    top: 263rpx;
                    position: absolute;
                }
            }

            .goldgoodcouponnowbtn {
                width: 442rpx;
                height: 85rpx;
                left: 99rpx;
                top: 453rpx;
                position: absolute;
            }
        }

        .gold1buycom {
            width: 640rpx;
            height: 426rpx;
            left: 24rpx;
            top: 47rpx;
            position: absolute;

            .gold1buycomtitle {
                width: 137rpx;
                height: 31rpx;
                left: 7rpx;
                top: 3rpx;
                position: absolute;
            }

            .gold1buycomdesc {
                width: 396rpx;
                height: 23rpx;
                left: -6rpx;
                top: 46rpx;
                position: absolute;
            }

            // .gold1buycomstatus {
            //     width: 163rpx;
            //     height: 73rpx;
            //     left: 452rpx;
            //     top: 0rpx;
            //     position: absolute;
            // }

            .gold1buycomsel4 {
                width: 640rpx;
                height: 319rpx;
                left: 0rpx;
                top: 106rpx;
                position: absolute;
            }

            .gold1buycomsel3 {
                width: 640rpx;
                height: 319rpx;
                left: 0rpx;
                top: 107rpx;
                position: absolute;
            }

            .gold1buycomsel2 {
                width: 640rpx;
                height: 319rpx;
                left: 0rpx;
                top: 107rpx;
                position: absolute;
            }

            .gold1buycomsel1 {
                width: 640rpx;
                height: 319rpx;
                left: 0rpx;
                top: 106rpx;
                position: absolute;
            }

            .gold1buycomtime1 {
                width: 69rpx;
                height: 46rpx;
                left: 45rpx;
                top: 120rpx;
                position: absolute;

                .gold1buycomtime1text {
                    width: 69rpx;
                    height: 22rpx;
                    left: 0rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .gold1buycomtime1status {
                    width: 49rpx;
                    height: 16rpx;
                    left: 10rpx;
                    top: 30rpx;
                    position: absolute;
                }
            }

            .gold1buycomtime2 {
                width: 69rpx;
                height: 46rpx;
                left: 205rpx;
                top: 120rpx;
                position: absolute;

                .gold1buycomtime2text {
                    width: 69rpx;
                    height: 22rpx;
                    left: 0rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .gold1buycomtime2status {
                    width: 49rpx;
                    height: 16rpx;
                    left: 10rpx;
                    top: 30rpx;
                    position: absolute;
                }
            }

            .gold1buycomtime3 {
                width: 69rpx;
                height: 46rpx;
                left: 365rpx;
                top: 120rpx;
                position: absolute;

                .gold1buycomtime3text {
                    width: 69rpx;
                    height: 22rpx;
                    left: 0rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .gold1buycomtime3status {
                    width: 49rpx;
                    height: 16rpx;
                    left: 10rpx;
                    top: 30rpx;
                    position: absolute;
                }
            }

            .gold1buycomtime4 {
                width: 69rpx;
                height: 46rpx;
                left: 525rpx;
                top: 120rpx;
                position: absolute;

                .gold1buycomtime4text {
                    width: 69rpx;
                    height: 22rpx;
                    left: 0rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .gold1buycomtime4status {
                    width: 49rpx;
                    height: 16rpx;
                    left: 10rpx;
                    top: 30rpx;
                    position: absolute;
                }
            }

            .gold1buycomgoods {
                width: 592rpx;
                height: 206rpx;
                left: 25rpx;
                top: 197rpx;
                position: absolute;

                .gold1buycomgoodsbg {
                    width: 592rpx;
                    height: 206rpx;
                    left: 0rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .gold1buycomgoodslockbtn {
                    width: 145rpx;
                    height: 52rpx;
                    left: 427rpx;
                    top: 80rpx;
                    position: absolute;
                }

                .gold1buycomgoodsnowbtn {
                    width: 145rpx;
                    height: 52rpx;
                    left: 427rpx;
                    top: 80rpx;
                    position: absolute;
                }
            }
        }

        .goldlocktip {
            width: 257rpx;
            height: 41rpx;
            left: 430rpx;
            top: 0rpx;
            position: absolute;
        }
    }

    .platinum {
        width: 686rpx;
        height: 1113rpx;
        left: 0rpx;
        top: 0rpx;
        position: absolute;

        .platinumbg {
            width: 686rpx;
            height: 1113rpx;
            border-radius: 45rpx 0 45rpx 45rpx;
            left: 0rpx;
            top: 0rpx;
            position: absolute;
            opacity: 0.2;
        }

        .platinumgoodcoupon {
            width: 640rpx;
            height: 561rpx;
            left: 24rpx;
            top: 523rpx;
            position: absolute;

            .platinumgoodcoupons {
                width: 640rpx;
                height: 561rpx;
                left: 0rpx;
                top: 0rpx;
                position: absolute;

                .platinumgoodcoupontitle {
                    width: 126rpx;
                    height: 31rpx;
                    left: 6rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .platinumgoodcouponbg {
                    width: 640rpx;
                    height: 494rpx;
                    left: 0rpx;
                    top: 67rpx;
                    position: absolute;
                    opacity: 0.3;
                }

                .platinumgoodcoupons1 {
                    width: 190rpx;
                    height: 160rpx;
                    left: 25rpx;
                    top: 89rpx;
                    position: absolute;
                }

                .platinumgoodcoupons2 {
                    width: 191rpx;
                    height: 160rpx;
                    left: 226rpx;
                    top: 89rpx;
                    position: absolute;
                }

                .platinumgoodcoupons3 {
                    width: 191rpx;
                    height: 160rpx;
                    left: 425rpx;
                    top: 89rpx;
                    position: absolute;
                }

                .platinumgoodcoupons4 {
                    width: 191rpx;
                    height: 159rpx;
                    left: 124rpx;
                    top: 263rpx;
                    position: absolute;
                }

                .platinumgoodcoupons5 {
                    width: 191rpx;
                    height: 159rpx;
                    left: 325rpx;
                    top: 263rpx;
                    position: absolute;
                }
            }

            .platinumgoodcouponnowbtn {
                width: 442rpx;
                height: 85rpx;
                left: 99rpx;
                top: 453rpx;
                position: absolute;
            }
        }

        .platinum1buycom {
            width: 640rpx;
            height: 426rpx;
            left: 24rpx;
            top: 47rpx;
            position: absolute;

            .platinum1buycomtitle {
                width: 137rpx;
                height: 31rpx;
                left: 7rpx;
                top: 3rpx;
                position: absolute;
            }

            .platinum1buycomdesc {
                width: 396rpx;
                height: 23rpx;
                left: -6rpx;
                top: 46rpx;
                position: absolute;
            }

            // .platinum1buycomstatus {
            //     width: 163rpx;
            //     height: 73rpx;
            //     left: 452rpx;
            //     top: 0rpx;
            //     position: absolute;
            // }

            .platinum1buycomsel4 {
                width: 640rpx;
                height: 319rpx;
                left: 0rpx;
                top: 106rpx;
                position: absolute;
            }

            .platinum1buycomsel3 {
                width: 640rpx;
                height: 319rpx;
                left: 0rpx;
                top: 107rpx;
                position: absolute;
            }

            .platinum1buycomsel2 {
                width: 640rpx;
                height: 319rpx;
                left: 0rpx;
                top: 107rpx;
                position: absolute;
            }

            .platinum1buycomsel1 {
                width: 640rpx;
                height: 319rpx;
                left: 0rpx;
                top: 106rpx;
                position: absolute;
            }

            .platinum1buycomtime1 {
                width: 69rpx;
                height: 46rpx;
                left: 45rpx;
                top: 120rpx;
                position: absolute;

                .platinum1buycomtime1text {
                    width: 69rpx;
                    height: 22rpx;
                    left: 0rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .platinum1buycomtime1status {
                    width: 49rpx;
                    height: 16rpx;
                    left: 10rpx;
                    top: 30rpx;
                    position: absolute;
                }
            }

            .platinum1buycomtime2 {
                width: 69rpx;
                height: 46rpx;
                left: 205rpx;
                top: 120rpx;
                position: absolute;

                .platinum1buycomtime2text {
                    width: 69rpx;
                    height: 22rpx;
                    left: 0rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .platinum1buycomtime2status {
                    width: 49rpx;
                    height: 16rpx;
                    left: 10rpx;
                    top: 30rpx;
                    position: absolute;
                }
            }

            .platinum1buycomtime3 {
                width: 69rpx;
                height: 46rpx;
                left: 365rpx;
                top: 120rpx;
                position: absolute;

                .platinum1buycomtime3text {
                    width: 69rpx;
                    height: 22rpx;
                    left: 0rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .platinum1buycomtime3status {
                    width: 49rpx;
                    height: 16rpx;
                    left: 10rpx;
                    top: 30rpx;
                    position: absolute;
                }
            }

            .platinum1buycomtime4 {
                width: 69rpx;
                height: 46rpx;
                left: 525rpx;
                top: 120rpx;
                position: absolute;

                .platinum1buycomtime4text {
                    width: 69rpx;
                    height: 22rpx;
                    left: 0rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .platinum1buycomtime4status {
                    width: 49rpx;
                    height: 16rpx;
                    left: 10rpx;
                    top: 30rpx;
                    position: absolute;
                }
            }

            .platinum1buycomgoods {
                width: 592rpx;
                height: 206rpx;
                left: 25rpx;
                top: 197rpx;
                position: absolute;

                .platinum1buycomgoodsbg {
                    width: 592rpx;
                    height: 206rpx;
                    left: 0rpx;
                    top: 0rpx;
                    position: absolute;
                }

                .platinum1buycomgoodslockbtn {
                    width: 145rpx;
                    height: 52rpx;
                    left: 427rpx;
                    top: 80rpx;
                    position: absolute;
                }

                .platinum1buycomgoodsnowbtn {
                    width: 145rpx;
                    height: 52rpx;
                    left: 427rpx;
                    top: 80rpx;
                    position: absolute;
                }
            }
        }

        .platinumlocktip {
            width: 257rpx;
            height: 41rpx;
            left: 430rpx;
            top: 0rpx;
            position: absolute;
        }
    }

    .default-text {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 36rpx;
        color: rgba(102, 102, 102, 1);
    }
}

// 精选好券按钮样式
.coupon-button-container {
    position: absolute;
    left: 99rpx;
    top: 453rpx;
    width: 442rpx;
    height: 85rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .coupon-btn {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 42.5rpx;
        font-size: 26rpx;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;

        &.coupon-btn-unlocked {
            background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
            color: #fff;
            box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);

            &:active {
                transform: scale(0.95);
                box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.4);
            }
        }

        &.coupon-btn-used {
            background: linear-gradient(135deg, #4ECDC4, #44A08D);
            color: #fff;
            box-shadow: 0 4rpx 12rpx rgba(78, 205, 196, 0.3);

            &:active {
                transform: scale(0.95);
                box-shadow: 0 2rpx 8rpx rgba(78, 205, 196, 0.4);
            }
        }

        &.coupon-btn-locked {
            background: #E0E0E0;
            color: #999;
            cursor: not-allowed;
        }
    }
}

// 限时1分购按钮样式
.buy-button-container {
    position: absolute;
    left: 427rpx;
    top: 80rpx;
    width: 145rpx;
    height: 52rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .buy-btn {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 26rpx;
        font-size: 24rpx;
        // font-weight: bold;
        display: flex;
        white-space: nowrap;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;

        &.buy-btn-unlocked-gold {
            background: linear-gradient(135deg, #503404, #6a4505);
            color: #fff;
            box-shadow: 0 2rpx 8rpx rgba(80, 52, 4, 0.3);

            &:active {
                transform: scale(0.95);
                box-shadow: 0 1rpx 6rpx rgba(80, 52, 4, 0.4);
            }
        }

        &.buy-btn-unlocked-platinum {
            background: linear-gradient(135deg, #284a6c, #3a5e80);
            color: #fff;
            box-shadow: 0 2rpx 8rpx rgba(40, 74, 108, 0.3);

            &:active {
                transform: scale(0.95);
                box-shadow: 0 1rpx 6rpx rgba(40, 74, 108, 0.4);
            }
        }

        &.buy-btn-unlocked-diamond {
            background: linear-gradient(135deg, #503404, #6a4505);
            color: #fff;
            box-shadow: 0 2rpx 8rpx rgba(80, 52, 4, 0.3);

            &:active {
                transform: scale(0.95);
                box-shadow: 0 1rpx 6rpx rgba(80, 52, 4, 0.4);
            }
        }

        &.buy-btn-unlocked-starlight {
            background: linear-gradient(135deg, #503404, #6a4505);
            color: #fff;
            box-shadow: 0 2rpx 8rpx rgba(80, 52, 4, 0.3);

            &:active {
                transform: scale(0.95);
                box-shadow: 0 1rpx 6rpx rgba(80, 52, 4, 0.4);
            }
        }

        &.buy-btn-unlocked-starshine {
            background: linear-gradient(135deg, #f7d1a0, #f9dca8);
            color: #000;
            box-shadow: 0 2rpx 8rpx rgba(247, 209, 160, 0.3);

            &:active {
                transform: scale(0.95);
                box-shadow: 0 1rpx 6rpx rgba(247, 209, 160, 0.4);
            }
        }

        &.buy-btn-purchased-gold {
            background: linear-gradient(135deg, #503404, #6a4505);
            color: #fff;
            box-shadow: 0 2rpx 8rpx rgba(80, 52, 4, 0.3);
            opacity: 0.7;
        }

        &.buy-btn-purchased-platinum {
            background: linear-gradient(135deg, #284a6c, #3a5e80);
            color: #fff;
            box-shadow: 0 2rpx 8rpx rgba(40, 74, 108, 0.3);
            opacity: 0.7;
        }

        &.buy-btn-purchased-diamond {
            background: linear-gradient(135deg, #503404, #6a4505);
            color: #fff;
            box-shadow: 0 2rpx 8rpx rgba(80, 52, 4, 0.3);
            opacity: 0.7;
        }

        &.buy-btn-purchased-starlight {
            background: linear-gradient(135deg, #503404, #6a4505);
            color: #fff;
            box-shadow: 0 2rpx 8rpx rgba(80, 52, 4, 0.3);
            opacity: 0.7;
        }

        &.buy-btn-purchased-starshine {
            background: linear-gradient(135deg, #f7d1a0, #f9dca8);
            color: #000;
            box-shadow: 0 2rpx 8rpx rgba(247, 209, 160, 0.3);
            opacity: 0.7;
        }

        &.buy-btn-locked-gold {
            background: linear-gradient(135deg, #503404, #6a4505);
            color: #fff;
        }

        &.buy-btn-locked-platinum {
            background: linear-gradient(135deg, #284a6c, #3a5e80);
            color: #fff;
        }

        &.buy-btn-locked-diamond {
            background: linear-gradient(135deg, #503404, #6a4505);
            color: #fff;
        }

        &.buy-btn-locked-starlight {
            background: linear-gradient(135deg, #503404, #6a4505);
            color: #fff;
        }

        &.buy-btn-locked-starshine {
            background: linear-gradient(135deg, #f7d1a0, #f9dca8);
            color: #000;
        }

        &.buy-btn-upgrade-gold {
            background: linear-gradient(135deg, #f5ece1, #f5ece1);
            color: #99662e;
        }

        &.buy-btn-upgrade-platinum {
            background: linear-gradient(135deg, #e1ecf5, #e1ecf5);
            color: #284a6c;
        }

        &.buy-btn-upgrade-diamond {
            background: linear-gradient(135deg, #f5ece1, #f5ece1);
            color: #503404;
        }

        &.buy-btn-upgrade-starlight {
            background: linear-gradient(135deg, #f5ece1, #f5ece1);
            color: #503404;
        }

        &.buy-btn-upgrade-starshine {
            background: linear-gradient(135deg, #f5ece1, #f5ece1);
            color: #241b15;
        }
    }
}

// 时间段样式
.diamond1buycomtime1,
.diamond1buycomtime2,
.diamond1buycomtime3,
.diamond1buycomtime4 {
    transition: all 0.3s ease;


    .diamond1buycomtime1text {
        width: 69rpx;
        height: 22rpx;
        left: 0rpx;
        top: 0rpx;
        position: absolute;
    }

    .diamond1buycomtime1status {
        width: 49rpx;
        height: 16rpx;
        left: 10rpx;
        top: 30rpx;
        position: absolute;
    }

    .diamond1buycomtime2text {
        width: 69rpx;
        height: 22rpx;
        left: 0rpx;
        top: 0rpx;
        position: absolute;
    }

    .diamond1buycomtime2status {
        width: 49rpx;
        height: 16rpx;
        left: 10rpx;
        top: 30rpx;
        position: absolute;
    }

    .diamond1buycomtime3text {
        width: 69rpx;
        height: 22rpx;
        left: 0rpx;
        top: 0rpx;
        position: absolute;
    }

    .diamond1buycomtime3status {
        width: 49rpx;
        height: 16rpx;
        left: 10rpx;
        top: 30rpx;
        position: absolute;
    }

    .diamond1buycomtime4text {
        width: 69rpx;
        height: 22rpx;
        left: 0rpx;
        top: 0rpx;
        position: absolute;
    }

    .diamond1buycomtime4status {
        width: 49rpx;
        height: 16rpx;
        left: 10rpx;
        top: 30rpx;
        position: absolute;
    }
}

/* 精选好券按钮样式 */
.coupon-btn {
    width: 160rpx;
    height: 60rpx;
    border-radius: 30rpx;
    font-size: 28rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    line-height: 1;
}

.coupon-btn-locked {
    background: linear-gradient(to right, #b0b0b0, #d0d0d0);
    color: #ffffff;
}

.coupon-btn-purchased {
    background: linear-gradient(to right, #b0b0b0, #d0d0d0);
    color: #ffffff;
}

.coupon-btn-purchased-gold {
    background: linear-gradient(to right, #906632, #ab7a44);
    color: #ffffff;
}

.coupon-btn-purchased-platinum {
    background: linear-gradient(to right, #5189c0, #6fa2d5);
    color: #ffffff;
}

.coupon-btn-purchased-diamond {
    background: linear-gradient(to right, #7253a5, #997acc);
    color: #ffffff;
}

.coupon-btn-purchased-starlight {
    background: linear-gradient(to right, #cda36b, #e0b97d);
    color: #ffffff;
}

.coupon-btn-purchased-starshine {
    background: linear-gradient(to right, #000000, #2c1600);
    color: #ffffff;
}

.coupon-btn-unlocked-gold {
    background: linear-gradient(to right, #906632, #ab7a44);
    color: #ffffff;
}

.coupon-btn-unlocked-platinum {
    background: linear-gradient(to right, #5189c0, #6fa2d5);
    color: #ffffff;
}

.coupon-btn-unlocked-diamond {
    background: linear-gradient(to right, #7253a5, #997acc);
    color: #ffffff;
}

.coupon-btn-unlocked-starlight {
    background: linear-gradient(to right, #cda36b, #e0b97d);
    color: #ffffff;
}

.coupon-btn-unlocked-starshine {
    background: linear-gradient(to right, #000000, #2c1600);
    color: #ffffff;
}
</style>
