<template>
<!--    <x-skeleton :type="skeleton.type" :loading="skeleton.loading" :config="skeleton.config">-->
        <view :style="warpCss" class="overflow-hidden" v-if="isShow && seckillList.length > 0">
            <view class="diy-seckill-goods-list overflow-hidden" >
                <view>
                    
                    <template v-if="diyComponent.headStyle.value == 'style-1'">
                        <view class="relative w-full h-[110rpx] z-5" v-if="seckillList.length> 0">
                            <view class=" absolute left-0 bottom-[1rpx]"></view>
                            <scroll-view :scroll-x="true" class="h-[110rpx]  bg-[#F91106]" scroll-with-animation :scroll-into-view="'id' + (activeIndex-1 < 0 ? 0 :activeIndex-1)" :style="{  background: `linear-gradient(${diyComponent.inComing.startBgColor}, ${diyComponent.inComing.endBgColor})`}">
                                <view class="flex items-end h-[100%]" >
                                    <view class="h-[110rpx] relative px-[20rpx] active-btn flex-shrink-0" v-for="(item,index) in seckillList" @click="navClick(item,index)" :id="'id' + index"
                                    :style="active === item.id
                                    ? { 'fontWeight': diyComponent.progress.fontWeight, 'color': diyComponent.progress.color } 
                                    : {'color': diyComponent.inComing.color,'fontWeight' : diyComponent.inComing.fontWeight}" >
                                        <view class=" px-[10rpx] text-center relative z-10" :class="{'pt-[18rpx]':item.status != 2,'pt-[15rpx]':item.status == 2,'left-[-20rpx]':index==0&&item.status==2}">
                                        <template v-if="item.status == 1">
                                                <view class="text-[28rpx] leading-[28rpx] px-[10rpx] h-[35rpx] ">{{ item.start_time_format }}</view>
                                                <view class="flex justify-center mt-[5rpx]">
                                                    <text class="text-[26rpx] flex-center mt-[6rpx]">{{diyComponent.inComing.title }}</text>
                                                </view>
                                        </template>
                                        <template v-else-if="item.status == 0">
                                                <view class="text-[28rpx] leading-[28rpx] px-[10rpx] h-[35rpx] ">{{ item.start_time_format }}</view>
                                                <view class="flex justify-center mt-[5rpx]">
                                                    <text class="text-[26rpx] flex-center mt-[6rpx]">{{ item.status_name }}</text>
                                                </view>
                                        </template>
                                        <template v-else>
                                            <view class="flex flex-col items-center px-[10rpx] justify-center">
                                                <up-count-down class="text-[#fff] text-[28rpx] ml-[10rpx]" :time="item.countdown" format="DD:HH:mm:ss" @change="onChange">
                                                    <view class="flex justify-center items-center h-[39rpx] gap-[6rpx]">
                                                        <view class="text-[24rpx] flex items-center justify-center min-w-[32rpx] h-[32rpx] rounded-[6rpx]" :class="{'bg-[red] text-[#fff]':active == item.id, 'bg-[rgba(255,255,255,.4)] text-[#fff]':active != item.id}">
                                                            <text class="min-w-[30rpx] text-center" v-if="timeData.hours">{{ timeData.hours >= 10 ? timeData.hours : '0' + timeData.hours }}</text>
                                                            <text class="min-w-[30rpx] text-center" v-else>00</text>
                                                        </view>
                                                        <view :class="{'text-[red]':active == item.id}">:</view>
                                                        <view class="text-[24rpx] flex items-center justify-center min-w-[32rpx] h-[32rpx] rounded-[6rpx]" :class="{'bg-[red] text-[#fff]':active == item.id, 'bg-[rgba(255,255,255,.4)] text-[#fff]':active != item.id}">
                                                            <text class="min-w-[30rpx] text-center">{{ timeData.minutes >= 10 ? timeData.minutes : '0' + timeData.minutes }}</text>
                                                        </view>
                                                        <view :class="{'text-[red]':active == item.id}">:</view>
                                                        <view class="text-[24rpx] flex items-center justify-center min-w-[32rpx] h-[32rpx] rounded-[6rpx]" :class="{'bg-[red] text-[#fff]':active == item.id, 'bg-[rgba(255,255,255,.4)] text-[#fff]':active != item.id}">
                                                            <text class="min-w-[30rpx] text-center">{{ timeData.seconds < 10 ? '0' + timeData.seconds : timeData.seconds }}</text>
                                                        </view>
                                                    </view>
                                                </up-count-down>
                                                <view class="flex justify-center mt-[5rpx]">
                                                    <text class="text-[26rpx] flex-center mt-[6rpx]">{{diyComponent.progress.title }}</text>
                                                </view>
                                            </view>
                                        </template>
                                        </view>
                                        <template v-if="active == item.id">
                                            <image class="absolute bottom-0 !h-[111rpx] w-full" :class="{'left-0':index!=seckillList.length-1,'right-0':index == seckillList.length-1}" :src="img(getNavBg2(index))" />
                                        </template>
                                    </view>
                                </view>
                            </scroll-view>
                        </view>
                    </template>
                    <template v-if="diyComponent.headStyle.value == 'style-2'">
                        <scroll-view :scroll-x="true" class="h-[65rpx]" scroll-with-animation>
                            <view class="w-full flex items-end h-[65rpx]" v-if="seckillList.length > 0">
                                <view v-if="seckillList.length > 0">
                                    <view v-for="(item,index) in seckillList.filter(item => item.status==2)" @click="navClick(item,index)" :key="index" class="flex pl-[20rpx] items-end">
                                        <view class="flex items-end">
                                            <image :src="img('addon/seckill/diy/seckill-goods/today_seckill.png')" class="h-[40rpx]" mode="heightFix" />
                                            <up-count-down class="text-[#fff] text-[28rpx] ml-[10rpx]" :time="item.countdown" format="DD:HH:mm:ss" @change="onChange">
                                                <view class="flex justify-center items-center h-[39rpx] gap-[6rpx]">
                                                    <view class="text-[28rpx] flex items-center justify-center min-w-[36rpx] h-[36rpx] rounded-[6rpx] text-[#fff] bg-[#FF2C2B]">
                                                        <text class="min-w-[34rpx] text-center" v-if="timeData.hours">{{ timeData.hours >= 10 ? timeData.hours : '0' + timeData.hours }}</text>
                                                        <text class="min-w-[34rpx] text-center" v-else>00</text>
                                                    </view>
                                                    <view class="text-[#FF2C2B]">:</view>
                                                    <view class="text-[28rpx] flex items-center justify-center min-w-[36rpx] h-[36rpx] rounded-[6rpx] text-[#fff] bg-[#FF2C2B]">
                                                        <text class="min-w-[34rpx] text-center">{{ timeData.minutes >= 10 ? timeData.minutes : '0' + timeData.minutes }}</text>
                                                    </view>
                                                    <view class="text-[#FF2C2B]">:</view>
                                                    <view class="text-[28rpx] flex items-center justify-center min-w-[36rpx] h-[36rpx] rounded-[6rpx] text-[#fff] bg-[#FF2C2B]">
                                                        <text class="min-w-[34rpx] text-center">{{ timeData.seconds < 10 ? '0' + timeData.seconds : timeData.seconds }}</text>
                                                    </view>
                                                </view>
                                            </up-count-down>
                                        </view>
                                    </view>
                                </view>
                                <view v-if="diyComponent.navList.length > 0">
                                    <view class="flex items-end mb-[3rpx] h-[100%]" >
                                        <view v-for="(item, index) in diyComponent.navList" :key="index" @click="changeNav(item, index)"  class="text-[28rpx] ml-[25rpx] text-[#666]" :class="{ '!text-[#FF2C2B]' : index == navIndex}">
                                            <text class="text-[28rpx]" style="white-space: nowrap;">{{ item.title }}</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </scroll-view>
                    </template>
                    <template v-if="diyComponent.headStyle.value == 'style-3'">
                        <view class="w-full h-[95rpx] flex flex-col px-[20rpx] items-center justify-center"  :style="{
                                    backgroundImage: `url('${img(diyComponent.headBgUrl)}')`,
                                    backgroundSize: 'cover',
                                    backgroundRepeat: 'no-repeat'
                                    }" v-if="seckillList.length > 0" >
                            <view v-for="(item,index) in seckillList.filter(item => item.status==2)" :key="index" class="flex w-full items-center justify-between mb-[10rpx] overflow-hidden">
                                <view class="w-[50%] flex items-center">
                                    <image :src="img('addon/seckill/diy/seckill-goods/seckill_title.png')" class="h-[44rpx] w-[154rpx]" />
                                </view>
                                <view class="flex items-center w-[40%] justify-end pr-[40rpx]">
                                    <text class="text-[#fff] text-[24rpx] mr-[10rpx]">距结束</text>
                                    <up-count-down class="text-[#fff] text-[28rpx] " :time="item.countdown" format="DD:HH:mm:ss" @change="onChange">
                                        <view class="flex justify-center items-center h-[39rpx] gap-[6rpx]">
                                            <view class="text-[28rpx] flex items-center justify-center min-w-[36rpx] h-[36rpx] rounded-[6rpx] text-[#FF0000] bg-[#fff]">
                                                <text class="min-w-[36rpx] p-[2rpx] text-center" v-if="timeData.hours">{{ timeData.hours >= 10 ? timeData.hours : '0' + timeData.hours }}</text>
                                                <text class="min-w-[36rpx] p-[2rpx] text-center" v-else>00</text>
                                            </view>
                                            <view class="text-[#fff]">:</view>
                                            <view class="text-[28rpx] flex items-center justify-center min-w-[36rpx] h-[36rpx] rounded-[6rpx] text-[#FF0000] bg-[#fff]">
                                                <text class="min-w-[36rpx] p-[2rpx] text-center">{{ timeData.minutes >= 10 ? timeData.minutes : '0' + timeData.minutes }}</text>
                                            </view>
                                            <view class="text-[#fff]">:</view>
                                            <view class="text-[28rpx] flex items-center justify-center min-w-[36rpx] h-[36rpx] rounded-[6rpx] text-[#FF0000] bg-[#fff]">
                                                <text class="min-w-[36rpx] p-[2rpx] text-center">{{ timeData.seconds < 10 ? '0' + timeData.seconds : timeData.seconds }}</text>
                                            </view>
                                        </view>
                                    </up-count-down>
                                </view>
                            </view>
                        </view>
                    </template>
                </view>
                <view class="min-h-[240rpx]" :style="listCss" :class="{'mt-[-10rpx] relative z-10':diyComponent.headStyle.value =='style-3'}">
                    <template v-if="diyComponent.goodsStyle.value =='style-3'">
                        <view class="relative">
                            <view v-if="list.length>0" v-for="(item,index) in list" :key="index" >
                                <view class="bg-[#fff] p-[20rpx] flex " :class="{'mb-[var(--top-m)]':index<list.length-1}" :style="itemCss" @click="toLink(item)">
                                    <view class="w-[200rpx] h-[200rpx]" :style="imageRounded.style">
                                        <u--image width="200rpx" height="200rpx" :radius="imageRounded.val" :src="img(item.goods_cover_thumb_small ? item.goods_cover_thumb_small : '')" model="aspectFill">
                                            <template #error>
                                                <image class="w-[200rpx] h-[200rpx]" :style="imageRounded.style" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill" />
                                            </template>
                                        </u--image>
                                    </view>

                                    <view class="ml-[20rpx] flex-1 flex flex-col justify-between">
                                        <view>
                                            <view class="text-[28rpx] leading-[1.4] multi-hidden">{{ item.name }}</view>
                                            <view class="flex items-center mt-[10rpx] justify-between text-[24rpx] leading-[24rpx] text-[#999] mr-[10rpx]" v-if="item.sub_title">
                                                <view class="using-hidden">{{ item.sub_title }}</view>
                                            </view>
                                        </view>
                                        <view>
                                            <view class="flex items-end justify-between rounded-[12rpx] mb-15rpx] relative">
                                                <view class="text-[var(--price-text-color)] flex items-baseline flex-1" :class="{'!text-[var(--primary-color)]':item.discount_status!='active'}">
                                                    <text class="text-[22rpx] whitespace-nowrap leading-[28rpx] mb-[5rpx]">秒杀价</text>
                                                    <text class="text-[24rpx] leading-[26rpx] font-500 mr-[4rpx] price-font">￥</text>
                                                    <text class="text-[40rpx] leading-[40rpx] font-500 price-font">{{ parseFloat(item.defaultSku.seckill_price).toFixed(2).split('.')[0] }}.</text>
                                                    <text class="text-[24rpx] leading-[28rpx] font-500 price-font">{{ parseFloat(item.defaultSku.seckill_price).toFixed(2).split('.')[1] }}</text>
                                                    <text class="text-[24rpx] line-through ml-[8rpx] text-[#999999] truncate">￥{{item.defaultSku.price}}</text>
                                                </view>
                                            </view>

                                            <view class="flex items-center justify-between bg-[#FFF2EF] rounded-tr-12rpx rounded-br-34rpx rounded-tl-12rpx rounded-bl-12rpx">
                                                <view class="flex items-center h-full ml-[15rpx]" v-if="active_state == 2">
                                                    <view class="w-[140rpx]">
                                                        <u-line-progress :percentage="calculateNumPercentage(item)" height="6" :showText="false" activeColor="#FF2222" inactiveColor="#FFCACA"></u-line-progress>
                                                    </view>
                                                    <text class="text-[24rpx] leading-[24rpx] ml-[10rpx] text-[#FF0000]">已抢{{ calculateNumPercentage(item) }}%</text>
                                                </view>
                                                <view class="flex items-center h-full ml-[15rpx] text-[24rpx] text-[#ff0000]" v-if="active_state == 0">活动已结束</view>
                                                <view class="flex items-center h-full ml-[15rpx] text-[24rpx] text-[#ff0000]" v-if="active_state == 1">活动未开始</view>
                                                <view :style="goodsBtnCss" class=" ml-auto px-[20rpx] h-[50rpx] rounded-tr-12rpx rounded-br-34rpx rounded-tl-12rpx rounded-bl-12rpx flex items-center justify-center bg-[red]">
                                                    <text class="text-[20rpx] whitespace-nowrap leading-[26rpx]">{{ diyComponent.btnStyle.text }}</text>
                                                </view>
                                            </view>
                                        </view>

                                    </view>
                                </view>
                            </view>
                            <mescroll-empty v-if="!list.length&& !loading" :option="{tip : '暂无商品，请看看其他商品吧！'}"></mescroll-empty>
                        </view>
                    </template>
                    <template v-if="diyComponent.goodsStyle.value =='style-2'">
                        <view class="relative">
                            <view v-if="list.length>0 " v-for="(item,index) in list" :key="index">
                                <view class="bg-[#fff] p-[20rpx] flex " :class="{'mb-[var(--top-m)]':index<list.length-1}" :style="itemCss" @click="toLink(item)">
                                    <view class="w-[200rpx] h-[200rpx]" :style="imageRounded.style">
                                        <u--image width="200rpx" height="200rpx" :radius="imageRounded.val" :src="img(item.goods_cover_thumb_small ? item.goods_cover_thumb_small : '')" model="aspectFill">
                                            <template #error>
                                                <image class="w-[200rpx] h-[200rpx]" :style="imageRounded.style" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill" />
                                            </template>
                                        </u--image>
                                    </view>

                                    <view class="ml-[20rpx] flex-1 flex flex-col justify-between">
                                        <view>
                                            <view class="text-[28rpx] leading-[1.4] multi-hidden">{{ item.name }}</view>
                                            <view class="flex items-center mt-[10rpx] justify-between text-[24rpx] leading-[24rpx] text-[#999] mr-[10rpx]" v-if="item.sub_title">
                                                <view class="using-hidden">{{ item.sub_title }}</view>
                                            </view>
                                         
                                        </view>
                                        <view class="">
                                            <view class="flex items-center mb-[10rpx]" v-if="active_state == 2">
                                                <view class="w-[200rpx]">
                                                    <u-line-progress :percentage="calculateNumPercentage(item)" height="9" :showText="false" activeColor="#FF2222" inactiveColor="#FFCACA">
                                                    </u-line-progress>
                                                </view>
                                                <text class="text-[24rpx] leading-[24rpx] ml-[10rpx] text-[#FF0000]">已抢{{ calculateNumPercentage(item) }}%</text>
                                            </view>

                                            <view class="flex items-end justify-between rounded-[12rpx] relative">
                                                <view class="text-[var(--price-text-color)] flex items-end  w-[300rpx] using-hidden mr-[10rpx]" :class="{'!text-[var(--primary-color)]':item.discount_status!='active'}">
                                                    <view class="flex items-baseline">
                                                        <text class="text-[24rpx] leading-[26rpx] font-500 mr-[4rpx] price-font">￥</text>
                                                        <text class="text-[40rpx] whitespace-nowrap leading-[40rpx] font-500 price-font">{{ parseFloat(item.defaultSku.seckill_price).toFixed(2).split('.')[0] }}.</text>
                                                        <text class="text-[24rpx] whitespace-nowrap leading-[28rpx] font-500 price-font">{{ parseFloat(item.defaultSku.seckill_price).toFixed(2).split('.')[1] }}</text>
                                                    </view>
                                                    <text class="text-[20rpx] whitespace-nowrap leading-[28rpx] ml-[8rpx] mb-[5rpx] bg-[#FFF4F4] border-[1rpx] border-solid border-[#FF9C9C] text-[#FF0000] px-[8rpx] rounded-tr-10rpx rounded-br-10rpx rounded-tl-10rpx">秒杀价</text>
                                                </view>
                                                <view  :style="goodsBtnCss" class="relative px-[20rpx] flex-1 h-[50rpx] flex items-center justify-center bg-[red]">
                                                    <text class="text-[20rpx] whitespace-nowrap leading-[26rpx]">{{ diyComponent.btnStyle.text }}</text>
                                                </view>
                                            </view>
                                        </view>
                                        
                                    </view>
                                </view>
                            </view>
                            <mescroll-empty v-if="!list.length && !loading" :option="{tip : '暂无商品，请看看其他商品吧！'}"></mescroll-empty>
                        </view>
                    </template>
                    <template v-if="diyComponent.goodsStyle.value =='style-1'">
                        <scroll-view :scroll-x="true" class="flex" scroll-with-animation>
                            <view class="w-full flex items-start p-[20rpx]" v-if="list.length >0">
                                <view  v-for="(item,index) in list" :key="index">
                                    <view class="bg-[#fff] p-[10rpx] flex flex-col items-center mr-[10rpx]" :style="itemCss" @click="toLink(item)">
                                        <view class="w-[220rpx] h-[220rpx] overflow-hidden"  :style="imageRounded.style" >
                                            <u--image width="220rpx" height="220rpx" :radius="imageRounded.val" :src="img(item.goods_cover_thumb_small ? item.goods_cover_thumb_small : '')" model="aspectFill">
                                                <template #error>
                                                    <image class=" w-[220rpx] h-[220rpx]" :style="imageRounded.style"  :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill" />
                                                </template>
                                            </u--image>
                                        </view>

                                        <view class="mt-[10rpx] flex flex-col max-w-[210rpx] justify-between">
                                            <view class="">
                                                <view class="text-[28rpx] leading-[1.2] using-hidden mb-[10rpx]">{{ item.name }}</view>
                                          
                                                <!-- <view class="flex items-center my-[10rpx]" v-if="active_state == 2">
                                                    <view class="w-[120rpx] relative style1">
                                                        <view class="absolute right-[5rpx] top-[0rpx] z-3 !text-[14rpx] text-[#FF4040]" :style="{ top: platform == 'ios' ? '0rpx' : '1rpx' }">
                                                            <text class="">已抢{{ calculateNumPercentage(item) }}%</text>
                                                        </view>
                                                        <u-line-progress :percentage="calculateNumPercentage(item)" class="custom-progress-border" height="8" :showText="false" activeColor="#FFDDD4" inactiveColor="#fff">
                                                        </u-line-progress>
                                                    </view>
                                                </view> -->
                                            </view>
                                            <view class="flex items-end justify-between h-[60rpx] bg-[#FF1414] rounded-[12rpx] relative">
                                                <view class="text-[var(--price-text-color)] flex items-baseline pl-[16rpx] pb-[12rpx] w-[210rpx] truncate">
                                                    <text class="text-[20rpx] !text-[#fff] leading-[26rpx] font-500 mr-[4rpx] price-font">￥</text>
                                                    <text class="text-[36rpx] !text-[#fff] leading-[40rpx] font-500 price-font">{{ parseFloat(item.defaultSku.seckill_price).toFixed(2).split('.')[0] }}.</text>
                                                    <text class="text-[20rpx] !text-[#fff] leading-[28rpx] font-500 price-font">{{ parseFloat(item.defaultSku.seckill_price).toFixed(2).split('.')[1] }}</text>
                                                </view>
                                                <view v-if="active_state == 2" class="absolute top-0 right-[-2rpx] rounded-r-[12rpx] h-[60rpx] w-[82rpx] flex justify-end items-center text-[#FF0000] text-[28rpx] font-bold" :style="{background: 'linear-gradient( 86deg, #FFCFA6 16%, #FFEDBC 46%), #FFE3AD'}">
                                                    <text class="pr-[20rpx]">
                                                        抢
                                                    </text>
                                                </view>
                                                <view v-if="active_state == 0" class="absolute top-0 right-[-2rpx] rounded-r-[12rpx] h-[60rpx] w-[82rpx] text-[24rpx] h-full whitespace-nowrap flex justify-end items-center text-[#999] font-500" :style="{background: 'linear-gradient( 86deg, #E9E9E9 16%, #E9E9E9 46%), #FFE3AD'}">
                                                    <text class="pr-[10rpx]">
                                                        结束
                                                    </text>
                                                </view>
                                                <view v-if="active_state == 1" class="absolute top-0 right-[-2rpx] rounded-r-[12rpx] h-[60rpx] w-[92rpx] text-[24rpx] h-full whitespace-nowrap flex justify-end text-[#333] items-center font-500" :style="{background: 'linear-gradient( 86deg, #FFCFA6 16%, #FFEDBC 46%), #FFE3AD'}">
                                                    <text class="pr-[5rpx]">
                                                        未开始
                                                    </text>
                                                </view>
                                                <image :src="img('addon/seckill/diy/seckill-goods/lightning1.png')" class="w-[33rpx] h-[60rpx] ml-[20rpx] absolute top-[0] right-[50rpx] z-10" mode="" :class="{'right-[65rpx]':active_state==1}" />
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </scroll-view>
                        <mescroll-empty v-if="!list.length && !loading" :option="{tip : '暂无商品，请看看其他商品吧！'}"></mescroll-empty>
                    </template>
                </view>
            </view>
        </view>
<!--    </x-skeleton>-->
</template>

<script setup lang="ts">
// 秒杀商品组件
import { ref, reactive, computed, watch, onMounted, nextTick } from 'vue';
import { redirect, img } from '@/utils/common';
import useDiyStore from '@/app/stores/diy';
import { getSeckillTime, getSeckillDiyGoods } from '@/addon/seckill/api/goods'
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue'
import useSystemStore from "@/stores/system";

const systemStore = useSystemStore()
const props = defineProps(['component', 'index', 'value']);
const diyStore = useDiyStore();
const platform = systemStore.systemInfo.platform;
const diyComponent = computed(() => {
    if (props.value) {
        return props.value;
    } else if (diyStore.mode == 'decorate') {
        return diyStore.value[props.index];
    } else {
        return props.component;
    }
})

const seckillList = ref<Array<Object>>([])
const active = ref<number>(0)
const active_name = ref<String>('')
const active_state = ref<String>('')
const list = ref<Array<Object>>([]);

const timeData = ref({});
// 定义 onChange 方法
const onChange = (e) => {
    timeData.value = e;
};
const isShow = ref(true);
const seckillLoading = ref(false);
const getSeckillTimeFn = () => {
    seckillLoading.value = true;
    getSeckillTime().then((res: any) => {
        skeleton.loading = false;
        seckillList.value = res.data
        updateShowStatus()
        if(diyComponent.value.headStyle.value == 'style-1' || diyComponent.value.headStyle.value == 'style-2'){
            calculateNavWidth()
        }
        if (seckillList.value && seckillList.value.length) {
            seckillList.value.sort((a: any, b: any) => {
                return a.start_time - b.start_time
            })
        }
        if (seckillList.value && seckillList.value.length) {
            let tabData = seckillList.value[0]
            seckillList.value.forEach((item: any,index:number) => {
                const now = new Date();

                // 提取当前的时、分、秒
                const hours = now.getHours();
                const minutes = now.getMinutes();
                const seconds = now.getSeconds();

                // 计算当天已过的总秒数（从00:00:00到现在）
                const currentTimeSeconds = hours * 3600 + minutes * 60 + seconds;
                item.countdown = (item.end_time - currentTimeSeconds) * 1000;
                if (item.status == 2) {
                    tabData = item
                    activeIndex.value = index
                }
            })

            if (seckillList.value.findIndex((item: any) => item.status === 2) === -1) {
                const now = new Date();
                const currentTimeSeconds = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();

                let nearestItem: any = null;
                let nearestIndex = -1;
                let minTimeDiff = Infinity; // 初始化为无穷大，方便后续比较

                seckillList.value.forEach((item: any, index: number) => {
                    if (item.status === 1) { // 只处理即将开始的场次
                    // 计算距离开始的时间差（秒）
                    const timeDiff = item.start_time - currentTimeSeconds;

                    // 如果时间差大于0（未来的时间），且比当前记录的最小时间差更小
                    if (timeDiff > 0 && timeDiff < minTimeDiff) {
                        minTimeDiff = timeDiff;
                        nearestItem = item;
                        nearestIndex = index;
                    }
                }
            });
                // 如果找到了最近的即将开始的场次，则选中它
                if (nearestItem) {
                    tabData = nearestItem;
                    activeIndex.value = nearestIndex
                }
            }
            active.value = tabData.id
            active_name.value = tabData.status_name
            active_state.value = tabData.status
            seckillLoading.value = false

            // 装修模式禁止跳转
            if (diyStore.mode == 'decorate') return;
            getSeckillTimeGoodsFn()
        } else {
        }
    })
}

const updateShowStatus = () => {
    // 如果列表为空，直接隐藏
    if (!seckillList.value || seckillList.value.length === 0) {
        isShow.value = false;
        diyComponent.value.componentIsShow = false // 如果没有数据，整个组件都要隐藏
        return;
    }

    // 如果是 style-3 或 style-4，检查是否有 status=2 的项
    const isStyle3or4 = ['style-3', 'style-4'].includes(diyComponent.value.headStyle.value);
    const hasStatus2 = seckillList.value.some(item => item.status === 2);

    // 只有当是 style-3/4 且没有 status=2 的项时才隐藏
    isShow.value = !(isStyle3or4 && !hasStatus2);
    diyComponent.value.componentIsShow = isShow.value
}

const navIndex = ref(null);
const activeGoodsId = ref([]);
const changeNav = (item, index) => {
    if (diyStore.mode == 'decorate') return;
    navIndex.value = index;
    active.value = ''
    activeGoodsId.value = item.goodsIds;
    getSeckillTimeGoodsFn()
}
const activeIndex = ref(0)
const navClick = (item: any,index:any) => {
    // 装修模式禁止跳转
    if (diyStore.mode == 'decorate') return;
    navIndex.value = null
    activeGoodsId.value = []
    active.value = item.id
    activeIndex.value = index
    active_name.value = item.status_name
    active_state.value = item.status
    getSeckillTimeGoodsFn()
}

const getNavBg = (index) => {
    if (index === 0) return 'addon/seckill/goods/nav-left3.png'
    if (index === seckillList.value.length - 1 && isFullNav.value) return 'addon/seckill/goods/nav-right3.png'
    if (index === seckillList.value.length - 1 && !isFullNav.value) return 'addon/seckill/goods/nav-center3.png'
    return 'addon/seckill/goods/nav-center3.png'
}

const getNavBg2 = (index) => {
    if (index === 0) return 'addon/seckill/goods/nav-left2.png'
    if (index === seckillList.value.length - 1 && isFullNav.value) return 'addon/seckill/goods/nav-right2.png'
    if (index === seckillList.value.length - 1 && !isFullNav.value) return 'addon/seckill/goods/nav-center2.png'
    return 'addon/seckill/goods/nav-center2.png'
}
const isFullNav = ref(false)
// 计算导航项总宽度
const calculateNavWidth = () => {
    nextTick(() => {
        if (seckillList.value.length == 0) return; // 如果没有数据，则不执行
        const query = uni.createSelectorQuery()
        query.selectAll('.active-btn').boundingClientRect((rects) => {
            if (rects && rects.length > 0) {
                const screenWidth = systemStore.systemInfo.windowWidth - diyComponent.value.margin.both * 2  - 2 // 屏幕宽度-组件左右边距;
                // 计算总宽度（包含间距）
                const totalWidth = rects.reduce((sum, rect) => sum + rect.width, 0) - 10
                // 检查总宽度是否超过屏幕宽度
                isFullNav.value = totalWidth > screenWidth;
            } else {
            console.error('获取导航项宽度失败')
            }
        }).exec()
    });
}
const loading = ref<boolean>(true);
const getSeckillTimeGoodsFn = ()=>{
    loading.value = true;
    getSeckillDiyGoods({
        num: activeGoodsId.value.length ==0? diyComponent.value.num :'',
        time_id: navIndex.value==null?active.value :'' ,
        goods_id: diyComponent.value.headStyle.value == 'style-3'? activeGoodsId.value : '',
    }).then((res: any) => {
        skeleton.loading = false;
        list.value = res.data
        loading.value = false;
    }).catch((err: any) => {
        loading.value = false;
    })
}
const calculateNumPercentage = (item: any) => {
    const percentage = (item.defaultSku.order_num / item.defaultSku.sum_stock) * 100 || 0;
    // 确保返回字符串类型的两位小数
    return percentage.toFixed(2);
}
// 骨架屏
const skeleton = reactive({
    type: '',
    loading: diyStore.mode == 'decorate' ? false : true,
    config: {}
})

// 初始化骨架屏，根据不同样式风格，展示对应的骨架屏效果
const initSkeleton = () => {
    if (['style-1', 'style-2'].indexOf(diyComponent.value.goodsStyle.value) != -1) {

        // 单列 风格
        skeleton.type = 'list'
        skeleton.config = {
            textRows: 2
        };

    } else if (diyComponent.value.goodsStyle.value == 'style-3') {

        // 横向滑动 风格
        skeleton.type = 'waterfall'
        skeleton.config = {
            gridRows: 1,
            gridColumns: 3,
            headHeight: '200rpx',
            textRows: 2,
            textWidth: ['100%', '80%']
        };

    }
}

// 组件框架样式
const warpCss = computed(() => {
    let style = '';
    style += 'position:relative;';
    if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${ diyComponent.value.componentGradientAngle },${ diyComponent.value.componentStartBgColor },${ diyComponent.value.componentEndBgColor });`;
    else style += 'background-color:' + (diyComponent.value.componentStartBgColor || diyComponent.value.componentEndBgColor) + ';';

    if (diyComponent.value.componentBgUrl) {
        style += `background-image:url('${ img(diyComponent.value.componentBgUrl) }');`;
        style += 'background-size: cover;background-repeat: no-repeat;';
    }

    if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
    if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
    if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
    if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
    return style;
})

// 商品主图圆角
const imageRounded = computed(() => {
    const obj = {
        val: '',
        style: ''
    };
    if (diyComponent.value.imgElementRounded) {
        obj.val = diyComponent.value.imgElementRounded * 2 + 'rpx';
        obj.style += 'border-radius:' + diyComponent.value.imgElementRounded * 2 + 'rpx;';
    }
    return obj;
})

// 商品模块的样式
const itemCss = computed(() => {
    let style = '';
    if (diyComponent.value.elementBgColor) style += 'background-color:' + diyComponent.value.elementBgColor + ';';
    if (diyComponent.value.topElementRounded) style += 'border-top-left-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
    if (diyComponent.value.topElementRounded) style += 'border-top-right-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
    if (diyComponent.value.bottomElementRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
    if (diyComponent.value.bottomElementRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
    if (diyComponent.value.style == 'style-2') {
        if (diyComponent.value.margin && diyComponent.value.margin.both) style += 'width: calc((100vw - ' + (diyComponent.value.margin.both * 4) + 'rpx - 20rpx) / 2);'
        else style += 'width: calc((100vw - 20rpx) / 2 );'
    }
    return style;
})

// 商品模块的样式
const listCss = computed(() => {
    let style = '';
    if (diyComponent.value.goodsElementBgColor && diyComponent.value.headStyle.value == 'style-4') style += 'background-color:' + diyComponent.value.goodsElementBgColor + ';';
    if (diyComponent.value.goodsElementRounded) style += 'border-top-left-radius:' + diyComponent.value.goodsElementRounded * 2 + 'rpx;';
    if (diyComponent.value.goodsElementRounded) style += 'border-top-right-radius:' + diyComponent.value.goodsElementRounded * 2 + 'rpx;';
    return style;
})

// 购买按钮样式
const goodsBtnCss = computed(() => {
    let style = '';
    if (diyComponent.value.btnStyle.aroundRadius && diyComponent.value.goodsStyle.value == 'style-2') style += 'border-radius:' + diyComponent.value.btnStyle.aroundRadius * 2 + 'rpx;';
    if (diyComponent.value.btnStyle.startBgColor && diyComponent.value.btnStyle.endBgColor) {
        style += `background:linear-gradient(${ diyComponent.value.btnStyle.startBgColor },${ diyComponent.value.btnStyle.endBgColor });`;
    } else {
        style += 'background-color:' + (diyComponent.value.btnStyle.startBgColor || diyComponent.value.btnStyle.endBgColor) + ';';
    }
    if (diyComponent.value.btnStyle.color) style += 'color:' + diyComponent.value.btnStyle.color + ';';
    return style;
})

onMounted(() => {
    refresh();
    // 装修模式下刷新
    if (diyStore.mode == 'decorate') {
        watch(
            () => diyComponent.value,
            (newValue, oldValue) => {
                if (newValue && newValue.componentName == 'SeckillGoods') {
                    nextTick(() => {
                    })
                }
            }
        )
    } else {
        watch(
            () => diyComponent.value,
            (newValue, oldValue) => {
                refresh();
            },
            { deep: true }
        )
    }
});

const toLink = (item: any) => {
    if (diyStore.mode == 'decorate') return;
    redirect({ url: '/addon/seckill/pages/goods/detail', param: { sku_id: item.defaultSku.sku_id, time_id: active.value,seckill_id: item.seckill_id} })
}

const refresh = () => {
    // 装修模式下设置默认图
    if (diyStore.mode == 'decorate') {
        nextTick(() => {
            active_state.value = 2;
            let obj = {
                goods_cover_thumb_small: "",
                name: "商品名称",
                defaultSku: {
                    price: "100.00",
                    seckill_price: "10.00",
                    order_num: "30",
                    sum_stock: '100'
                },
                status: 2,

            };
            list.value.push(obj);
            list.value.push(obj);

            let obj2 = {
                countdown: 100000000,
                end_time: 68760,
                end_time_format: "14:06",
                id: 0,
                name: "活动名称",
                status_name: "正在秒杀",
                status: 2,
                start_time: 50760,
                start_time_format: "11:00"
            }
            let obj3 = {
                countdown: 100000000,
                end_time: 42665,
                end_time_format: "18:06",
                id: 1,
                name: "活动名称",
                status_name: "即将开始",
                status: 1,
                start_time: 15688,
                start_time_format: "16:00"
            }
            let obj4 = {
                countdown: 100000000,
                end_time: 42665,
                end_time_format: "21:06",
                id: 2,
                name: "活动名称",
                status_name: "即将开始",
                status: 1,
                start_time: 15688,
                start_time_format: "19:00"
            }
            seckillList.value.push(obj2);
            seckillList.value.push(obj3);
            seckillList.value.push(obj4);
        })
    } else {
        initSkeleton();
        getSeckillTimeFn();
    }
}

</script>
<style lang="scss" scoped>
.style1 {
    border:2rpx solid #FF4040 !important;
    border-radius: 10rpx;
}
</style>
