<template>
    <view :style="themeColor()" class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden" v-if="!loading">
        <view v-if="!loading">
            <view class="min-h-[540rpx] overflow-hidden"
                :style="pt_stare == 'process' || pt_stare == 'success' ? 'background: url(' + img('addon/pintuan/bannerr_det_top.png') + ') no-repeat center center;background-size: 100% 100%;' : 'background: url(' + img('addon/pintuan/bannerr_det_top_sb.png') + ') no-repeat center center;background-size: 100% 100%;'">
                <!-- #ifdef MP-WEIXIN -->
                <top-tabbar :data="topTabbarData" :scrollBool="topTabarObj.getScrollBool()" />
                <!-- #endif -->
                <!--  #ifdef  H5 -->
                <view class="font-fz text-[#fff] text-[40rpx] text-center mt-[100rpx] leading-[normal]">
                    <image class="h-[42rpx]" :src="img('addon/pintuan/success.png')" alt="" v-if="pt_stare == 'success'" mode="heightFix" />
                    <image class="h-[42rpx]" :src="img('addon/pintuan/failed.png')" alt="" v-else-if="pt_stare == 'failed'" mode="heightFix" />
                    <image class="h-[42rpx]" :src="img('addon/pintuan/process.png')" alt="" v-else-if="pt_stare == 'process'" mode="heightFix" />
                </view>
                <!--  #endif -->
                    <!--  #ifndef  H5 -->
                    <view class="font-fz text-[#fff] text-[40rpx] text-center mt-[15rpx] leading-[normal]"> 
                    <image class="h-[42rpx]" :src="img('addon/pintuan/success.png')" alt="" v-if="pt_stare == 'success'" mode="heightFix" />
                    <image class="h-[42rpx]" :src="img('addon/pintuan/failed.png')" alt="" v-else-if="pt_stare == 'failed'" mode="heightFix" />
                    <image class="h-[42rpx]" :src="img('addon/pintuan/process.png')" alt="" v-else-if="pt_stare == 'process'" mode="heightFix" />
                    </view>
                    <!--  #endif -->
            
            </view>
            <!--  #ifdef  H5 -->
            <view class="sidebar-margin mt-[-336rpx] card-template flex" @click="goodsEvent(detail)">
            <!--  #endif -->
            <!--  #ifndef  H5 -->
            <view class="sidebar-margin mt-[-284rpx] card-template flex" @click="goodsEvent(detail)">
            <!--  #endif -->
                    <u--image class="overflow-hidden" radius="var(--goods-rounded-big)" width="180rpx" height="180rpx" :src="img(detail.goods_info?.cover_thumb_small ? detail.goods_info?.cover_thumb_small : '')" model="aspectFill">
                        <template #error>
                            <image class="w-[180rpx] h-[180rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"/>
                        </template>
                    </u--image>
                    <view class="ml-[34rpx] flex flex-1 flex-col justify-between">
                        <view>
                            <view class="using-hidden text-[28rppx] text-[#333333]">
                                {{ detail.goods_info?.title }}</view>
                            <view
                                class="mt-[15rpx] inline-flex items-center border border-[#FF000D] border-width-[1px] border-solid rounded-[10rpx] relative bg-[#FFF1F1] ">
                                <view
                                    class="w-[46rpx] h-[36rpx] bgjnb text-[#FFFFFF] flex items-center justify-center absolute left-[-1rpx]">
                                    <image :src="img('addon/pintuan/ping.png')" mode="scaleToFill"
                                        class="w-[24rpx] h-[24rpx]" />
                                </view>
                                <view class="text-[#FF000D] text-[22rpx] h-[34rpx] leading-[normal] flex items-center ml-[36rpx] px-[10rpx]">
                                    需{{ detail.group_info?.target_num }}人成团
                                </view>
                            </view>
                        </view>
                        
                        <view class="flex items-end">
                            <view class="flex items-end">
                                <text class="text-[#FF000D] text-[24rpx]">团购价</text>
                                <text class="ml-[4rpx] price-font text-[#FF000D] text-[24rpx]">¥</text>
                                <text class="text-[40rpx] price-font text-[#FF000D]">{{ parseFloat(detail.goods_info?.pintuan_price).toFixed(2).split('.')[0] }}</text>
                                <text class="text-[24rpx] price-font text-[#FF000D]">.{{ parseFloat(detail.goods_info?.pintuan_price).toFixed(2).split('.')[1] }}</text>
                            </view>
                            <view class="flex items-end price-font text-[24rpx] text-[#999999] line-through ml-[6rpx]">
                                <text>¥</text>
                                <text>{{ parseFloat(detail.goods_info?.original_price).toFixed(2).split('.')[0] }}</text>
                                <text>.{{ parseFloat(detail.goods_info?.original_price).toFixed(2).split('.')[1] }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            <view
                class="sidebar-margin mt-[var(--top-m)] card-template">
                <!-- 拼团中 -->
                <view v-if="pt_stare == 'process'">
                    <view class="text-[#333333] text-[32rpx] text-center mt-[10rpx] leading-[normal]">再邀请 <text
                            class="text-[#FF000D] text-[36rpx] mx-[10rpx]">{{ detail.group_info.target_num-detail.group_info.current_num }}</text> 人即可拼团成功</view>
                    <view class="text-[#333333] text-[26rpx] flex items-center justify-center mt-[30rpx]">
                    <view class="mr-[10rpx]">拼团剩余时间</view>
                        <view>
                            <!-- 自定义倒计时组件 -->
                            <view class="flex items-center text-[#FF000D] text-[26rpx] flex-1">
                                <view v-if="getTimeData(detail).days > 0" class="text-[26rpx] flex items-center justify-center min-w-[32rpx] h-[32rpx] rounded-[6rpx] bg-[#FFF0F1] text-[#FF000D] p-[2rpx]">
                                    <text class="text-center">{{ getTimeData(detail).days }}</text>
                                </view>
                                <text v-if="getTimeData(detail).days > 0" class="mx-[5rpx]">天</text>
                                <view class="text-[26rpx] flex items-center justify-center min-w-[32rpx] h-[32rpx] rounded-[6rpx] bg-[#FFF0F1] text-[#FF000D] p-[2rpx]">
                                    <text class="text-center">{{ formatTime(getTimeData(detail).hours) }}</text>
                                </view>
                                <text class="mx-[5rpx]">:</text>
                                <view class="text-[26rpx] flex items-center justify-center min-w-[32rpx] h-[32rpx] rounded-[6rpx] bg-[#FFF0F1] text-[#FF000D] p-[2rpx]">
                                    <text class="text-center">{{ formatTime(getTimeData(detail).minutes) }}</text>
                                </view>
                                <text class="mx-[5rpx]">:</text>
                                <view class="text-[26rpx] flex items-center justify-center min-w-[32rpx] h-[32rpx] rounded-[6rpx] bg-[#FFF0F1] text-[#FF000D] p-[2rpx]">
                                    <text class="text-center">{{ formatTime(getTimeData(detail).seconds) }}</text>
                                </view>
                            </view>
                            <!-- <up-count-down class="text-[#FF000D] text-[24rpx] " :time="discountTimeFn(detail)" format="DD:HH:mm:ss"
                                autoStart @change="onChange"  @finish="handleCountdownFinish" >
                                <view class="flex gap-[6rpx] text-[#FF000D]">
                                    <view v-if="timeData.days > 0"
                                        class="text-[24rpx] flex items-center justify-center min-w-[30rpx] h-[32rpx] rounded-[6rpx] bg-[#FFF0F1] text-[#FF000D] px-[2rpx]">
                                        <text class="min-w-[30rpx] text-center">{{ timeData.days >= 10 ? timeData.days :
                                            '0' + timeData.days }}</text>
                                    </view>
                                    <text v-if="timeData.days > 0" class="leading-[normal]">天</text>
                                    <view
                                        class="text-[24rpx] flex items-center justify-center min-w-[30rpx] h-[32rpx] rounded-[6rpx] bg-[#FFF0F1] text-[#FF000D] px-[2rpx]">
                                        <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>
                                    <text>:</text>
                                    <view
                                        class="text-[24rpx] flex items-center justify-center min-w-[30rpx] h-[32rpx] rounded-[6rpx] bg-[#FFF0F1] text-[#FF000D] px-[2rpx]">
                                        <text class="min-w-[30rpx] text-center">{{ timeData.minutes >= 10 ? timeData.minutes :
                                            '0' + timeData.minutes }}</text>
                                    </view>
                                    <text>:</text>
                                    <view
                                        class="text-[24rpx] flex items-center justify-center min-w-[30rpx] h-[32rpx] rounded-[6rpx] bg-[#FFF0F1] text-[#FF000D] px-[2rpx]">
                                        <text class="min-w-[30rpx] text-center">{{ timeData.seconds < 10 ? '0' +
                                                timeData.seconds : timeData.seconds }}</text>
                                    </view>
                                </view>
                            </up-count-down> -->
                        </view>
                    
                    
                    </view>
                </view>

                <!-- 拼团成功 -->
                <view v-if="pt_stare == 'success'" class="flex flex-col items-center justify-center">
                    <view class="text-[#333333] text-[32rpx] text-center mt-[10rpx] leading-[normal]">已有 <text
                            class="text-[#FF000D] text-[36rpx] mx-[10rpx]">{{ detail.group_info.current_num }}</text> 人参团</view>
                    <view class="text-[26rpx] text-[#999999] text-center mt-[30rpx]">拼团成功后，1-3天商家发货</view>
                </view>
                <!-- 拼团失败 -->
                <view v-if="pt_stare == 'failed'">
                    <view class="text-[#333333] text-[32rpx] text-center mt-[10rpx] leading-[normal]"> 拼团失败</view>
                    <view class="text-[26rpx] text-[#999999] text-center mt-[30rpx]">已自动为您退款，预计3个工作日内到账</view>
                </view>
                <view class="mx-[20rpx] mt-[60rpx] flex flex-wrap items-center justify-center">
                    <view
                        class="relative w-[88rpx] h-[88rpx] bg-[#F6F6F6] rounded-[50%] border-width-[1px] flex items-center justify-center text-[#999999] text-[40rpx]  mx-[15rpx] my-[15rpx]"
                        v-for="item in memberList"
                        :class="item.role == 'leader' ? '!border-primary !border-solid' :item.role != 'leader' &&item.member?.member_id== userInfo?.member_id ? '!border-[#333] !border-solid' : item.status != 'inactive' ? '!border-[#999] !border-solid' :  'border-dashed '">
                        <u--image  v-if="item.status != 'inactive'"  width="88rpx" height="88rpx" :radius="'50%'" :src="img(item.member.headimg)" model="aspectFill">
                            <template #error>
                                  <!--  #ifdef  H5 -->
                                  <image class="rounded-full overflow-hidden w-[88rpx] h-[88rpx]" :src="img('static/resource/images/default_headimg.png')" mode="aspectFill" />
                                   <!--  #endif -->
                                <!--  #ifndef  H5 -->
                                <image class="rounded-full overflow-hidden w-[88rpx] h-[88rpx] mt-[8rpx]" :src="img('static/resource/images/default_headimg.png')" mode="aspectFill" />
                                <!--  #endif -->
                              
                            </template>
                        </u--image>
                        <!-- 空位 -->
                        <text v-else-if="!item.isMore" class="iconfont iconVector-3 text-[#999999] text-[31rpx]"></text>
                        <!-- 更多 -->
                        <text v-else  class="text-[#999999] text-[24rpx]">...</text>
                        <view
                            class="w-[70rpx] h-[28rpx] rounded-[16rpx]  text-[#fff] text-[20rpx] text-center leading-[28rpx] absolute bottom-[-10rpx] lef-[9rpx] primary-btn-bg"
                            v-if="item.role == 'leader'">团长</view>
                        <view
                            class="w-[70rpx] h-[28rpx] rounded-[16rpx]  text-[#fff] text-[20rpx] text-center leading-[28rpx] absolute bottom-[-10rpx] lef-[9rpx] bg-[#333]"
                            v-if="item.role != 'leader' &&item.member?.member_id== userInfo?.member_id">我</view>
                    </view>

                </view>
                <view @click="openShareFn" v-if="pt_stare == 'process'"
                    class="mt-[70rpx] w-[600rpx] h-[80rpx] mx-[auto] primary-btn-bg rounded-[40rpx] text-[28rpx] text-[#fff] text-center leading-[80rpx]">
                    邀请好友参团</view>
                <view @click="toBuy(0)" v-if="pt_stare == 'failed'"  
                    class="mt-[70rpx] w-[600rpx] h-[80rpx] mx-[auto] primary-btn-bg rounded-[40rpx] text-[28rpx] text-[#fff] text-center leading-[80rpx]">
                    再次开团</view>
                <view v-if="pt_stare != 'success'" @click="toBuy(1)"
                    class="mt-[30rpx] text-center text-[#FF000D] text-[28rpx] border border-[#EF000C] border-width-[1px] border-solid w-[600rpx] h-[80rpx] mx-[auto] leading-[80rpx] rounded-[40rpx]">
                    没人拼单？单独购买</view>
                <view v-if="pt_stare != 'success'" class="text-[#999999] text-[24rpx] text-center mt-[40rpx] flex   justify-center" @click="toLink(detail)">查看订单 <text
                        class="iconfont iconyouV6xx text-[20rpx] ml-[10rpx]"></text> </view>
            </view>
            <view v-if="pt_stare == 'process'"
            class="sidebar-margin mt-[var(--top-m)] card-template">
                <view class="flex items-center justify-between ">
                    <view class="text-[#333333] text-[30rpx]">拼团玩法</view>
                    <view class="text-[#999999] text-[24rpx]" v-if="config.pintuan_brief" @click="pintuanPopup=true">详细规则 <text
                            class="iconfont iconyouV6xx text-[24rpx] ml-[10rpx]"></text></view>
                </view>
                <view class="flex items-center justify-between mt-[30rpx]">
                    <!-- 开团/参团 -->
                    <view class="flex flex-col items-center flex-1">
                        <view class="relative w-[80rpx] h-[80rpx]  flex items-center justify-center mb-[10rpx]">
                            <image :src="img('addon/pintuan/tg.png')" mode="scaleToFill" class="w-[40rpx] h-[40rpx]" />

                        </view>
                        <text class="text-[#333333] text-[24rpx]">开团/参团</text>
                    </view>

                    <!-- 箭头 -->
                    <view class="flex items-center justify-center w-[60rpx]">
                        <text class="iconfont iconyouV6xx1 text-[#CCCCCC] text-[24rpx]"></text>
                    </view>

                    <!-- 邀请好友参团 -->
                    <view class="flex flex-col items-center flex-1">
                        <view class="w-[80rpx] h-[80rpx]  flex items-center justify-center mb-[10rpx]">
                            <image :src="img('addon/pintuan/wd.png')" mode="scaleToFill" class="w-[40rpx] h-[40rpx]" />
                        </view>
                        <text class="text-[#333333] text-[24rpx]">邀请好友参团</text>
                    </view>

                    <!-- 箭头 -->
                    <view class="flex items-center justify-center w-[60rpx]">
                        <text class="iconfont iconyouV6xx1 text-[#CCCCCC] text-[24rpx]"></text>
                    </view>

                    <!-- 成团发货 -->
                    <view class="flex flex-col items-center flex-1">
                        <view class="w-[80rpx] h-[80rpx]  flex items-center justify-center mb-[10rpx]">
                            <image :src="img('addon/pintuan/dsh.png')" mode="scaleToFill" class="w-[40rpx] h-[40rpx]" />
                        </view>
                        <text class="text-[#333333] text-[24rpx]">成团发货</text>
                    </view>
                </view>
            </view>
            <view class="sidebar-margin mt-[var(--top-m)] card-template">
                <!-- 订单信息标题 -->
                <view class="flex items-center justify-between border-b border-[#F5F5F5]">
                    <view class="text-[#333333] text-[30rpx] font-medium">订单信息</view>
                    <view class="flex items-center text-[#999999] text-[24rpx]" @click="toLink(detail)">
                        <text>详细</text>
                        <text class="iconfont iconyouV6xx text-[20rpx] ml-[8rpx]"></text>
                    </view>
                </view>

                <!-- 商品信息 -->
                <view class="flex px-[30rpx] py-[30rpx] border-b border-[#F5F5F5]" @click="goodsEvent(detail)">
                    <u--image class="overflow-hidden" radius="var(--goods-rounded-big)" width="150rpx" height="150rpx" :src="img(detail.order_detail?.sku_snapshot.goods.cover_thumb_small ? detail.goods_info?.cover_thumb_small : '')" model="aspectFill">
                        <template #error>
                            <image class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"/>
                        </template>
                    </u--image>
                    <view class="flex-1 ml-[20rpx] flex flex-col justify-between">
                        <view class="flex items-center">
                            <view class="text-[#333333] text-[28rpx] leading-[40rpx] w-[332rpx] single-line">
                                {{ detail.order_detail?.sku_snapshot.goods.title }}</view>
                                <view class="leading-[1] text-[#333] ml-auto">
                                    <text class="text-[22rpx] leading-[26rpx] price-font">￥</text>
                                    <text class="text-[36rpx] font-500 leading-[40rpx] price-font">{{ parseFloat(detail.order_detail?.sku_snapshot.sku_price).toFixed(2).split('.')[0] }}</text>
                                    <text class="text-[22rpx] font-500 leading-[28rpx] price-font">.{{ parseFloat(detail.order_detail?.sku_snapshot.sku_price).toFixed(2).split('.')[1] }}</text>
                                </view>
                        </view>
                        <view class="flex items-center">
                            <view class="text-[#333] text-[24rpx] mb-[7rpx]">{{ detail.order_detail?.sku_snapshot.sku_name }}</view>
                            <text class="text-[#333] text-[24rpx] ml-[auto]">×{{ detail.order_detail?.num }}</text>

                        </view>
                        <view class="flex items-center justify-between">
                            <!-- <view
                                class=" h-[34rpx] border-[1px] border-[#FF000D] border-solid rounded-[6rpx] flex items-center">
                                <view
                                    class="w-[72rpx] bg-[#FFEAEA] text-[#FF000D] text-[22rpx] rounded-l-[6rpx] h-[34rpx] leading-[34rpx] text-center">
                                    {{detail.group_info?.target_num}}人团
                                </view>
                                <view class="flex-1 text-[#FF000D] px-[10rpx] text-[22rpx] text-center leading-[normal]">已拼{{detail.goods_info?.success_group_num}}份</view>
                            </view> -->
                            <view
                                class="self-start overflow-hidden h-[30rpx] border-[1px] border-[#FF9A9F] border-solid rounded-[4rpx] flex leading-[normal]">
                                <view class="bg-[#FFF2F2] text-[#FF000D] text-[20rpx] h-[30rpx] leading-[30rpx] rounded-r-0 px-[8rpx] text-center"> {{detail.group_info?.target_num}}人团</view>
                                <view class="text-[#FF000D] text-[20rpx] text-center leading-[30rpx] px-[10rpx]">已拼{{detail.goods_info?.success_group_num}}份</view>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 订单详情 -->
                <view class="px-[20rpx] bg-[#F8F8F8] rounded-[24rpx] overflow-hidden ">
                    <!-- 订单编号 -->
                    <view class="flex items-center justify-between py-[25rpx] border-b border-[#F5F5F5] mt-[20rpx]">
                        <view class="text-[#333] text-[26rpx]">订单编号</view>
                        <view class="flex items-center text-[26rpx]">
                            <text>{{ detail.order_detail?.order_no }}</text>
                            <text class="w-[2rpx] h-[20rpx] bg-[#999] mx-[10rpx]"></text>
                            <text class="text-primary" @click="copy(detail.order_detail?.order_no)">复制</text>
                        </view>
                    </view>
                    <view class="flex items-center justify-between py-[25rpx] border-b border-[#F5F5F5]">
                        <view class="text-[#333333] text-[26rpx]">支付流水号</view>
                        <view class="text-[#333333] text-[26rpx]">{{ detail.order_detail?.out_trade_no }}</view>
                    </view>

                    <!-- 下单时间 -->
                    <view class="flex items-center justify-between py-[25rpx] border-b border-[#F5F5F5]">
                        <view class="text-[#333333] text-[26rpx]">下单时间</view>
                        <view class="text-[#333333] text-[26rpx]">{{ detail.order_detail?.create_time }}</view>
                    </view>

                    <!-- 支付方式 -->
                    <view class="flex items-center justify-between py-[25rpx] border-b border-[#F5F5F5]">
                        <view class="text-[#333333] text-[26rpx]">支付方式</view>
                        <view class="text-[#333333] text-[26rpx]">{{ detail.order_detail?.pay.type_name }}</view>
                    </view>
                </view>
            </view>
            <view @touchmove.prevent.stop>
                <u-popup :show="pintuanPopup" @open="onPopupOpen" @close="closeFn" mode="center" round="var(--rounded-big)" catchtouchmove="true" @touchmove.prevent.stop >
                    <view class="w-[570rpx] px-[32rpx] popup-common center"  @touchmove.stop.prevent>
                        <view class="title">拼团规则</view>
                        <scroll-view :scroll-y="true" class="px-[30rpx] box-border max-h-[400rpx]">
                            <view class="text-[28rpx] leading-[40rpx] mb-[20rpx]">{{ config.pintuan_brief }}</view>
                        </scroll-view>
                        <view class="btn-wrap !pt-[40rpx]">
                            <button
                                class="primary-btn-bg w-[480rpx] h-[70rpx] text-[26rpx] leading-[70rpx] rounded-[35rpx] !text-[#fff] font-500"
                                @click="closeFn">我知道了</button>
                        </view>
                    </view>
                </u-popup>
            </view>
        </view>
       
        <loading-page :loading="loading"></loading-page>
        <share-poster ref="sharePosterRef" posterType="pintuan_goods" :posterId="detail.order_detail?.pintuan_snapshot?.poster_id" :posterParam="posterParam" :copyUrl="copyUrl" :copyUrlParam="copyUrlParam" />
    </view>
</template>
<script setup lang="ts">
import { reactive, toRefs, ref ,computed ,nextTick,onMounted,onUnmounted} from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import {
	img,
    copy,
    redirect,
	goback,
    currRoute,
    timeTurnTimeStampTwo
} from "@/utils/common";
import { topTabar } from '@/utils/topTabbar';
import useMemberStore from '@/stores/member'
import {  getPintuanMyListDetail  } from '@/addon/pintuan/api/order';
import { getPintuanConfig} from '@/addon/pintuan/api/pintuan';
import { useShare }from '@/hooks/useShare'

/********* 自定义头部 - start ***********/
const topTabarObj = topTabar()
let topTabbarData = topTabarObj.setTopTabbarParam({ title: '拼团详情' })
/********* 自定义头部 - end ***********/
const loading = ref<boolean>(true);
// 分享
const{setShare} = useShare()
// 会员信息
const memberStore = useMemberStore()
const userInfo = computed(() => memberStore.info)
const state = reactive({
    pt_stare: 1 // 0:拼团中 1:成功 2:失败
})

const orderNo = ref<string>('');
const detail: any = ref<Object>({});
onLoad((option: any) => {
    if (option.order_no) {
        orderNo.value = option.order_no;
        orderDetailFn(orderNo.value);
    } else {
        let parameter = {
            url: '/addon/pintuan/pages/my_spell',
            title: '缺少订单号'
        };
        goback(parameter)
    }
});
// 获取秒杀配置信息
const config = ref<any>({})
const getPintuanConfigFn = () => {
    getPintuanConfig().then((res: any) => {
        config.value = res.data
    })
}
getPintuanConfigFn()
const pintuanPopup = ref(false)
const closeFn = () => {
    pintuanPopup.value = false
     // #ifdef H5
     document.body.style.overflow = ''
    // #endif
}
const onPopupOpen = () => {
    // H5 禁止滚动
    // #ifdef H5
    document.body.style.overflow = 'hidden'
    // #endif
}

const memberList = computed(() => {
    const members = detail.value?.group_info?.member_list || [];
    const targetNum = detail.value?.group_info?.target_num || 0;

    // 计算需要补充的空位
    const needAdd = Math.max(0, targetNum - members.length);
    const emptyMembers = Array.from({ length: needAdd }, () => ({
        isEmpty: true,
        role: '',
        status: detail.value?.group_info?.status=='success'?'success':'inactive',
        member: { member_id: 0, headimg: '' }
    }));

    // 合并真实数据和空数据
    let fullList = [...members, ...emptyMembers];

    // 如果超过 5 个，则裁切并加 "更多" 占位
    if (fullList.length > 5) {
        fullList = fullList.slice(0, 4); // 前 4 个
        fullList.push({
            isMore: true, // 标记是“更多”按钮
            role: '',
            status: 'inactive',
            member: { member_id: 0, headimg: '' }
        });
    }

    return fullList;
});

const { pt_stare } = toRefs(state);
const currentTime = ref(Date.now()); // 当前时间戳，用于触发响应式更新
const isAnimating = ref(false); // 添加动画状态标识
let countdownTimer: any = null; // 倒计时定时器

const startCountdown = () => {
    if (countdownTimer) {
        clearInterval(countdownTimer);
    }
    
    countdownTimer = setInterval(() => {
        if (!isAnimating.value) {
            currentTime.value = Date.now();
            
            // 计算当前倒计时状态
            const timeData = getTimeData(detail.value);
            
            // 检查是否所有时间都为0（倒计时结束）
            if (timeData.days === 0 && 
                timeData.hours === 0 && 
                timeData.minutes === 0 && 
                timeData.seconds === 0) {
                // 清除定时器，避免重复触发结束逻辑
                clearInterval(countdownTimer);
                countdownTimer = null;
                
                // 执行结束后的重新请求
                handleCountdownFinish();
            }
        }
    }, 1000);
};
// 格式化时间显示（补零）
const formatTime = (time: number): string => {
    return time < 10 ? `0${time}` : `${time}`;
};

// 获取倒计时数据
const getTimeData = (detail: any) => {
    if (!detail?.group_info?.expire_time) {
        return { days: 0, hours: 0, minutes: 0, seconds: 0 };
    }
    
    try {
        // 使用响应式的当前时间
        const now = currentTime.value;
        
        // 安全地处理时间转换，避免警告
        let expireTime = 0;
        if (typeof detail.group_info?.expire_time === 'string' && detail.group_info?.expire_time.trim()) {
            const iosCompatibleDateStr = detail.group_info?.expire_time.replace(/-/g, '/'); 
            const timestamp = timeTurnTimeStampTwo(iosCompatibleDateStr);
            if (timestamp && !isNaN(timestamp)) {
                expireTime = timestamp * 1000;
            }
        }
        
        if (!expireTime) {
            return { days: 0, hours: 0, minutes: 0, seconds: 0 };
        }
        
        const remainingTime = expireTime - now;
        
        if (remainingTime <= 0) {
            return { days: 0, hours: 0, minutes: 0, seconds: 0 };
        }
        
        const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
        const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
        
        return { days, hours, minutes, seconds };
    } catch (error) {
        // 如果出现任何错误，返回默认值
        return { days: 0, hours: 0, minutes: 0, seconds: 0 };
    }
};
const discountTimeFn = (data: any)=>{
    let now = new Date();
    let timestamp: any = now.getTime();
    let time = timeTurnTimeStampTwo(data.group_info?.expire_time) * 1000 - timestamp;
    return time;
}
const handleCountdownFinish = () => {
  // 3秒后重新请求数据
  setTimeout(() => {
        orderDetailFn(orderNo.value);
    }, 3000);
};

const orderDetailFn = (order_no: string) => {
    loading.value = true;
    getPintuanMyListDetail(order_no).then((res: any) => {
        detail.value = res.data
        state.pt_stare = res.data.group_info?.status;
        loading.value = false;
        if (res.data.group_info?.status == 'process') {
            startCountdown();
        }
        // 分享 - start
        let share: any = {
            title: '',
            desc: '',
            url: detail.value.goods_info.cover_thumb_big || "",
            // 新增：动态生成跳转地址（根据环境拼接完整路径）
            link: '', // H5 跳转链接（带域名）
            path: ''  // 小程序跳转路径（路由格式）
        };
        let basePath  = ''
        if(state.pt_stare == 'process'){
            share.title = detail.value.share_config.group.title || detail.value.goods_info.title;
            share.desc = detail.value.share_config.group.desc;
            // 生成基础路径（目标页面 + 参数）
            basePath = `addon/pintuan/pages/goods/detail?pintuan_id=${detail.value.order_detail?.pintuan_id}&group_id=${detail.value.order_detail?.group_id}`;
        }else{
            share.title = detail.value.share_config.normal.title || detail.value.goods_info.title;
            share.desc = detail.value.share_config.normal.desc;
            basePath = `addon/pintuan/pages/goods/detail?pintuan_id=${detail.value.order_detail?.pintuan_id}`;
        }
        // 区分环境拼接完整地址
        // #ifdef H5
        let pathName = location.pathname;
        let packageArr: any = ['/app/', '/addon/'];
        for (let i = 0; i < packageArr.length; i++) {
            if (pathName.indexOf(packageArr[i]) != -1) {
                pathName = pathName.substr(0, pathName.indexOf(packageArr[i]));
            }
        }
        // H5 需拼接域名和当前路由前缀
        share.link = `${location.origin}${pathName}/${basePath}`;
        // #endif

       //  #ifdef MP-WEIXIN
        // 小程序需用路由格式（以 / 开头）
        share.path = `/${basePath}`;
        // #endif

        // 传递分享信息（包含地址）
        setShare({
            wechat: {
                ...share
                // H5 会使用 share 中的 link 字段
            },
            weapp: {
                ...share
                // 小程序会使用 share 中的 path 字段
            }
        });
     
        // 分享 - end
        copyUrlFn();
        nextTick(() => {
            setTimeout(() => {
                if(sharePosterRef.value) {
                    posterParam.pintuan_id = detail.value.order_detail.pintuan_id;
                    posterParam.group_id = detail.value.order_detail.group_id;
                    if (userInfo.value && userInfo.value.member_id) posterParam.member_id = userInfo.value.member_id;
                    sharePosterRef.value.loadPoster();
                }
            }, 400)
        })
        
    }).catch((err: any) => {
        loading.value = false;
        let parameter = {
            url: '/addon/pintuan/pages/my_spell',
            title: '订单不存在'
        };
        goback(parameter)
       
    })
}
const toLink = (data: any) => {
  redirect({ url: '/addon/pintuan/pages/order/detail', param: { order_no: data.order_detail.order_no } })
}

const toBuy = (type: number) => {
    redirect({ url: '/addon/pintuan/pages/goods/detail', param: { pintuan_id: detail.value.order_detail.pintuan_id,isbuy: type } })
}
const goodsEvent = (data: any) => {
    redirect({
        url: '/addon/pintuan/pages/goods/detail',
        param: {
            pintuan_id: data.order_detail.pintuan_id,
        }
    })
}
onMounted(() => {
    // 启动倒计时
   
})

// 组件卸载时清理定时器
onUnmounted(() => {
    if (countdownTimer) {
        clearInterval(countdownTimer);
        countdownTimer = null;
    }
});
/************* 分享海报-start **************/
const sharePosterRef: any = ref(null);
const copyUrl = ref('/addon/pintuan/pages/goods/detail')
const copyUrlParam = ref('');
let posterParam: any = {};

// 分享海报链接
const copyUrlFn = ()=>{
	copyUrlParam.value = '?pintuan_id='+ detail.value.order_detail.pintuan_id;
    copyUrlParam.value += '&group_id=' + detail.value.order_detail.group_id;
}

const openShareFn = ()=>{
    posterParam.pintuan_id = detail.value.order_detail.pintuan_id;
    posterParam.group_id = detail.value.order_detail.group_id;
    if (userInfo.value && userInfo.value.member_id) posterParam.member_id = userInfo.value.member_id;
	sharePosterRef.value.openShare()
}
/************* 分享海报-end **************/

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


</script>
<style lang="scss" scoped>
.single-line {
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    text-overflow: ellipsis;
    /* 显示省略号 */
}

.bgjnb {
    background: linear-gradient(129deg, #FFD35B 0%, #FF4235 54%, #FF2F98 99%);
    border-radius: 5rpx 18rpx 18rpx 5rpx;
}

.bgzt {
    background: linear-gradient(94deg, #FF7B2A 0%, #FF000D 99%), #EF000C;
}

.font-fz {
    font-family: FZZhengHei-B-GBK, FZZhengHei-B-GBK;
    font-weight: 400;
}
</style>
