<template>
    <view :style="styleCss" class="overflow-hidden relative" v-if="diyComponent && diyComponent.skuList && Object.keys(diyComponent.skuList).length">
        <view class="title-style" :style="titleStyle">{{ diyComponent.diyInfo.seckillTitle.text }}</view>
        <view class="flex text-[#fff] mt-[30rpx] items-center flex-col justify-center">
            <template v-if="diyComponent.seckill.status == 0">
                <text class="text-[46rpx] font-bold whitespace-nowrap" :style="{color: diyComponent.diyInfo.countdown.titleColor}">活动未开始</text>
            </template>
            <template v-else-if="diyComponent.seckill.status == 1 && diyComponent.seckill_time.status == 0">
                <text class="text-[46rpx] font-bold whitespace-nowrap" :style="{color: diyComponent.diyInfo.countdown.titleColor}">秒杀结束</text>
            </template>
            <template v-else-if="diyComponent.seckill.status == 1 && discountTime > 0">
                <text class="mb-[15rpx] text-[30rpx] whitespace-nowrap"
                    v-if="diyComponent.seckill_time.status == 1" :style="{color: diyComponent.diyInfo.countdown.titleColor}">距离开抢还剩</text>
                <text class="mb-[15rpx] text-[30rpx] whitespace-nowrap"
                    v-if="diyComponent.seckill_time.status == 2" :style="{color: diyComponent.diyInfo.countdown.titleColor}">活动结束还剩</text>
                <up-count-down class="text-[#fff] text-[24rpx] mt-[14rpx]" :time="discountTime" format="HH:mm:ss"
                    autoStart millisecond @change="onChange">
                    <view class="flex items-center gap-[16rpx] text-[#fff]">
                        <view
                            class="text-[32rpx] flex items-center justify-center min-w-[54rpx] h-[32rpx] rounded-[4rpx] p-[8rpx]" :style="{color: diyComponent.diyInfo.countdown.textColor, 'backgroundColor': diyComponent.diyInfo.countdown.bgColor}">
                            <text class="min-w-[30rpx] text-center font-bold" v-if="timeData.hours && timeData.hours>0">{{ timeData.hours >= 10 ? timeData.hours : '0' + timeData.hours }}</text>
                            <text class="min-w-[30rpx] text-center font-bold" v-else>00</text>
                        </view>
                        <text class="font-bold" :style="{color: diyComponent.diyInfo.countdown.dropColor}">:</text>
                        <view
                            class="text-[32rpx] flex items-center justify-center min-w-[54rpx] h-[32rpx] rounded-[4rpx] p-[8rpx]" :style="{color: diyComponent.diyInfo.countdown.textColor, 'backgroundColor': diyComponent.diyInfo.countdown.bgColor}">
                            <text class="min-w-[30rpx] text-center font-bold" v-if="timeData.minutes && timeData.minutes>0">{{ timeData.minutes >= 10 ? timeData.minutes : '0' + timeData.minutes }}</text>
                            <text class="min-w-[30rpx] text-center font-bold" v-else>00</text>
                        </view>
                        <text class="font-bold" :style="{color: diyComponent.diyInfo.countdown.dropColor}">:</text>
                        <view
                            class="text-[32rpx] flex items-center justify-center min-w-[54rpx] rounded-[4rpx] p-[8rpx]" :style="{color: diyComponent.diyInfo.countdown.textColor, 'backgroundColor': diyComponent.diyInfo.countdown.bgColor}">
                            <text class="min-w-[30rpx] text-center font-bold" v-if="timeData.seconds && timeData.seconds>0">{{ timeData.seconds < 10 ? '0' + timeData.seconds : timeData.seconds }}</text>
                            <text class="min-w-[30rpx] text-center font-bold" v-else>00</text>
                        </view>
                    </view>
                </up-count-down>
            </template>

        </view>

        <view class="seckill-number-info py-[30rpx] px-[24rpx] mt-[50rpx]" :style="{'borderRadius': (diyComponent.diyInfo.seckillInfo.rounded * 2 +'rpx')}">
            <view class="bg-[var(--seckill-bg-color)] relative z-3">
                <view class="border-[0] border-b-[2rpx] border-solid border-[var(--seckill-divider-line-color)] flex items-center justify-between pb-[34rpx] px-[56rpx] mb-[34rpx] pt-[16rpx]" :style="{'borderTopLeftRadius': (diyComponent.diyInfo.seckillInfo.rounded * 2 +'rpx'), 'borderTopRightRadius': (diyComponent.diyInfo.seckillInfo.rounded * 2 +'rpx')}" :class="{'!px-[0] !justify-around': diyComponent.diyInfo.seckillInfo.content.length == 2, '!mb-0 !border-0 !pb-[16rpx]': !buyerData.length}">
                    <view class="flex flex-col items-center justify-center" v-if="diyComponent.diyInfo.seckillInfo.content.indexOf('views') != -1">
                        <text :style="{color: diyComponent.diyInfo.seckillInfo.dataNumColor}" class="text-[#FB240A] font-bold text-[40rpx]">{{ diyComponent.views || 0 }}</text>
                        <text :style="{color: diyComponent.diyInfo.seckillInfo.dataTextColor}" class="text-[#666666] text-[24rpx] mt-[12rpx]">已浏览</text>
                    </view>
                    <view class="flex flex-col items-center justify-center" v-if="diyComponent.diyInfo.seckillInfo.content.indexOf('memberNum') != -1">
                        <text :style="{color: diyComponent.diyInfo.seckillInfo.dataNumColor}" class="text-[#FB240A] font-bold text-[40rpx]">{{ diyComponent.member_num || 0 }}</text>
                        <text :style="{color: diyComponent.diyInfo.seckillInfo.dataTextColor}" class="text-[#666666] text-[24rpx] mt-[12rpx]">已参与</text>
                    </view>
                    <view class="flex flex-col items-center justify-center" v-if="diyComponent.diyInfo.seckillInfo.content.indexOf('orderNum') != -1"> 
                        <text :style="{color: diyComponent.diyInfo.seckillInfo.dataNumColor}" class="text-[#FB240A] font-bold text-[40rpx]">{{ diyComponent.order_num || 0 }}</text>
                        <text :style="{color: diyComponent.diyInfo.seckillInfo.dataTextColor}" class="text-[#666666] text-[24rpx] mt-[12rpx]">成交量</text>
                    </view>
                </view>
                <view class="flex flex-wrap px-[6rpx] gap-x-[34rpx] gap-y-[24rpx]" v-if="buyerData.length">
                    <template v-for="(item,index) in buyerData">
                        <template v-if="buyerData.length > 12 && index < 11 || buyerData.length <= 12">
                            <image v-if="item.headimg" class="w-[80rpx] h-[80rpx]" :style="{'borderRadius': (diyComponent.diyInfo.seckillInfo.imgRounded * 2 +'rpx')}" :src="img(item.headimg)" mode="aspectFill" @error="item.headimg='static/resource/images/default_headimg.png'" />
                            <image v-else class="w-[80rpx] h-[80rpx]" :style="{'borderRadius': (diyComponent.diyInfo.seckillInfo.imgRounded * 2 +'rpx')}" :src="img('static/resource/images/default_headimg.png')" mode="aspectFill" />
                        </template>
                    </template>
                    <text v-if="buyerData.length > 12" class="w-[80rpx] h-[80rpx] bg-[#FFF1F1] text-[red] flex items-center justify-center text-[60rpx] iconfont icona-gengduoV6xx-28" :style="{'borderRadius': (diyComponent.diyInfo.seckillInfo.imgRounded * 2 +'rpx')}"></text>
                </view>
            </view>
        </view>
        <!-- 装修时，防止点击 -->
        <view v-if="diyStore.mode == 'decorate'" class="absolute z-10 top-0 right-0 bottom-0 left-0"></view>
    </view>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted, nextTick } from 'vue';
import { img, timeTurnTimeStamp } from '@/utils/common';
import useDiyStore from '@/app/stores/diy';
import useSeckillGoodsDetailStore from '@/addon/seckill/stores/goodsDetail'
import { getSeckillBuyerInfo } from '@/addon/seckill/api/goods'

const props = defineProps(['component', 'index', 'value', 'global']);
const diyStore = useDiyStore();
const emits = defineEmits(['update:componentIsShow']); //商品数据加载完成之后触发
const discountTime = ref(0)

const timeData = ref({});
// 定义 onChange 方法
const onChange = (e) => {
    timeData.value = e;
};

const diyComponent = computed(() => {
    if (diyStore.mode == 'decorate') {
        const obj = {
            skuList: [{}],
            seckill:{
                status: 0
            },
            views: 100, 
            member_num: 100,
            order_num: 100
        }
        emits('update:componentIsShow', true)
        return Object.assign({}, {diyInfo: diyStore.value[props.index]}, obj);
    } else {
        emits('update:componentIsShow', true)
        return Object.assign({}, { diyInfo: props.component }, useSeckillGoodsDetailStore().goodsDetail);
    }
})

const titleStyle = computed(()=>{
    let style = '';
    if(diyComponent.value.diyInfo.seckillTitle.textColor) style += 'color:' + diyComponent.value.diyInfo.seckillTitle.textColor + ';';
    if(diyComponent.value.diyInfo.seckillTitle.rounded) style += 'border-radius:' + diyComponent.value.diyInfo.seckillTitle.rounded * 2 + 'rpx;';
    if(diyComponent.value.diyInfo.seckillTitle.bgColor) style += 'background-color:' + diyComponent.value.diyInfo.seckillTitle.bgColor + ';';
    return style;
})

const buyerData = ref<any[]>([])
const getBarrageInfo = () => {
    getSeckillBuyerInfo({
        time_id: diyComponent.value.time_id || '',
        goods_id: diyComponent.value.goods_id || '',
        seckill_id: diyComponent.value.seckill_id || '',
        limit: 20
    }).then((res: any) => {
        buyerData.value = []
        if(res.data.data && res.data.data.length){
            buyerData.value = res.data.data.map((item: any) => {
                let obj = {}
                obj.time = item.create_time ? (timeTurnTimeStamp(item.create_time) * 1000) : 0
                obj.nickname = item.member.nickname
                obj.headimg = item.member.headimg
                return obj
            })
        }
    })
}



const initFn = () => {
   // 活动进行中
   if (diyComponent.value.seckill.status == 1) {
        // 场次秒杀中
        if (diyComponent.value.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;
            discountTime.value = (diyComponent.value.seckill_time.end_time - currentTimeSeconds) * 1000;
            // 处理负数情况（如果当前时间已超过结束时间，剩余时间为0）
            if (discountTime.value < 0) {
                discountTime.value = 0;
            }
        } else if (diyComponent.value.seckill_time.status == 1) {
            // 场次即将开始
            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;
            discountTime.value = (diyComponent.value.seckill_time.start_time - currentTimeSeconds) * 1000;
            // 处理负数情况（如果当前时间已超过结束时间，剩余时间为0）
            if (discountTime.value < 0) {
                discountTime.value = 0;
            }
        }
    }
 
}

onMounted(() => {
    refresh()
    // 装修模式下刷新
    if (diyStore.mode == 'decorate') {
        buyerData.value = [
            {
                headimg: '',
                nickname: '',
                time: ''
            },{
                headimg: '',
                nickname: '',
                time: ''
            },{
                headimg: '',
                nickname: '',
                time: ''
            },{
                headimg: '',
                nickname: '',
                time: ''
            },{
                headimg: '',
                nickname: '',
                time: ''
            }
        ];
    } else {
        initFn()
        getBarrageInfo()
    }
});


const refresh = () =>{
    emits('update:componentIsShow', true)
}
const styleCss = computed(() => {
    return {
        '--seckill-bg-color': diyComponent.value.diyInfo.seckillInfo.bgColor,
        '--seckill-divider-line-color': diyComponent.value.diyInfo.dividerLine.color
    }
})
</script>
<style lang="scss" scoped>
.card-template{
    background-color: transparent !important;
    border-radius: 0 !important;
}
.title-style{
    font-size: 46rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    height: 120rpx;
}
.seckill-number-info{
    position: relative;
    background-color: var(--seckill-bg-color);
    &::after{
        content: '';
        position: absolute;
        top: -10rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 640rpx; 
        height: 100rpx;
        background-color: var(--seckill-bg-color);
        opacity: 0.6;
        border-radius: 12rpx;
        z-index: 1;
    }
    &::before{
        content: '';
        position: absolute;
        top: -20rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 500rpx; 
        height: 100rpx;
        background-color: var(--seckill-bg-color);
        opacity: 0.6;
        border-radius: 12rpx;
        z-index: 1;
    }
}
</style>
