<template>
    <view :style="warpCss" class="overflow-hidden relative py-[20rpx] px-[24rpx]" v-if="goodsList.length && !loading">
        <view class="flex items-center justify-between">
            <view class="flex items-center">
                <image class="w-[28rpx] h-[28rpx] mr-[10rpx]" :src="img('/addon/pintuan/diy/immediately_head_01.png')" mode="aspectFit" />
                <text class="text-[26rpx] text-[#E65E00]">发起拼团</text>
            </view>
            <view class="iconfont iconyouV6xx1 text-[#E65E00] !text-[24rpx] mx-[20rpx]"></view>
            <view class="flex items-center">
                <image class="w-[28rpx] h-[28rpx] mr-[10rpx]" :src="img('/addon/pintuan/diy/immediately_head_02.png')" mode="aspectFit" />
                <text class="text-[26rpx] text-[#E65E00]">邀请好友拼单</text>
            </view>
            <view class="iconfont iconyouV6xx1 text-[#E65E00] !text-[24rpx] mx-[20rpx]"></view>
            <view class="flex items-center">
                <image class="w-[28rpx] h-[28rpx] mr-[10rpx]" :src="img('/addon/pintuan/diy/immediately_head_03.png')" mode="aspectFit" />
                <text class="text-[26rpx] text-[#E65E00]">成团发货</text>
            </view>
        </view>

        <view class="p-[20rpx] pt-[8rpx] mt-[26rpx] overflow-hidden" :style="{'backgroundColor': diyComponent.moduleStyle.bgColor, 'borderRadius': (diyComponent.moduleStyle.rounded * 2+'rpx')}">
            <view class="flex justify-between items-center h-[66rpx]">
                <view class="flex items-center">
                    <view class="flex items-center max-w-[180rpx] mr-[10rpx]" v-if="diyComponent.titleImgUrl" @click="diyStore.toRedirect(diyComponent.titleStyle.link)">
                        <image :src="img(diyComponent.titleImgUrl)" class="h-[34rpx] max-w-[100%]" mode="heightFix" />
                    </view>
                    <view @click="diyStore.toRedirect(diyComponent.titleStyle.link)" :style="{ color : diyComponent.titleStyle.textColor, fontWeight : diyComponent.titleStyle.fontWeight,'font-size': (diyComponent.titleStyle.fontSize * 2) + 'rpx','font-style': diyComponent.titleStyle.fontStyle,whiteSpace: 'nowrap'}">
                        {{ diyComponent.titleStyle.text }}
                    </view>
                </view>
                <view class="flex-1 flex justify-end items-center">
                    <view class="flex items-center" @click="diyStore.toRedirect(diyComponent.moreStyle.link)" :style="{ color : diyComponent.moreStyle.textColor,'font-size': (diyComponent.moreStyle.fontSize * 2) + 'rpx'}">
                        <text> {{ diyComponent.moreStyle.text }}</text>
                        <text class="!text-[22rpx] iconfont iconxiangyoujiantou"></text>
                    </view>
                </view>
            </view>
            <scroll-view scroll-x="true" v-if="goodsList.length">
                <view class="whitespace-nowrap flex gap-x-[20rpx]">
                    <view v-for="(item,index) in goodsList" :key="index" class="flex items-center bg-[#FFF8F3] p-[16rpx]" :style="{'backgroundColor': diyComponent.goodsStyle.bgColor, 'borderRadius': (diyComponent.goodsStyle.rounded * 2+'rpx')}" @click="toDetail(item)">
                        <view class="inline-flex flex-col items-center relative mr-[24rpx]">
                            <view class="w-[180rpx] h-[180rpx] overflow-hidden" :style="{'borderRadius': (diyComponent.goodsStyle.imgRounded * 2+'rpx')}">
                                <u--image width="180rpx" height="180rpx" :src="img(item.goods.cover_thumb_mid || '')"  model="aspectFill">
                                    <template #error>
                                        <image class="w-[180rpx] h-[180rpx] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill" />
                                    </template>
                                </u--image>
                            </view>
                            <view class="flex items-baseline mt-[16rpx] w-[180rpx]">
                                <view class="flex items-baseline text-[#ff0000]">
                                    <text class="text-[20rpx] price-font">￥</text>
                                    <text class="text-[28rpx] price-font">{{ parseFloat(item.goods.show_price).toFixed(2) }}</text>
                                </view>
                                <text class="ml-[8rpx] relative top-[-2rpx] text-[#999] text-[20rpx]">热卖中</text>
                            </view>
                        </view>
                        <view class="flex flex-col items-center">
                            <view class="h-[158rpx] flex flex-col items-center justify-center">
                                <view class="mb-[6rpx] text-[22rpx] text-[#666]">
                                    {{ pintuanStatusName(item)  }}
                                </view>
                                <view v-if="diyStore.mode == 'decorate'">12:00:00</view>
                                <up-count-down :key="index" v-else-if="item.process_group" class="text-[24rpx] mt-[14rpx]" :time="countDownFn(item)" format="HH:mm:ss"
                                    autoStart @change="onChange(index, $event)">
                                    <view class="flex items-center gap-[2rpx] text-[#ff0000]">
                                        <view class="text-[26rpx] min-w-[32rpx] text-center">
                                            <text v-if="timeData[index]?.hours">{{ timeData[index].hours >= 10 ? timeData[index].hours : '0' + timeData[index].hours }}</text>
                                            <text v-else>00</text>
                                        </view>
                                           <!--  #ifdef H5 -->
                                           <text class="text-[26rpx] mb-[3rpx]">:</text>
                                            <!--  #endif -->
                                            <!--  #ifndef  H5 -->
                                            <text class="text-[26rpx] mb-[6rpx]">:</text>
                                            <!--  #endif -->

                                        <view class="text-[26rpx] min-w-[32rpx] text-center">
                                            <text v-if="timeData[index]?.minutes">{{ timeData[index].minutes >= 10 ? timeData[index].minutes : '0' + timeData[index].minutes }}</text>
                                            <text v-else>00</text>
                                        </view>
                                            <!--  #ifdef H5 -->
                                            <text class="text-[26rpx] mb-[3rpx]">:</text>
                                            <!--  #endif -->
                                            <!--  #ifndef  H5 -->
                                            <text class="text-[26rpx] mb-[6rpx]">:</text>
                                            <!--  #endif -->
                                        <view class="text-[26rpx] min-w-[32rpx] text-center">
                                            <text v-if="timeData[index]?.seconds">{{ timeData[index].seconds < 10 ? '0' + timeData[index].seconds : timeData[index].seconds }}</text>
                                            <text v-else>00</text>
                                        </view>
                                    </view>
                                </up-count-down>
                                <view v-else class="opacity-0 text-[26rpx]">占位</view>
                                <view class="flex mt-[16rpx] mb-[20rpx]">
                                    <template v-for="(memberItem, memberIndex) in item?.process_group?.member_list" :key="memberIndex">
                                        <template v-if="memberIndex < 2">
                                            <image v-if="memberItem.member.headimg" class="w-[56rpx] h-[56rpx] rounded-[50rpx] border-[2rpx] border-solid border-[red] -mr-[20rpx]" :src="img(memberItem.member.headimg)" mode="aspectFit" @error="memberItem.member.headimg = 'static/resource/images/default_headimg.png'" />
                                            <image v-else class="w-[56rpx] h-[56rpx] rounded-[50rpx] border-[2rpx] border-solid border-[red] -mr-[20rpx]" :src="img('static/resource/images/default_headimg.png')" mode="aspectFit" />
                                        </template>
                                    </template>
                                    <view class="relative z-1 bg-[#fff] w-[56rpx] h-[56rpx] rounded-[50rpx] flex items-center justify-center iconfont iconwenhao border-[2rpx] border-solid text-[#CCCCCC] border-[#CCCCCC]"></view>
                                </view>
                            </view>
                            <view v-if="item.process_group && !countDownFn(item)" class="mt-[auto] flex items-center py-[10rpx] !text-[24rpx] px-[18rpx] !bg-[#ccc] !text-[#fff]" :style="btnStyle">
                                拼团结束
                            </view>
                            <view v-else class="mt-[auto] flex items-center py-[10rpx] !text-[24rpx] px-[18rpx]" :style="btnStyle">{{ pintuanBtnName(item) }}</view>
                        </view>
                    </view>
                </view>
            </scroll-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, reactive, computed, watch, onMounted, nextTick } from 'vue';
import { redirect, img } from '@/utils/common';
import useDiyStore from '@/app/stores/diy';
import { getPintuanComponentsGoods } from '@/addon/pintuan/api/pintuan';
import usePintuanIndexStore from '@/addon/pintuan/stores/index';

const props = defineProps(['component', 'index', 'value']);
const diyStore = useDiyStore();
const goodsList = ref([]) // 商品列表
const pintuanIndexStore = usePintuanIndexStore()

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


// 组件框架样式
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 timeData = ref([])
// 定义 onChange 方法
const onChange = (index, event) => {
    timeData.value[index] = event
}

const countDownFn = (data: any)=>{
    let num = data.process_group.diff_seconds ? data.process_group.diff_seconds * 1000 : 0;
    return num
}

const loading = ref(false)
const refreshGoodsList = () => {
    loading.value = true
    let data = {
        num: diyComponent.value.goodsStyle.source == 'all' ? diyComponent.value.goodsStyle.num : '',
        pintuan_ids: diyComponent.value.goodsStyle.source == 'custom' ? diyComponent.value.goodsStyle.pintuanIds : '',
        has_join: 1
    }
    getPintuanComponentsGoods(data).then((res) => {
        goodsList.value = res.data
        setTimeout(() => {
            pintuanIndexStore.setPintuanComponentsLoad('pintuanImmediately')
        }, 100);
        loading.value = false
    });
}

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

const pintuanStatusName = (data)=>{

    let name = '';
    if(data?.process_group && data?.status == 'process'){
        if(countDownFn(data)){
            name = '即将结束'
        }else{
            name = '已结束' +countDownFn(data)
        }
    }else if(!data?.process_group && data?.status == 'process'){
        name = '进行中'
    }else if(data?.status == 'wait'){
        name = '未开始'
    }
    return name
}
const pintuanBtnName = (data)=>{
    let name = '';
    if(data?.process_group && data?.status == 'process'){
        name = (data.is_me==1 || data.is_join==1)? '查看' : ((data.target_num - data.process_group.current_num) == 1 ? diyComponent.value.btnStyle.text : '参与拼团')
    }else if(!data?.process_group && data?.status == 'process'){
        name = '我要开团'
    }else if(data?.status == 'wait'){
        name = '原价购买'
    }
    return name
}


onMounted(() => {
    refresh();
    // 装修模式下刷新
    if (diyStore.mode == 'decorate') {
        goodsList.value = [
            {
                goods: {
                    cover_thumb_mid: '',
                    show_price: 100
                },
                process_group: {
                    member_list: [
                        { member: { headimg: '' } }
                    ]
                },
                status: 'process'
            },{
                goods: {
                    cover_thumb_mid: '',
                    show_price: 100
                },
                process_group: {
                    member_list: [
                        { member: { headimg: '' } }
                    ]
                },
                status: 'process'
            }
        ]
    } else {
        refreshGoodsList()
    }
});

const refresh = () => {

}

const toDetail = (item: any) => {
    if (diyStore.mode == 'decorate' || item.process_group && !countDownFn(item)) return;
    if(item?.process_group && item?.status == 'process'){
        uni.navigateTo({
            url: '/addon/pintuan/pages/goods/detail?pintuan_id=' + item.id+'&group_id='+item.process_group.id+'&channel=index'
        })
    }else{
        uni.navigateTo({
            url: '/addon/pintuan/pages/goods/detail?pintuan_id=' + item.id
        })
    }
}

</script>
<style lang="scss" scoped></style>
