<template>
<!--    <x-skeleton :type="skeleton.type" :loading="skeleton.loading" :config="skeleton.config">-->
        <view :style="warpCss" class="overflow-hidden" v-if="list.length>0">
            <view class="diy-seckill-goods-hot overflow-hidden" :class="{'pb-[20rpx]': diyComponent.goodsStyle.value !='style-3'}">
                <view class="flex justify-between items-center px-[20rpx] h-[66rpx]"> 
                    <view class="flex items-center justify-start">
                        <template v-if="diyComponent.titleStyle.way=='text'">
                            <view class="flex items-center">
                                <view @click="diyStore.toRedirect(diyComponent.titleStyle.link)" :style="{ color : diyComponent.titleStyle.color, fontWeight : diyComponent.titleStyle.fontWeight,'font-size': (diyComponent.titleStyle.fontSize * 2) + 'rpx','font-style': diyComponent.titleStyle.fontStyle,whiteSpace: 'nowrap'}">
                                    {{ diyComponent.titleStyle.text }}
                                </view>
                                <view class="ml-[10rpx] using-hidden" :style="{ color : diyComponent.subTitleStyle.color, fontWeight : diyComponent.subTitleStyle.fontWeight,'font-size': (diyComponent.subTitleStyle.fontSize * 2) + 'rpx'}">
                                    {{ diyComponent.subTitleStyle.text }}
                                </view>
                            </view>
                        </template>
                        <template v-if="diyComponent.titleStyle.way=='img'">
                            <view class="flex items-center">
                                <view class="flex items-center" v-if="diyComponent.titleStyle.imgUrl" @click="diyStore.toRedirect(diyComponent.titleStyle.link)">
                                    <image :src="img(diyComponent.titleStyle.imgUrl)" class="h-[30rpx]" mode="heightFix" />
                                </view>
                                <view class="ml-[10rpx] using-hidden" :style="{ color : diyComponent.subTitleStyle.color, fontWeight : diyComponent.subTitleStyle.fontWeight,'font-size': (diyComponent.subTitleStyle.fontSize * 2) + 'rpx'}">
                                    {{ diyComponent.subTitleStyle.text }}
                                </view>
                            </view>
                            
                        </template>
                    </view>
                    <view v-if="diyComponent.moreStyle.isShow" class="flex-1 flex justify-end items-center">
                        <template v-if="diyComponent.moreStyle.way=='text'">
                            <view class="flex items-center">
                                <view class="flex items-center" @click="diyStore.toRedirect(diyComponent.moreStyle.link)" :style="{ color : diyComponent.moreStyle.color,'font-size': (diyComponent.moreStyle.fontSize * 2) + 'rpx'}">
                                    <text> {{ diyComponent.moreStyle.text }}</text>
                                    <text class="text-[22rpx] iconfont iconxiangyoujiantou"></text>
                                </view>
                                
                            </view>
                            
                        </template>
                        <template v-if="diyComponent.moreStyle.way=='member' && memberNum>0">
                            <view class="flex items-center" @click="diyStore.toRedirect(diyComponent.moreStyle.link)" :style="{ color : diyComponent.moreStyle.color,'font-size': (diyComponent.moreStyle.fontSize * 2) + 'rpx'}">
                                <template v-if="memberAvatar.length > 0">
                                    <avatar-swiper :interval="2500" :avatars="memberAvatar" ></avatar-swiper>
                                </template>    
                                <text class="ml-[15rpx]" style="white-space: nowrap;">{{memberNum}}人正在热抢</text>
                                <text class="text-[22rpx] iconfont iconxiangyoujiantou"></text>
                            </view>
                        </template>
                    </view>
                </view>
                <view>
                    <template v-if="diyComponent.goodsStyle.value =='style-3'">
                        <view class="overflow-hidden bg-[#fff] px-[20rpx]" :style="itemCss">
                            <scroll-view :scroll-x="true" class="flex" scroll-with-animation>
                                <view class="w-auto flex rounded-t-[20rpx] py-[20rpx] items-start">
                                    <view v-for="(item,index) in list" :key="index">
                                        <view class="flex flex-col  max-w-[160rpx]  mr-[20rpx]" :style="itemCss" @click="toLink(item)">
                                            <view class="w-[158rpx] h-[158rpx] overflow-hidden"  :style="imageRounded.style" >
                                                <u--image width="158rpx" height="158rpx" :radius="imageRounded.val" :src="img(item.goods_cover_thumb_small ? item.goods_cover_thumb_small : '')" model="aspectFill">
                                                    <template #error>
                                                        <image class=" w-[158rpx] h-[158rpx]" :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 justify-between">
                                                <view class="text-[24rpx] leading-[1.4] using-hidden">{{ item.name }}</view>
                                                <view class="flex items-start justify-between">
                                                    <view class="text-[var(--price-text-color)] flex items-baseline max-w-[150rpx]" :class="{'!text-[var(--primary-color)]':item.discount_status!='active'}">
                                                        <!-- <text class="text-[16rpx] leading-[26rpx] font-500 mr-[4rpx] text-[#FF0000]">秒杀价</text> -->
                                                        <image :src="img('addon/seckill/diy/seckill-hot/decline.png')" class="w-[20rpx] h-[20rpx] mr-[4rpx]"></image>
                                                        <view class="max-w-[130rpx] truncate">
                                                            <text class="text-[16rpx] leading-[26rpx] font-500 mr-[4rpx] price-font">￥</text>
                                                            <text class="text-[28rpx] leading-[40rpx] font-500 price-font">{{ parseFloat(item.defaultSku.seckill_price).toFixed(2).split('.')[0] }}.</text>
                                                            <text class="text-[28rpx] leading-[28rpx] font-500 price-font">{{ parseFloat(item.defaultSku.seckill_price).toFixed(2).split('.')[1] }}</text>
                                                        </view>
                                                      
                                                    </view>
                                                </view>
                                                <!-- <text class="text-[20rpx] line-through mt-[8rpx] text-[#999999] truncate">￥{{item.sku.price}}</text> -->
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </scroll-view>
                        </view>
                    </template>
                    <template v-if="diyComponent.goodsStyle.value =='style-5'">
                        <view class="px-[20rpx]">
                            <scroll-view :scroll-x="true" class="flex" scroll-with-animation>
                                <view class="w-full flex items-start mt-[10rpx]">
                                    <view v-for="(item,index) in list" :key="index">
                                        <view class="flex flex-col max-w-[160rpx]" :class="{'mr-[12rpx]':index < list.length-1}" :style="itemCss" @click="toLink(item)">
                                            <view class="w-[158rpx] h-[158rpx] overflow-hidden"  :style="imageRounded.style" >
                                                <u--image width="158rpx" height="158rpx" :radius="imageRounded.val" :src="img(item.goods_cover_thumb_small ? item.goods_cover_thumb_small : '')" model="aspectFill">
                                                    <template #error>
                                                        <image class=" w-[158rpx] h-[158rpx]" :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 justify-between">
                                                <view class="text-[24rpx] leading-[1.4] using-hidden">{{ item.name }}</view>
                                                <view class="flex items-start justify-between">
                                                    <view class="text-[var(--price-text-color)] flex items-baseline max-w-[150rpx] truncate" :class="{'!text-[var(--primary-color)]':item.discount_status!='active'}">
                                                        <text class="text-[16rpx] leading-[26rpx] font-500 mr-[4rpx] text-[#FF0000]" style="white-space: nowrap;">秒杀价</text>
                                                        <view class="max-w-[130rpx] truncate">
                                                            <text class="text-[16rpx] leading-[26rpx] font-500 mr-[4rpx] price-font">￥</text>
                                                            <text class="text-[28rpx] leading-[40rpx] font-500 price-font">{{ parseFloat(item.defaultSku.seckill_price).toFixed(2).split('.')[0] }}.</text>
                                                            <text class="text-[28rpx] leading-[28rpx] font-500 price-font">{{ parseFloat(item.defaultSku.seckill_price).toFixed(2).split('.')[1] }}</text>
                                                        </view>
                                                        
                                                    </view>
                                                </view>
                                                <!-- <text class="text-[20rpx] line-through mt-[8rpx] text-[#999999] truncate">￥{{item.sku.price}}</text> -->
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </scroll-view>
                        </view>
                    </template>
                    <template v-if="diyComponent.goodsStyle.value =='style-2'">
                        <view class="px-[20rpx]">
                            <scroll-view :scroll-x="true" class="flex" scroll-with-animation>
                                <view class="w-full flex items-start">
                                    <template v-for="(item,index) in list" :key="index">
                                        <view class="p-[16rpx] flex mr-[15rpx] w-auto relative" :style="itemCss" @click="toLink(item)">
                                            <view class="w-[170rpx] h-[170rpx]" :style="imageRounded.style">
                                                <u--image width="170rpx" height="170rpx" :radius="imageRounded.val" :src="img(item.goods_cover_thumb_small ? item.goods_cover_thumb_small : '')" model="aspectFill">
                                                    <template #error>
                                                        <image class="w-[170rpx] h-[170rpx]" :style="imageRounded.style" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill" />
                                                    </template>
                                                </u--image>
                                            </view>
                                            <view v-if="item.seckill_time.status==2" class="bg-[#FF200A] text-[#fff] h-[32rpx] text-[20rpx] absolute top-0 left-0 px-[15rpx] z-[1] flex justify-center items-center" :style="{ borderRadius: `${diyComponent.topElementRounded * 2}rpx 0 ${diyComponent.topElementRounded * 2}rpx 0 `}">
                                                距结束   
                                                <up-count-down class="text-[#fff] text-[20rpx] ml-[10rpx]" :time="item.countdown" format="DD:HH:mm:ss" @change="onChange">
                                                    <view class="flex justify-center items-center h-[32rpx] gap-[6rpx]">
                                                        <view class="text-[20rpx] flex items-center justify-center min-w-[25rpx] h-[25rpx] rounded-[6rpx]">
                                                            <text class="min-w-[25rpx] text-center" v-if="timeData.hours">{{ timeData.hours >= 10 ? timeData.hours : '0' + timeData.hours }}</text>
                                                            <text class="min-w-[25rpx] text-center" v-else>00</text>
                                                        </view>
                                                        <view>:</view>
                                                        <view class="text-[20rpx] flex items-center justify-center min-w-[25rpx] h-[25rpx] rounded-[6rpx]">
                                                            <text class="min-w-[25rpx] text-center">{{ timeData.minutes >= 10 ? timeData.minutes : '0' + timeData.minutes }}</text>
                                                        </view>
                                                        <view>:</view>
                                                        <view class="text-[20rpx] flex items-center justify-center min-w-[25rpx] h-[25rpx] rounded-[6rpx]">
                                                            <text class="min-w-[25rpx] text-center">{{ timeData.seconds < 10 ? '0' + timeData.seconds : timeData.seconds }}</text>
                                                        </view>
                                                    </view>
                                                </up-count-down>
                                            </view>
                                            <view v-if="item.seckill_time.status==1" class="bg-[#00C921] text-[#fff] h-[32rpx] text-[20rpx] absolute top-0 left-0 px-[15rpx] z-[1] flex justify-center items-center" :style="{ borderRadius: `${diyComponent.topElementRounded * 2}rpx 0 ${diyComponent.topElementRounded * 2}rpx 0 `}">
                                                今日{{ item.seckill_time.start_time_format }}开始  
                                            </view>
                                            <view v-if="item.seckill_time.status==0" class="bg-[#E7E7E7] text-[#BBB] h-[32rpx] text-[20rpx] absolute top-0 left-0 px-[15rpx] z-[1] flex justify-center items-center" :style="{ borderRadius: `${diyComponent.topElementRounded * 2}rpx 0 ${diyComponent.topElementRounded * 2}rpx 0 `}">
                                                已结束
                                            </view>

                                            <view class="ml-[20rpx] flex-1 flex flex-col justify-between">
                                                <view>
                                                    <view class="text-[28rpx] leading-[1.4] using-hidden">{{ item.name }}</view>
                                                    <view class="flex items-center mt-[15rpx] 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 class="flex items-center mt-[15rpx]">
                                                        <view class="w-[140rpx]">
                                                            <u-line-progress :percentage="calculateNumPercentage(item)" height="5" :showText="false" activeColor="#FF2222" inactiveColor="#FFCACA">
                                                            </u-line-progress>
                                                        </view>
                                                        <text class="text-[22rpx] leading-[24rpx] ml-[10rpx]  whitespace-nowrap text-[#FF0000]">已抢{{ calculateNumPercentage(item) }}%</text>
                                                    </view>
                                                </view>
                                                
                                                <view class="flex items-end justify-between rounded-[12rpx] mt-[10rpx]  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-[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-[16rpx] whitespace-nowrap ml-[8rpx] mb-[5rpx] bg-[#FFF4F4] border-[1rpx] border-solid border-[#FF9C9C] p-[1rpx] text-[#FF0000] rounded-tr-10rpx rounded-br-10rpx rounded-tl-10rpx">秒杀价</text>
                                                        <!-- <text class="text-[24rpx] line-through ml-[8rpx] text-[#999999] truncate">￥{{item.sku.price}}</text> -->
                                                    </view>
                                                    <view  :style="goodsBtnCss" class="relative px-[20rpx] h-[50rpx] flex items-center ml-[5rpx] justify-center bg-[red]">
                                                        <text class="text-[20rpx]">{{ diyComponent.btnStyle.text }}</text>
                                                    </view>
                                                </view>
                                            </view>
                                        </view>
                                    </template>
                                </view>
                            </scroll-view>
                        </view>
                    </template>
                    <template v-if="diyComponent.goodsStyle.value =='style-1'">
                        <view class="overflow-hidden px-[20rpx]">
                            <scroll-view :scroll-x="true" class="flex " scroll-with-animation>
                                <view class="w-full flex items-start">
                                    <view v-for="(item,index) in list" :key="index">
                                        <view class="p-[10rpx] flex flex-col items-center" :style="itemCss" @click="toLink(item)">
                                            <view class="w-[158rpx] h-[158rpx] overflow-hidden"  :style="imageRounded.style" >
                                                <u--image width="158rpx" height="158rpx" :radius="imageRounded.val" :src="img(item.goods_cover_thumb_small ? item.goods_cover_thumb_small : '')" model="aspectFill">
                                                    <template #error>
                                                        <image class=" w-[158rpx] h-[158rpx]" :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 justify-between items-center">
                                                <view class="flex items-center justify-between h-[34rpx] bg-[#FFF5F4] rounded-[20rpx] relative z-10">
                                                    <view class="text-[var(--price-text-color)] relative z-10 flex items-baseline max-w-[80rpx] px-[20rpx] overflow-hidden mr-[35rpx] truncate" :class="{'!text-[var(--primary-color)]':item.discount_status!='active'}">
                                                        <text class="text-[15rpx] leading-[26rpx] font-500 mr-[4rpx] price-font">￥</text>
                                                        <text class="text-[24rpx] leading-[40rpx] font-500 price-font">{{ parseFloat(item.defaultSku.seckill_price).toFixed(2).split('.')[0] }}.</text>
                                                        <text class="text-[20rpx] leading-[28rpx] font-500 price-font">{{ parseFloat(item.defaultSku.seckill_price).toFixed(2).split('.')[1] }}</text>
                                                    </view>
                                                    <view  class="absolute top-0 right-0 rounded-r-[20rpx] h-full w-[46rpx] flex justify-end items-center text-[#fff] text-[22rpx] font-bold" :style="goodsBtnCss">
                                                        <text class="pr-[10rpx]">
                                                            抢
                                                        </text>
                                                    </view>
                                                    <image :src="img('addon/seckill/diy/seckill-hot/lightning3.png')" class="absolute top-[0rpx] right-[35rpx] w-[21rpx] z-6 h-[34rpx]" mode="" />
                                                </view>
                                                <text class="text-[20rpx] line-through mt-[8rpx] text-[#999999] truncate">￥{{item.defaultSku.price}}</text>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </scroll-view>
                        </view>       
                    </template>
                    <template v-if="diyComponent.goodsStyle.value =='style-4'">
                        <view class="px-[20rpx]">
                            <scroll-view :scroll-x="true" class="flex" scroll-with-animation>
                                <view class="w-full flex items-start">
                                    <view v-for="(item,index) in list" :key="index">
                                        <view class="bg-[#fff] p-[10rpx] flex flex-col items-center" :class="{'mr-[12rpx]':index < list.length-1}" :style="itemCss" @click="toLink(item)">
                                            <view class="w-[138rpx] h-[138rpx] overflow-hidden"  :style="imageRounded.style" >
                                                <u--image width="138rpx" height="138rpx" :radius="imageRounded.val" :src="img(item.goods_cover_thumb_small ? item.goods_cover_thumb_small : '')" model="aspectFill">
                                                    <template #error>
                                                        <image class=" w-[138rpx] h-[138rpx]" :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 justify-between h-[36rpx] relative z-5">
                                                <view class="flex items-start justify-between h-[36rpx]">
                                                    <view class="text-[#fff] flex items-baseline h-[36rpx] truncate rounded-r-[20rpx] px-[10rpx]" :style="{ background: 'linear-gradient(90deg, #FF6827 4%, #FF1E00 100%)' }" :class="{'!text-[var(--primary-color)]':item.discount_status!='active'}">
                                                        <text class="text-[18rpx] !font-400 !text-[#fff] leading-[20rpx] price-font mr-[4rpx]">￥</text>
                                                        <text class="text-[28rpx] !font-400 !text-[#fff] leading-[35rpx] price-font ">{{ parseFloat(item.defaultSku.seckill_price).toFixed(2).split('.')[0] }}.</text>
                                                        <text class="text-[28rpx] !font-400 !text-[#fff] leading-[35rpx] price-font">{{ parseFloat(item.defaultSku.seckill_price).toFixed(2).split('.')[1] }}</text>
                                                    </view>
                                                </view>
                                                <image :src="img('addon/seckill/diy/seckill-hot/lightning2.png')" class="absolute top-[0] left-[-10rpx] w-[20rpx] z-6 h-[36rpx]" mode="" />
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </scroll-view>
                        </view>
                    </template>
                </view>
            </view>
        </view>
<!--    </x-skeleton>-->
</template>

<script setup lang="ts">
// 爆款秒杀组件
import { ref, reactive, computed, watch, onMounted, onUnmounted, nextTick } from 'vue';
import { redirect, img } from '@/utils/common';
import useDiyStore from '@/app/stores/diy';
import {getSeckillDiyGoods ,getSeckillDiyStatGoods} from '@/addon/seckill/api/goods'
import avatarSwiper from '@/components/avatar-swiper/avatar-swiper.vue'

const props = defineProps(['component', 'index', 'value']);
const diyStore = useDiyStore();

const diyComponent = computed(() => {
    if (props.value) {
        return props.value;
    } else if (diyStore.mode == 'decorate') {
        return diyStore.value[props.index];
    } else {
        return props.component;
    }
})

// 骨架屏
const skeleton = reactive({
    type: '',
    loading: diyStore.mode == 'decorate' ? false : true,
    config: {}
})

// 初始化骨架屏
const initSkeleton = () => {
    // 单列 风格
    skeleton.type = 'list'
    skeleton.config = {
        textRows: 2
    };
}

// 组件框架样式
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 goodsBtnCss = computed(() => {
    let style = '';
    if (diyComponent.value.btnStyle.aroundRadius && diyComponent.value.goodsStyle.value !='style-1') 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;
})
const calculateNumPercentage = (item: any) => {
    const num = (item.defaultSku.order_num / item.defaultSku.sum_stock).toFixed(2) * 100 || "0"
    return num
}
const timeData = ref({});
// 定义 onChange 方法
const onChange = (e) => {
    timeData.value = e;
};
const list = ref<Array<Object>>([]);
const loading = ref(true);
const getSeckillTimeGoodsFn = ()=> {
    loading.value = true;
    getSeckillDiyGoods({
        num: diyComponent.value.source == 'all' ? diyComponent.value.num : '',
        time_id: diyComponent.value.source == 'time' ? diyComponent.value.timeIds : '',
        goods_id: diyComponent.value.source == 'custom' ? diyComponent.value.goodsIds : '',
        show_time: diyComponent.value.goodsStyle.value == 'style-2' ? 1 : 0,
    }).then((res: any) => {
        skeleton.loading = false;
        list.value = res.data
        list.value.forEach((item: any) => {
            if (item.seckill_time && item.seckill_time.status == 2) {
                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.seckill_time.end_time - currentTimeSeconds) * 1000;
            }

        })

        // 如果没有数据，整个组件都要隐藏
        if(list.value.length == 0) diyComponent.value.componentIsShow = false

        loading.value = false;
    }).catch((err: any) => {
        skeleton.loading = false;
        loading.value = false;
    })
}

const memberNum = ref(0);
const memberAvatar = ref<string[]>([]);

// 动画触发器
const animationTrigger = ref(0);
let animationTimer: NodeJS.Timeout | null = null;

// 计算显示的头像（最多3个，从右到左叠加）
const displayedAvatars = computed(() => {
    // 确保 memberAvatar.value 是数组
    if (!Array.isArray(memberAvatar.value)) {
        return [];
    }
    return memberAvatar.value.slice(0, 3);
});

// 每秒触发一次动画
const startAnimation = () => {
    if (animationTimer) {
        clearInterval(animationTimer);
    }
    animationTimer = setInterval(() => {
        animationTrigger.value++;
    }, 1000);
};

// 清理动画定时器
const stopAnimation = () => {
    if (animationTimer) {
        clearInterval(animationTimer);
        animationTimer = null;
    }
};

const getSeckillDiyStatGoodsFn = ()=>{
    getSeckillDiyStatGoods({
        num: diyComponent.value.source == 'all'? diyComponent.value.num : '',
        time_id: diyComponent.value.source == 'time' ? diyComponent.value.timeIds : '',
        goods_id: diyComponent.value.source == 'custom' ? diyComponent.value.goodsIds : '',
    }).then((res: any) => {
        memberNum.value = res.data.member_num
        // 将对象格式转换为数组
        if (res.data.headimg && typeof res.data.headimg === 'object' && !Array.isArray(res.data.headimg)) {
            memberAvatar.value = Object.values(res.data.headimg);
        } else if (Array.isArray(res.data.headimg)) {
            memberAvatar.value = res.data.headimg;
        } else {
            memberAvatar.value = [];
        }
    })
}
const toLink = (item: any) => {
    if (diyStore.mode == 'decorate') return;
    redirect({ url: '/addon/seckill/pages/goods/detail', param: { sku_id: item.defaultSku.sku_id,seckill_id: item.seckill_id} })
}
onMounted(() => {
    refresh();
    // 启动动画定时器
    startAnimation();
    // 装修模式下刷新
    if (diyStore.mode == 'decorate') {
        watch(
            () => diyComponent.value,
            (newValue, oldValue) => {
                if (newValue && newValue.componentName == 'SeckillHot') {
                    nextTick(() => {
                    })
                }
            }
        )
    } else {
        watch(
            () => diyComponent.value,
            (newValue, oldValue) => {
                refresh();
            },
            { deep: true }
        )
    }
});

// 组件销毁时清理定时器
onUnmounted(() => {
    stopAnimation();
});

const refresh = () => {
    // 装修模式下设置默认图
    if (diyStore.mode == 'decorate') {
        nextTick(() => {
            let obj = {
                goods_cover_thumb_small:"",
                name:"商品名称",
                defaultSku:{
                    price:"100.00",
                    seckill_price:"9.9",              
                    order_num:"30",
                    sum_stock:'100'
                },
                countdown:100000000,
                seckill_time:{ 
                    end_time:68760,
                    end_time_format:"14:06",
                    id:0,
                    name:"活动名称",
                    status_name:"正在秒杀",
                    status:2,
                    start_time:50760,
                    start_time_format:"11:00"
                },
                status:2,

            };
            let obj1 = {
                goods_cover_thumb_small:"",
                name:"商品名称",
                defaultSku:{
                    price:"100.00",
                    seckill_price:"9.9",
                    order_num:"30",
                    sum_stock:'100'
                },
                countdown:100000000,
                seckill_time:{
                    end_time:68760,
                    end_time_format:"21:06",
                    id:0,
                    name:"活动名称",
                    status_name:"即将开始",
                    status:1,
                    start_time:50760,
                    start_time_format:"19:00"
                },
                status:2,

            };
            list.value.push(obj);
            list.value.push(obj1);
            list.value.push(obj);
            list.value.push(obj);
            memberNum.value = 999;
            memberAvatar.value = ['static/resource/images/diy/shop_default.jpg','static/resource/images/diy/shop_default.jpg','static/resource/images/diy/shop_default.jpg'];
        })
    } else {
        initSkeleton();
        getSeckillTimeGoodsFn()
        if (diyComponent.value.moreStyle.way=='member') {
            getSeckillDiyStatGoodsFn()
        }
    }
}

</script>
<style lang="scss" scoped>
.avatar-group {
  display: flex;
}
.avatar-group > view:not(:first-child) {
  margin-right: -12rpx; /* 控制头像重叠量 */
}
.flex-row-reverse {
  flex-direction: row-reverse; /* 从右往左排列 */
}

/* 头像动画效果 */
.avatar-item {
  animation: slideInFromRight 0.6s ease-out forwards;
  opacity: 0;
  transform: translateX(20rpx);
}

@keyframes slideInFromRight {
  0% {
    opacity: 0;
    transform: translateX(20rpx) scale(0.8);
  }
  50% {
    opacity: 0.8;
    transform: translateX(5rpx) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* 头像悬停效果 */
.avatar-item:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}
</style>
