<template>
    <view :style="themeColor()">
        <view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden" v-if="!loading">
            <view v-if="!loading" class="pb-20rpx">
                <view class="min-h-[540rpx] overflow-hidden" v-if="pt_stare == 'process' && (detail.status =='payment' || detail.status =='wait_use')"
                    :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 || APP-PLUS  -->
                    <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>
                <view v-if="pt_stare == 'process' && (detail.status =='payment' || detail.status =='wait_use')">

                            <!--  #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-[42rpx] px-[12rpx]">
                                                    需{{ detail.group_info?.target_num }}人成团
                                                </view>
                                            </view>
                                        </view>

                                        <view class="flex items-baseline">
                                            <view class="">
                                                <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="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>
                                        <!-- {{ detail.is_enable_refund }} -->
                                        <view class="flex justify-end w-[100%] mt-[30rpx] mb-[20rpx]" v-if="detail.status != 'wait_pay' && detail.status != 'close' && detail.source=='pintuan' && detail.is_enable_refund == 1 && detail.refund_page ">
                                            <view v-if="detail.status =='refund_ing' || detail.close_type == 'refund_close'"
                                                class="text-[22rpx] text-[#333] leading-[50rpx] px-[20rpx] border-[2rpx] border-solid border-[#ccc] rounded-full"
                                                @click="applyRefund(detail)">查看退款</view>
                                            <view v-else
                                                class="text-[22rpx] text-[#333]  leading-[50rpx] px-[20rpx] border-[2rpx] border-solid border-[#ccc] rounded-full ml-[20rpx]"
                                                @click="applyRefund(detail)">申请退款</view>
                                        </view>
                                        <view class="flex justify-end w-[100%] mt-[30rpx] mb-[20rpx]" v-if="detail.status != 'wait_pay' && detail.source!='pintuan' && detail.is_enable_refund == 1&& detail.refund_page">
                                            <view
                                                class="text-[22rpx] text-[#333]  leading-[50rpx] px-[20rpx] border-[2rpx] border-solid border-[#ccc] rounded-full ml-[20rpx]"
                                                @click="applyRefund(detail)">售后服务</view>
                                        </view>
                                    </view>
                            </view>
                </view>
                <view v-if="pt_stare == 'process' && (detail.status =='payment' || detail.status =='wait_use')">
                    <view
                class="sidebar-margin mt-[var(--top-m)] card-template">
                <!-- 拼团中 -->
                <view v-if="pt_stare == 'process' && (detail.status =='payment' || detail.status =='wait_use')">
                    <view class="text-[#333333] text-[32rpx] text-center mt-[10rpx] leading-[normal]">再邀请 <text
                            class="text-[#FF000D] text-[36rpx] mx-[10rpx]">{{ group_info.target_num-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' && (detail.status =='payment' || detail.status =='wait_use')" 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' && (detail.status =='payment' || detail.status =='wait_use')">
                    <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="mt-[60rpx] flex justify-center">
                    <view class="carousel-wrapper max-w-[455rpx]"  :style="'width:' + (88 * visibleImages.length + (visibleImages.length >= 4 ? 110 : visibleImages.length == 3 ? 70 : visibleImages.length == 2 ? 40 : 10)) + 'rpx'">
                        <view class="carousel-item border border-[#DDDDDD] !border-solid border-width-[1px]" :style="'background:url('+img('addon/pintuan/bk.png')+');background-size: 100% 100%;'"
                            v-for="(item, index) in visibleImages" 	:key="item.id"
                            :class="[item.role == 'leader' ? 'leader-border' : item.role != 'leader' && item.member?.member_id== userInfo?.member_id ? '!border-[#ddd] !border-solid' : '',item.imgstatus]" >
                            <view v-if="item.member" class="w-[100%] h-[100%] overflow-hidden">
                                <image :src="item.member ? img(item.member.headimg) : ''" mode="scaleToFill" class="w-[88rpx] h-[88rpx] rounded-[50%]" v-if="item.member" @error="item.member.headimg='static/resource/images/default_headimg.png'" />
                                <image v-else :src="img('static/resource/images/default_headimg.png')" mode="scaleToFill" class="w-[88rpx] h-[88rpx] rounded-[50%]" />
                            </view>

                            <view :class="item.imgstatus"  class="w-[70rpx] h-[28rpx] rounded-[16rpx] carousel-border text-[#fff] text-[20rpx] text-center leading-[28rpx] absolute bottom-[-10rpx] left-[9rpx] primary-btn-bg"
                                v-if="item.role == 'leader'">团长</view>
                            <view :class="item.imgstatus" class="w-[70rpx] h-[28rpx] rounded-[16rpx] carousel-border text-[#fff] text-[20rpx] text-center leading-[28rpx] absolute bottom-[-10rpx] left-[9rpx] bg-[#333]"
                                v-if="item.role != 'leader' && item.member?.member_id== userInfo?.member_id">我</view>
                        </view>
                    </view>
                    <view class="ml-[30rpx] w-[88rpx] h-[88rpx] bg-[#F6F6F6] rounded-[50%] border border-[#DDDDDD] border-width-[1px] flex items-center justify-center text-[#999999] text-[40rpx]"  @click="openShareFn">
                        <text class="iconfont iconjiahaoV6xx1 text-[#999999] text-[40rpx]"></text>
                    </view>

                </view>
                <view @click="openShareFn" v-if="pt_stare == 'process' && (detail.status =='payment' || detail.status =='wait_use')"
                    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' && (detail.status =='payment' || detail.status =='wait_use')"
                    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' && (detail.status =='payment' || detail.status =='wait_use')" @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' && (detail.status =='payment' || detail.status =='wait_use')"
            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>详细规则</text>
                        <text
                            class="iconfont iconyouV6xx text-[24rpx]"></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>
                <template v-if="detail.status_name && pt_stare!='process' || (detail.status !='payment' && detail.status !='wait_use')" >
                    <view v-if="detail.status_name && pt_stare!='process' || (detail.status !='payment' && detail.status !='wait_use')" class="pl-[40rpx] pr-[35rpx] pb-[100rpx]" :style="headBgStyle">
                    <!-- #ifdef MP-WEIXIN || APP-PLUS  -->
                    <top-tabbar :data="topTabbarData" :scrollBool="topTabarObj.getScrollBool()" />
                    <!-- #endif -->
                    <view class="flex justify-between items-center pt-[40rpx]">
                        <view class="flex flex-col">
                            <image class="w-[28rpx] h-[20rpx] mb-[10rpx] ml-[4rpx]" :src="img('addon/pintuan/detail/head_001.png')" mode="aspectFit" />
                            <view class="text-[#fff] text-[36rpx] font-500 leading-[42rpx]">{{ detail.status_name }}</view>

                            <!-- <view class="text-[#fff] text-[36rpx] font-500 leading-[42rpx]" v-if="detail.status == 0 && delivery_type=='verify'">待核销</view> -->
                            <view class="text-[#fff] text-[24rpx] font-500 leading-[42rpx] mt-[8rpx]" v-if="delivery_type=='verify'&& detail.delivery_type_config.verify_num!=detail.delivery_type_config.verified_count && detail.status !='close' && detail.status != 'wait_pay'">请在{{detail.verify_expire_time}}前到店核销</view>

                            <!-- <view class="text-[#fff] text-[36rpx] font-500 leading-[42rpx]" v-if="detail.status == 1 && delivery_type=='verify'">核销成功</view> -->
                            <view class="text-[#fff] text-[24rpx] font-500 leading-[42rpx] mt-[8rpx]" v-if="detail.status == 'payment' && delivery_type=='verify' && detail.delivery_type_config.verify_num==detail.delivery_type_config.verified_count ">已到店核销成功</view>

                            <!-- <view class="text-[#fff] text-[36rpx] font-500 leading-[42rpx]" v-if="detail.status == 0 && delivery_type=='exchange'">待兑换</view>
                            <view class="text-[#fff] text-[24rpx] font-500 leading-[42rpx] mt-[8rpx]" v-if="detail.status == 0 && delivery_type=='exchange'">请在2025.07.25前兑换该商品</view> -->

                            <!-- <view class="text-[#fff] text-[36rpx] font-500 leading-[42rpx]" v-if="detail.status == 2 && delivery_type=='exchange'">您已成功兑换到该商品</view> -->
                            <!-- <view class="text-[#fff] text-[24rpx] font-500 leading-[42rpx] mt-[8rpx]" v-if="detail.status == 2 && delivery_type=='exchange'">已到店核销成功</view> -->


                        </view>
                        <view class="flex items-end relative -bottom-[6rpx]">
                            <image v-if="detail.status == 'wait_pay'" class="w-[160rpx] h-[140rpx]"
                               :src="img('addon/pintuan/detail/payment.png')" mode="aspectFit" />
                            <image v-if="detail.status == 'finish'" class="w-[160rpx] h-[140rpx]"
                                :src="img('addon/pintuan/detail/complete.png')" mode="aspectFit" />
                            <image v-if="detail.status == 'payment'" class="w-[160rpx] h-[140rpx]"
                                :src="img('addon/pintuan/detail/complete.png')" mode="aspectFit" />
                            <image v-if="detail.status == 'refund_ing'" class="w-[160rpx] h-[140rpx]"
                                :src="img('addon/pintuan/detail/refund_ing.png')" mode="aspectFit" />
                            <image v-if="detail.status == 'close'" class="w-[160rpx] h-[140rpx]"
                                :src="img('addon/pintuan/detail/close.png')" mode="aspectFit" />
                            <image class="w-[8rpx] h-[30rpx] mb-[20rpx]"
                                :src="img('addon/pintuan/detail/head_002.png')" mode="aspectFit" />
                        </view>
                    </view>
                </view>

                <view class="sidebar-margin card-template" :class="{'mt-[20rpx]': pt_stare=='process','mt-[-86rpx]':pt_stare!='process'}"  v-if="detail.is_need_address">
                    <view v-if="detail.is_need_address">
                        <view class="text-[#303133] flex">
                            <text class="nc-iconfont nc-icon-dizhiguanliV6xx text-[40rpx] pt-[12rpx] mr-[20rpx]"></text>
                            <view class="flex flex-col">
                                <view class="text-[30rpx] leading-[38rpx] overflow-hidden">
                                    <text>{{ detail.taker_name }}</text>
                                    <text class="ml-[15rpx]">{{ detail.taker_mobile }}</text>
                                </view>
                                <view class="mt-[12rpx] text-[24rpx] text-[var(--text-color-light6)] using-hidden leading-[26rpx]">{{ detail.taker_full_address.split(detail.taker_address)[0] }}{{ detail.taker_address }}</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="sidebar-margin card-template p-[0] mt-[20rpx] py-[var(--pad-top-m)] overflow-hidden" :class="{'mt-[-86rpx]': !detail.is_need_address }" v-if="pt_stare != 'process' ||  (detail.status !='payment' && detail.status !='wait_use')">
                    <view
                          class="px-[var(--pad-sidebar-m)]">
                        <view class="order-goods-item flex justify-between mb-[20rpx]">
                            <view class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" @click="goodsEvent(detail)">
                                <u--image class="overflow-hidden" radius="var(--goods-rounded-big)" width="150rpx"
                                          height="150rpx" :src="img(detail.sku_snapshot.goods?.cover_thumb_small ? detail.sku_snapshot.goods?.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>

                            <view class="ml-[20rpx] flex flex-1 flex-col justify-between" v-if="delivery_type != 'default'" >
                                <view>
                                    <view class="text-[28rpx] truncate leading-[40rpx] text-[#333] flex justify-between">
                                        <text class="multi-hidden max-w-[400rpx]">{{ detail.sku_snapshot.goods.title }}</text>
                                        <view>
                                            <!-- {{ parseFloat(detail.sku?.price).toFixed(2) }} -->
                                            <text class="text-[#333] text-[20rpx] price-font ">¥</text>
                                            <text class="text-[#333] text-[28rpx] price-font ">{{parseFloat(detail.sku_snapshot.sku_price).toFixed(2).split('.')[0]}}.</text>
                                            <text class="text-[#333] text-[20rpx] price-font ">{{parseFloat(detail.sku_snapshot.sku_price).toFixed(2).split('.')[1]}}</text>
                                        </view>
                                    </view>
                                    <view  class="flex my-[10rpx] ">
                                        <view v-if="detail.sku_snapshot.sku_name" class="text-[22rpx] text-[var(--text-color-light9)] truncate max-w-[400rpx] leading-[28rpx]">{{ detail.sku_snapshot.sku_name }}</view>
                                        <text class="text-right text-[26rpx] ml-[auto]">x{{ detail.num }}</text>
                                    </view>
                                </view>
                                <view class="flex justify-between items-baseline leading-[28rpx] text-[#333]">
                                    <view class="flex justify-between items-center">
                                        <view class="text-[24rpx] text-[#999999]" v-if="detail.status !='close' && detail.status != 'wait_pay'&& (delivery_type=='verify')&& detail.verify_expire_time "> {{ detail.verify_expire_time == 0 ? '永久有效' : detail.verify_expire_time + ' 前有效' }}</view>
                                        <!-- <view class="text-[24rpx] leading-1 text-[#999999]" v-if="detail.status !='close' && detail.status != 'wait_pay' && (delivery_type=='exchange')&& detail.delivery_type_config.code_express_time"> {{ detail.delivery_type_config.code_express_time ==0 ? '永久有效' : detail.delivery_type_config.code_express_time + ' 前有效' }}</view> -->

                                    </view>
                                    <view class="text-[24rpx] text-[#333] flex justify-end items-baseline" v-if="detail.status != 'wait_pay'">
                                        <text class="mr-[6rpx]">实付</text>
                                        <template v-if="detail.pay_money>0">
                                            <text class="text-[#EF000C] text-[20rpx] price-font">￥</text>
                                            <text class="text-[#EF000C] text-[32rpx] price-font">{{parseFloat(detail.pay_money).toFixed(2).split('.')[0]}}.</text>
                                            <text class="text-[#EF000C] text-[22rpx] price-font">{{parseFloat(detail.pay_money).toFixed(2).split('.')[1]}}</text>
                                        </template>
                                        <template v-else>
                                            <text class="text-[#EF000C] text-[20rpx] price-font">￥</text>
                                            <text class="text-[#EF000C] text-[32rpx] price-font">{{parseFloat(detail.order_money).toFixed(2).split('.')[0]}}.</text>
                                            <text class="text-[#EF000C] text-[22rpx] price-font">{{parseFloat(detail.order_money).toFixed(2).split('.')[1]}}</text>
                                        </template>
                                    </view>

                                </view>
                            </view>
                             <view class="ml-[20rpx] flex flex-1 flex-col justify-between" v-else>
                                <view>
                                    <view class="text-[28rpx] max-w-[490rpx] truncate leading-[40rpx] text-[#333] flex justify-between">
                                        <text class="multi-hidden max-w-[400rpx]">{{ detail.sku_snapshot.goods.title  }}</text>
                                        <view>
                                            <!-- {{ parseFloat(detail.sku?.price).toFixed(2) }} -->
                                            <text class="text-[#333] text-[20rpx] price-font ">¥</text>
                                            <text class="text-[#333] text-[28rpx] price-font ">{{parseFloat(detail.sku_snapshot.sku_price).toFixed(2).split('.')[0]}}.</text>
                                            <text class="text-[#333] text-[20rpx] price-font ">{{parseFloat(detail.sku_snapshot.sku_price).toFixed(2).split('.')[1]}}</text>
                                        </view>
                                    </view>
                                    <view  class="flex  my-[10rpx]">
                                        <view v-if="detail.sku_snapshot.sku_name" class="text-[22rpx] text-[var(--text-color-light9)] truncate max-w-[400rpx] leading-[28rpx]">{{ detail.sku_snapshot.sku_name }}</view>
                                        <text class="text-right text-[26rpx] ml-[auto]">x{{ detail.num }}</text>
                                    </view>
                                </view>
                                <view class="flex justify-between items-baseline leading-[28rpx] text-[#333]">

                                    <view class="flex w-[100%] justify-between items-center">

                                    </view>
                                </view>
                            </view>
                        </view>

                        <view class="flex justify-end w-[100%] mt-[30rpx] mb-[20rpx]" v-if="detail.status != 'wait_pay' && detail.status != 'close' && detail.source=='pintuan' && detail.is_enable_refund == 1 && detail.refund_page ">
                            <view v-if="detail.status =='refund_ing' || detail.close_type == 'refund_close'"
                                  class="order-grey-hollow-btn"
                                  @click="applyRefund(detail)">查看退款</view>
                            <view v-else
                                  class="order-grey-hollow-btn ml-[20rpx]"
                                  @click="applyRefund(detail)">申请退款</view>
                        </view>
                        <view class="flex justify-end w-[100%] mt-[30rpx] mb-[20rpx]" v-if="detail.status != 'wait_pay' && detail.source!='pintuan' && detail.is_enable_refund == 1&& detail.refund_page">
                            <view
                                  class="order-grey-hollow-btn ml-[20rpx]"
                                  @click="applyRefund(detail)">售后服务</view>
                        </view>

                        <!-- 商品的万能表单信息 -->
                        <view :class="{'diy-form-wrap' : goodsDiyFormData.length }" v-if="detail.form_record_id">
                            <diy-form-detail :record_id="detail.form_record_id" completeLayout="style-2" @callback="getGoodsDiyFormDetailCallback" />
                        </view>
                    </view>

                </view>
                  <!-- 兑换码信息展示区域 -->
                <view class="sidebar-margin mt-[var(--top-m)] card-template" v-if="delivery_type == 'exchange' && detail.status != 'wait_pay' && detail.status !='close' && isShowDelivery ">
                    <view class="py-[30rpx] flex justify-between">

                        <view class="text-[30rpx] font-bold text-[#000]">兑换码信息  <text class="text-[34rpx] text-[#EF000C]">{{ currentExchangeCode + 1 }}</text> <text class="text-[24rpx] text-[#333]">/ {{exchangeData.list.length}}</text> </view>
                    </view>
                    <view class="flex justify-center">
                        <swiper class="flex justify-center w-[520rpx]" @change="swiperExchangeChange" v-if="exchangeData.list && exchangeData.list.length">
                        <!-- {{ verificationData.barcode }} -->
                            <swiper-item v-for="(item, index) in exchangeData.list" class="relative" :style="exchangeStyle" :key="index">
                                <view class="flex flex-col justify-center items-center h-full">
                                    <view class="text-[28rpx] mb-[20rpx] text-[#333]">兑换码</view>
                                    <view class="text-[46rpx] mb-[60rpx] text-[#333] text-center flex justify-center items-center">
                                        <view class="truncate max-w-[400rpx]">{{ item.code }} </view>
                                        <text class="text-[#EF000C] text-[28rpx] ml-[16rpx] iconfont iconVector-44" @click="copy( item.code )"></text>
                                    </view>
                                    <view class="text-[24rpx] text-[#999] absolute bottom-[35rpx] text-center">有效期至{{ item.expire_time==0?'永久有效':item.expire_time }}</view>
                                </view>
                            </swiper-item>
                        </swiper>
                    </view>


                </view>
                <!-- 核销信息展示区域 -->
                <view class="sidebar-margin mt-[var(--top-m)] card-template" v-if="delivery_type == 'verify' && detail.status != 'wait_pay' && detail.status != 'close'  && detail.status !='finish'&&isShowDelivery && isShowVerification ">
                    <view class="py-[30rpx] flex justify-between items-center">
                        <view class="text-[30rpx] font-bold text-[#000]">核销信息  <text class="text-[34rpx] text-[#EF000C]">{{ detail.delivery_type_config.verified_count  }}</text> <text class="text-[24rpx] text-[#333]">/ {{ detail.delivery_type_config.verify_num }} </text> <text class="ml-[10rpx] text-[24rpx] text-[#999]">(已使用/总数)</text> </view>
                        <view class="text-[24rpx] text-[#999] ml-[20rpx]" @click="redirect({ url: '/addon/pintuan/pages/order/card_record', param: { order_id : detail.id ,pintuan_id: detail.pintuan_id } })">
                            核销记录
                            <text class="iconfont iconxiangyoujiantou text-[24rpx] ml-[10rpx] "></text>
                        </view>
                    </view>

                    <swiper class="h-[600rpx]" @change="swiperChange" v-if="verificationData.list && verificationData.list.length">
                        <swiper-item v-for="(item, index) in verificationData.list" :key="index">
                            <view>
                                <!-- 条形码区域 -->
                                <view class="flex justify-center mb-[40rpx]">
                                    <view class="bg-[#fff] p-[20rpx] border-[2rpx] border-dashed border-[#ddd] rounded-[10rpx]">
                                        <image
                                            :src="item.barcode"
                                            mode="widthFix"
                                            class="w-[500rpx] !h-[60rpx]"
                                            @click="previewImage(item.barcode)"
                                        />
                                    </view>

                                </view>
                                <!-- 二维码区域 -->
                                <view class="flex justify-center mb-[40rpx]">
                                    <view class="bg-[#fff] p-[20rpx] border-[2rpx] border-dashed border-[#ddd] rounded-[10rpx]">
                                        <image
                                            :src="item.qrcode"
                                            mode="widthFix"
                                            class="w-[300rpx] h-[300rpx]"
                                            @click="previewImage(item.qrcode)"
                                        />
                                    </view>
                                </view>
                                <view class="text-[24rpx] text-[#333] text-center">核销券码：{{ item.code }} <text class="text-[#EF000C] text-[24rpx]  ml-[16rpx] iconfont iconVector-44" @click="copy( item.code )"></text></view>
                            </view>
                        </swiper-item>
                    </swiper>

                    <view class="text-[24rpx] text-[#999] text-center mb-[20rpx]" v-if="verificationData.list && verificationData.list.length > 1">
                        <text>{{ currentCode + 1 }}</text>/
                        <text>{{ verificationData.list.length }}</text>
                    </view>

                    <!-- 底部说明文字 -->
                    <view class="text-center pb-[30rpx]">
                        <text class="text-[24rpx] text-[#666] leading-[36rpx]">未消费前请不要将券码提供给商家</text>
                    </view>
                </view>
                <!-- <view class="sidebar-margin mt-[var(--top-m)] card-template" v-if="delivery_type == 'verify'">
                    <view class="justify-between card-template-item">
                        <view class="text-[28rpx]">核销券码</view>
                        <view class="text-[28rpx]">fc492ef06c4194149f23d6</view>
                    </view>
                    <view class="justify-between card-template-item">
                        <view class="text-[28rpx]">核销类型</view>
                        <view class="text-[28rpx]">fc492ef06c4194149f23d6</view>
                    </view>
                    <view class="justify-between card-template-item">
                        <view class="text-[28rpx]">截止时间</view>
                        <view class="text-[28rpx]">fc492ef06c4194149f23d6</view>
                    </view>
                    <view class="justify-between card-template-item">
                        <view class="text-[28rpx]">核销时间</view>
                        <view class="text-[28rpx]">fc492ef06c4194149f23d6</view>
                    </view>
                    <view class="justify-between card-template-item">
                        <view class="text-[28rpx]">核销店铺</view>
                        <view class="text-[28rpx]">fc492ef06c4194149f23d6</view>
                    </view>
                </view> -->
                <!-- <view class="sidebar-margin mt-[var(--top-m)] card-template" v-if="delivery_type == 'verify'">

                    <view class="text-[30rpx] text-[#000000] flex items-center justify-center"> <text> - </text>  <text class="mx-[14rpx]">服务内容</text> <text> - </text></view>
                    <view class="mx-[24rpx] p-[20rpx] my-[20rpx] bg-[#F9F9F9]  rounded-[20rpx] flex">
                        <view class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" >
                            <u--image class="overflow-hidden" radius="var(--goods-rounded-big)" width="150rpx"
                                      height="150rpx" :src="img(detail.goods?.goods_cover_thumb_small ? detail.goods?.goods_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>

                        <view class="ml-[20rpx] flex flex-1 flex-col">
                                <view>
                                    <view class="text-[28rpx] max-w-[490rpx] truncate leading-[40rpx] text-[#333]  leading-[normal]">{{ detail.goods_name }}</view>
                                </view>
                               <view class="flex justify-between mt-[20rpx]">
                                    <view>
                                        <view class="text-[24rpx] text-[#999999] leading-[normal]">
                                            核销总数： <text class="text-[#666666]">6</text>
                                        </view>
                                        <view class="text-[24rpx] text-[#999999] mt-[14rpx] leading-[normal]">
                                            已使用次数：<text class="text-[#666666]">1</text>
                                        </view>
                                    </view>
                                    <view class="w-[140rpx] h-[56rpx] border-[2rpx] border-solid border-[#EF000C] rounded-[40rpx] text-[24rpx] text-[#EF000C] flex items-center justify-center" @click="verificationFn(item)" v-if="detail.status == 0 && delivery_type=='verify'">
                                        去核销
                                    </view>
                               </view>
                            </view>

                    </view>
                    <view class="text-[24rpx] text-[#999999] flex items-center justify-center">核销记录 <text class="iconfont iconxiangyoujiantou text-[24rpx] ml-[10rpx] "></text> </view>
                </view> -->
                <!-- <view class="sidebar-margin mt-[var(--top-m)] card-template" v-if="delivery_type == 'verify'">
                    <view class="text-[30rpx] text-[#000000] flex items-center justify-center"> <text> - </text>  <text class="mx-[14rpx]">使用须知</text> <text> - </text></view>
                    <view class="mx-[24rpx] my-[20rpx] text-[24rpx] text-[#333333] leading-[normal]">
                        暂无使用说明
                    </view>
                 </view> -->

                <view class="sidebar-margin mt-[var(--top-m)] card-template">
                    <view class="justify-between card-template-item">
                        <view class="text-[28rpx]">{{ t('orderNo') }}</view>
                        <view class="flex items-center text-[28rpx]">
                            <text>{{ detail.order_no }}</text>
                            <text class="w-[2rpx] h-[20rpx] bg-[#999] mx-[10rpx]"></text>
                            <text class="text-[var(--primary-color)]" @click="copy(detail.order_no)">复制</text>
                        </view>
                    </view>
                    <view v-if="detail.out_trade_no" class="justify-between card-template-item">
                        <view class="text-[28rpx]">{{ t('orderTradeNo') }}</view>
                        <view class="text-[28rpx]">{{ detail.out_trade_no }}</view>
                    </view>
                    <view class="justify-between card-template-item">
                        <view class="text-[28rpx]">{{ t('createTime') }}</view>
                        <view class="text-[28rpx]">{{ detail.create_time }}</view>
                    </view>
					<view class="justify-between card-template-item" v-if="detail.member_remark">
					    <view class="text-[28rpx] w-[180rpx]">{{ t('memberRemark') }}</view>
					    <view class="text-[28rpx] flex-1 text-right">{{ detail.member_remark }}</view>
					</view>
                    <view v-if="detail.pay" class="card-template-item justify-between" :class="{ '!mb-[18rpx]' : detail.member_id !== detail.pay.main_id && detail.pay.status == 2 }">
                        <view class="text-[28rpx]">{{ t('payTypeName') }}</view>
                        <view class="text-[28rpx]">{{ detail.pay.type_name }}</view>
                    </view>
                    <view v-if="detail.pay_time" class=" card-template-item justify-between">
                        <view class="text-[28rpx]">{{ t('payTime') }}</view>
                        <view class="text-[28rpx]">{{ detail.pay_time }}</view>
                    </view>
                    <view v-if="detail.source_name" class=" card-template-item justify-between">
                        <view class="text-[28rpx]">商品来源</view>
                        <view class="text-[28rpx]">{{ detail.source_name }}</view>
                    </view>

                </view>

                <view class="sidebar-margin mt-[var(--top-m)] card-template">
                    <view class="card-template-item justify-between">
                        <view class="text-[28rpx]">{{ t('goodsMoney') }}</view>
                        <view class="price-font font-500">
                            <template v-if="parseFloat(detail.goods_money) || !parseFloat(detail.point)">
                                <text class="text-[28rpx]">￥</text>
                                <text class="text-[28rpx]">{{ parseFloat(detail.goods_money).toFixed(2).split('.')[0] }}</text>
                                <text class="text-[28rpx]">.{{ parseFloat(detail.goods_money).toFixed(2).split('.')[1] }}</text>
                            </template>
                        </view>
                    </view>
                    <template v-if="detail.third_cost_list && detail.third_cost_list.length" >
                        <view class="card-template-item  justify-between" v-for="(item, index) in detail.third_cost_list" :key="index">
                            <view class="text-[28rpx]">{{item.name}}</view>
                            <view class="price-font font-500 text-[28rpx]">￥{{ parseFloat(item.amount).toFixed(2) }}</view>
                        </view>
                  </template>

                    <view class=" card-template-item justify-between items-baseline">
                        <view class="text-[28rpx]">{{ t('orderMoney') }}</view>
                        <view class="text-[var(--price-text-color)] price-font">
                            <text v-if="detail.pay_money && detail.pay_money > 0" class="text-[28rpx]">￥{{ parseFloat(detail.pay_money).toFixed(2) }}</text>
                            <text v-else>￥{{ parseFloat(detail.order_money).toFixed(2) }}</text>
                        </view>
                    </view>
                </view>

                <view class="flex z-2 justify-between items-center bg-[#fff] fixed left-0 right-0 bottom-0 min-h-[100rpx] pl-[30rpx] pr-[20rpx] flex-wrap  pb-ios">
                    <view class="flex">
                        <!-- <view class="flex  mr-[34rpx] flex-col justify-center items-center"
                              @click="orderBtnFn('index')">
                            <view class="nc-iconfont nc-icon-shouyeV6xx11 text-[36rpx]"></view>
                            <text class="text-[20rpx] mt-[10rpx]">{{ t('index') }}</text>
                        </view> -->
                        <!-- #ifdef MP-WEIXIN -->
                        <!-- <view>
                            <nc-contact :send-message-title="sendMessageTitle" :send-message-path="sendMessagePath" :send-message-img="sendMessageImg">
                                <view class="flex flex-col justify-center items-center">
                                    <view class="w-[36rpx] h-[36rpx] flex-center">
                                        <text class="nc-iconfont nc-icon-kefuV6xx-1 text-[34rpx]"></text>
                                    </view>
                                    <text class="text-[20rpx] mt-[10rpx]">客服</text>
                                </view>
                            </nc-contact>
                        </view> -->
                        <!-- #endif -->

                    </view>
                    <view class="flex justify-end">
                        <view @click="orderBtnFn('index')" class="order-grey-hollow-btn ml-[20rpx]">
                              {{ t('index') }}
                        </view>
                          <!-- #ifdef MP-WEIXIN -->
                          <view>
                            <nc-contact :send-message-title="sendMessageTitle" :send-message-path="sendMessagePath" :send-message-img="sendMessageImg">
                                <view class="order-grey-hollow-btn ml-[20rpx]">
                                    客服
                                </view>
                            </nc-contact>
                        </view>
                        <!-- #endif -->
                        <view @click="orderBtnFnpage('link')" v-if="delivery_type=='link' && detail.delivery_type_config && detail.delivery_type_config.custome_link && detail.status != 'wait_pay' && detail.status != 'close'&&isShowDelivery " class="order-grey-hollow-btn ml-[20rpx]"
                              >
                              查看链接
                        </view>
                        <view @click="orderBtnFnpage('page')" v-if="delivery_type=='page' && detail.delivery_type_config && detail.delivery_type_config.custome_pages && detail.status != 'wait_pay' && detail.status != 'close'&&isShowDelivery" class="order-grey-hollow-btn ml-[20rpx]"
                              >
                              查看页面
                        </view>
                        <view class="order-grey-hollow-btn ml-[20rpx]" v-if="detail.status == 'wait_pay'" @click="orderBtnFn('close')">{{ t('orderClose') }}</view>
                        <view class="px-[35rpx] box-border  text-[24rpx] h-[60rpx] flex-center text-center text-[#fff] primary-btn-bg rounded-full ml-[20rpx]" v-if="detail.status == 'wait_pay'" @click="orderBtnFn('pay')">{{ t('topay') }}</view>
                        <template v-if="detail.status != 'wait_pay' && detail.status != 'close' && detail.source!='pintuan'">
                            <view class="order-grey-hollow-btn ml-[20rpx]" v-if="detail.detail_page" @click="orderBtnFn('source')">查看关联订单</view>
                        </template>
                    </view>
                </view>
                    </template>
                
             </view>
            <view class="tab-bar-placeholder"></view>
            <pay ref="payRef" @close="payClose" :ignore-pay="['friendspay']"></pay>

        </view>

        <u-popup :show="verificationShow" @close="verificationShow = false">
        <view class="text-center py-[30rpx] font-bold leading-none">
          <text>核销码</text>
        </view>
        <view class="flex flex-col p-3 pb-5 items-center">
          <image
            :src="verificationData.verify_code_barcode"
            mode="widthFix"
            class="mb-5 w-[546rpx] h-[auto] border-1 border-[#aba9aa] border-dashed p-1"
           />
          <image :src="verificationData.verify_code_qrcode" mode="widthFix" class="w-[326rpx] h-[auto] border-1 border-[#aba9aa] border-dashed" />
          <view class="text-xs text-[var(--text-color-light6)] mt-3">{{ t('codeDesc') }}</view>
        </view>
      </u-popup>
      <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>
        <loading-page :loading="loading"></loading-page>

        <!-- #ifdef MP-WEIXIN -->
        <!-- 小程序隐私协议 -->
        <wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
        <!-- #endif -->
        <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 { ref, nextTick ,computed,onMounted,onUnmounted} from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import { t } from '@/locale'
import { img, redirect, copy, goback, diyRedirect, timeTurnTimeStampTwo } from '@/utils/common';
import { getPintuanOrderInfo,pintuanOrderClose,getGoodsVerifyCode} from '@/addon/pintuan/api/order';
import { checkPintuanGroupApi ,getPintuanConfig} from '@/addon/pintuan/api/pintuan';
import { useShare }from '@/hooks/useShare'
import useConfigStore from "@/stores/config";
import { topTabar } from '@/utils/topTabbar';
import diyFormDetail from '@/addon/components/diy-form-detail/index.vue'
import useMemberStore from '@/stores/member'
import usePintuanGoodsDetailStore from '@/addon/pintuan/stores/goodsDetail';
/********* 自定义头部 - start ***********/
const topTabarObj = topTabar()
let topTabbarData = topTabarObj.setTopTabbarParam({ title: '订单详情' })
/********* 自定义头部 - end ***********/
// 分享
const{setShare} = useShare()
// 会员信息
const memberStore = useMemberStore()
const userInfo = computed(() => memberStore.info)

const detail: any = ref<Object>({});
const loading = ref<boolean>(true);
const orderNo = ref('')
const headBgStyle = computed(() => ({
  'background-image': `url(${img('addon/pintuan/detail/head_bg.jpg')})`,
  'background-repeat': 'no-repeat',
  'background-size': '100% 100%'
}))

const exchangeStyle = computed(() => ({
  'background-image': `url(${img('addon/pintuan/detail/exchange_bg.png')})`,
  'background-repeat': 'no-repeat',
  'background-size': '100% 100%'
}))
const sendMessageTitle = ref('')
const sendMessagePath = ref('')
const sendMessageImg = ref('')

const wxPrivacyPopupRef: any = ref(null)
// 核销码
const currentCode = ref(0);
const swiperChange = (e: any) => {
    currentCode.value = e.detail.current;
    verificationData.value.code = verificationData.value.list[currentCode.value].code;
    verificationData.value.qrcode = verificationData.value.list[currentCode.value].qrcode;
    verificationData.value.barcode = verificationData.value.list[currentCode.value].barcode;
};

const isShowVerification = computed(() => {
    if(detail.value.verify_expire_timestamp==0){
        return true;
    }
    const currentTime = new Date().getTime(); // 当前时间
    const expireTime = detail.value.verify_expire_timestamp * 1000; // 过期时间戳
    return currentTime < expireTime;
})

// 兑换码
let exchangeData = ref<{
  code: string; //
  code_expire_time: number; // 过期时间
  list?: any[];
}>({
  code: '', //
  code_expire_time: 0, // 码过期时间
})

const currentExchangeCode = ref(0);
const swiperExchangeChange = (e: any) => {
    currentExchangeCode.value = e.detail.current;
    exchangeData.value.code = exchangeData.value.list[currentCode.value].code;
    exchangeData.value.code_expire_time = exchangeData.value.list[currentCode.value].code_expire_time;
};

onLoad((option: any) => {
    if (option.order_no) {
        orderNo.value = option.order_no;
        orderDetailFn(orderNo.value);
        // #ifdef MP
        nextTick(() => {
            if (wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
        })
        // #endif
    } else {
        let parameter = {
            url: '/addon/pintuan/pages/order/list',
            title: '缺少订单id'
        };
        goback(parameter)
    }
});

const visibleImages = ref([]);
let isAnimating1 = ref(false);

  // 获取下一张要显示的图片
  const getNextImage = () => {
  const lastId = visibleImages.value.length > 0 ? visibleImages.value[visibleImages.value.length - 1].id : 0;
  if (lastId === 0) return  detail.value?.group_info?.member_list[0];

  const lastImageIndexInAll =  detail.value?.group_info?.member_list.findIndex(img => img.id === lastId);
  const nextImageIndex = (lastImageIndexInAll + 1) %  detail.value?.group_info?.member_list.length;
  return  detail.value?.group_info?.member_list[nextImageIndex];
};

  let intervalId: NodeJS.Timeout | null = null;

const pt_stare = ref('');
const group_info = ref<any>({})
const orderDetailFn = (order_no: any) => {
    loading.value = true;
    getPintuanOrderInfo(order_no).then((res: any) => {
        detail.value = res.data.order_info
        detail.value.order_detail = res.data.order_detail
        group_info.value = res.data.group_info
        detail.value.goods_info = res.data.goods_info
        detail.value = { ...res.data.order_info, ...res.data }
        pt_stare.value = res.data.group_info?.status
        if (detail.value.delivery_type == 'verify') {
            getGoodsVerifyCodeFn(detail.value)
        }
        delivery_type.value = detail.value.delivery_type
        exchangeData.value.list = detail.value.code_list;
        if (JSON.stringify(res.data) === '[]') {
            let parameter = {
                url: '/addon/pintuan/pages/order/list',
                title: '暂无订单信息'
            };

            goback(parameter)
        }

        sendMessageTitle.value = detail.value.sku_snapshot.goods.title;
        sendMessageImg.value = img(detail.value.sku_snapshot.goods.cover_thumb_mid || '')
        loading.value = false;

        // 如果是拼团中状态，启动倒计时
        if (res.data.group_info?.status == 'process') {
            startCountdown();
        }

        // 分享 - start
        let share: any = {
            title: '',
            desc: '',
            url: detail.value.goods_info?.cover || "",
            // 新增：动态生成跳转地址（根据环境拼接完整路径）
            link: '', // H5 跳转链接（带域名）
            path: ''  // 小程序跳转路径（路由格式）
        };
        let basePath = ''
        if (pt_stare.value == 'process') {
            share.title = res.data.share_config?.group?.title || config.value.share_config.common.common_title || detail.value.goods_info?.title;
            share.desc = res.data.share_config?.group?.desc || config.value.share_config.common.common_desc || '';
            // 生成基础路径（目标页面 + 参数）
            basePath = `addon/pintuan/pages/goods/detail?pintuan_id=${ detail.value.pintuan_id }&group_id=${ detail.value.group_id }`;
        } else {
            share.title = res.data.share_config?.normal?.title || config.value.share_config.common.common_title || detail.value.goods_info?.title;
            share.desc = res.data.share_config?.normal?.desc || config.value.share_config.common.common_desc || '';
            basePath = `addon/pintuan/pages/goods/detail?pintuan_id=${ detail.value.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.pintuan_id;
                    posterParam.group_id = detail.value.group_id;
                    if (userInfo.value && userInfo.value.member_id) posterParam.member_id = userInfo.value.member_id;
                    sharePosterRef.value.loadPoster();
                }
            }, 400)
        })

        if(detail.value.group_info && Object.keys(detail.value.group_info).length) {
            // 初始化队列，填充前5张图片，并设置初始状态
            visibleImages.value = detail.value.group_info.member_list.slice(0, 4).map(img => ({
                ...img,
                imgstatus: 'visible'
            }));
            if (detail.value?.group_info?.member_list.length <= 4) {
                return;
            }
            intervalId = setInterval(async () => {
                if (isAnimating1.value) return;
                isAnimating1.value = true;

                // 1. 标记最右侧（数组末尾）的图片为“离开中”
                if (visibleImages.value.length > 0) {
                    visibleImages.value[visibleImages.value.length - 1].imgstatus = 'leaving';
                }

                // 2. 在最左侧（数组开头）添加一个新图片，状态为“进入中”
                const newImage = getNextImage();
                visibleImages.value.unshift({ ...newImage, imgstatus: 'entering' });

                // 3. 等待DOM更新后，通过一个微小延迟来触发进入动画
                await nextTick();
                // ==== 关键修复 ====
                // 我们使用一个短暂的 setTimeout 来确保浏览器有时间渲染初始的 'entering' 状态。
                // 如果没有这个延迟，状态变化太快，浏览器可能会跳过动画直接渲染最终的 'visible' 状态。
                setTimeout(() => {
                    if (visibleImages.value.length > 0 && visibleImages.value[0].imgstatus === 'entering') {
                        visibleImages.value[0].imgstatus = 'visible';
                    }
                }, 300); // 50毫秒的延迟对于人眼是无感的，但足以让渲染引擎准备好动画。


                // 4. 等待动画结束后（1秒），从数组中移除已“离开”的图片
                setTimeout(() => {
                    visibleImages.value = visibleImages.value.filter(img => img.imgstatus !== 'leaving');
                    isAnimating1.value = false;
                }, 500); // 动画时长

            }, 2000);
        }

    }).catch(() => {
        loading.value = false;
        let parameter = {
            url: '/addon/pintuan/pages/order/list',
            title: '暂无订单信息'
        };
        goback(parameter)
    })
}

//关闭订单
const close = (item: any) => {
    uni.showModal({
        title: '提示',
        content: '您确定要关闭该订单吗？',
        confirmColor: useConfigStore().themeColor['--primary-color'],
        success: res => {
            if (res.confirm) {
                pintuanOrderClose(item.order_no).then((data) => {
                    orderDetailFn(item.order_no);
                })
            }
        }
    })
}

const goodsEvent = (data: any) => {
    redirect({
        url: '/addon/pintuan/pages/goods/detail',
        param: {
            pintuan_id: data.pintuan_id,
            // group_id: data.group_id
        }
    })
}

const payRef = ref(null)
const orderBtnFn = (type = '') => {
    if (type == 'pay')
        payFn(detail.value);
    else if (type == 'close') {
        close(detail.value);
    } else if (type == 'index') {
        redirect({
            url: '/addon/pintuan/pages/index',
            mode: 'reLaunch'
        });
    }else if(type=='source'){
        redirect({
            url: detail.value.detail_page,
        })
    }
}

const payFn = (data: any) => {
    checkPintuanGroupApi({
        group_id: data.group_id,
        pintuan_id: data.pintuan_id,
        join_type: data.pintuan_snapshot.join_type,
        order_no: data.order_no
    }).then((res: any) => {
        if(res.data.error){
            uni.showToast({
                icon: 'none',
                title: res.data.error,
            })
        }else{
            payRef.value?.open(data.order_type, data.id, `/addon/pintuan/pages/order/detail?order_no=${ data.order_no }`);
        }
    })
}

const applyRefund = (detail:any) => {
    redirect({
        url: detail.refund_page,
    })

}

const isShowDelivery = computed(() => {
    if(detail.value.is_single_buy){
        return true
    }else{
        if(detail.value.group_is_success){
            return true
        }else{
            return false
        }
    }
})

// 商品表单信息
const goodsDiyFormData = ref([]);
const getGoodsDiyFormDetailCallback = (data: any) => {
    goodsDiyFormData.value = data;
}
const orderBtnFnpage =(type: string)=>{
        if(type=='link'){
            diyRedirect(detail.value.delivery_type_config.custome_link);
        }else if(type=='page'){
            redirect({
                url: detail.value.delivery_type_config.custome_pages.url,
            })
        }
    }
  const delivery_type = ref('')
  // 去核销
  let verificationData = ref<{
    verify_code_barcode?: string;
    verify_code_qrcode?: string;
    list?: any[];
  }>({
    verify_code_barcode: '',
    verify_code_qrcode: ''
  })

  let verificationShow = ref(false)

const getGoodsVerifyCodeFn = (data: any) => {
    getGoodsVerifyCode({
        type:'pintuanGoods',
        need_barcode: 1,
        data:{
        order_id: detail.value.id,
        pintuan_id: detail.value.pintuan_id,

        }

    }).then((res: any) => {
        verificationData.value.list = res.data; // 将核销码列表赋值给 verificationData.value.list
        if (res.data && res.data.length > 0) {
            verificationData.value.code = res.data[0].code;
            verificationData.value.qrcode = res.data[0].qrcode;
            verificationData.value.barcode = res.data[0].barcode;
         }
    })
}
const previewImage = (url) => {
    uni.previewImage({
        urls: [url],
    })
}
// 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 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 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 handleCountdownFinish = () => {
    // 3秒后重新请求数据
    setTimeout(() => {
        orderDetailFn(orderNo.value);
    }, 3000);
};
// 格式化时间显示（补零）
const formatTime = (time: number): string => {
    return time < 10 ? `0${time}` : `${time}`;
};

// 获取倒计时数据
const getTimeData = (detail: any) => {
    detail.group_info = group_info.value
    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 };
    }
};
onMounted(() => {
    // 启动倒计时

})

// 组件卸载时清理定时器
onUnmounted(() => {
    if (countdownTimer) {
        clearInterval(countdownTimer);
        countdownTimer = null;
    }
    if (intervalId) {
      clearInterval(intervalId);
    }
});

const toBuy = (type: number) => {
     usePintuanGoodsDetailStore().removePartGoodsDetail(['group_id', 'join_type','group_id_two'])
    redirect({ url: '/addon/pintuan/pages/goods/detail', param: { pintuan_id: detail.value.pintuan_id, isbuy: type } })
}

/************* 分享海报-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.pintuan_id;
    copyUrlParam.value += '&group_id=' + detail.value.group_id;
}

const openShareFn = ()=>{
    posterParam.pintuan_id = detail.value.pintuan_id;
    posterParam.group_id = detail.value.group_id;
    if (userInfo.value && userInfo.value.member_id) posterParam.member_id = userInfo.value.member_id;
	sharePosterRef.value.openShare()
}
/************* 分享海报-end **************/
</script>
<style lang="scss" scoped>
.order-goods-item:nth-child(1) {
    margin-top: 0;
}

.text-color {
    color: $u-primary;
}

.bg-color {
    background-color: $u-primary;
}

.bg-linear {
    background: linear-gradient(90deg, #FF0000 0%, #FF7800 100%);
}

.tab-bar-placeholder {
    padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
}

:deep(.u-image__error) {
    background-color: transparent !important;
}

</style>
<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;
}
.goods-divider{
    background: linear-gradient(to right, var(--separation-line-color) 50%, transparent 50%);
    background-size: 40rpx 2rpx; /* 调整这里的数值来控制虚线间距，第一个值控制虚线段和间隔的总长度 */
}
    .carousel-wrapper {
    display: flex;
    overflow: hidden;
    justify-content: flex-end;
    position: relative;
    // width: calc(88rpx * 3 + 70rpx ); /* 5张图片宽度 + 4个间距 */
    height: 100rpx;
}

.carousel-item {
    width: 88rpx;
    height: 88rpx;
    flex-shrink: 0;
    border-radius: 50%;
    margin-left: 30rpx;
    // 延长过渡时间至1.2秒，让滑动更从容
    transition: all 1s cubic-bezier(0.2, 1, 0.2, 1); // 缓动曲线增强顺滑感
    transform-style: preserve-3d; // 增强动画稳定性

    // 进入动画：从左侧小尺寸渐入
    &.entering {
        transform: scale(0.5); // 轻微左移增强"滑入"感
        opacity: 0;
        transform-origin: left center;
    }

    // 可见状态：稳定显示
    &.visible {
        transform: scale(0.99);
        opacity: 1;
    }

    // 离开动画：核心优化
    &.leaving {
        // 宽度从88rpx收缩至0（保持顺滑过渡）
        width: 0;
        // 保留高度避免垂直跳动
        height: 88rpx;
        // 间距同步收缩
        margin-left: -3rpx;
        // 不隐藏透明度，而是通过位移和宽度实现"滑出"
        opacity: 0;
        // 向右轻微位移，增强"滑出"视觉
        transform: scale(0) translateX(10rpx);
        transform-origin: right center;
    }
}
.carousel-item.leader-border {
    border: 2rpx solid #FF0000 !important;
}
.carousel-item:first-child {
    margin-left: 0;
}

.carousel-image {
    width: 100%;
    height: 100%;
    display: block;
}
</style>
