<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 v-if="detail.status_name" class="pl-[40rpx] pr-[35rpx] pb-[100rpx]" :style="headBgStyle">
                    <!-- #ifdef MP-WEIXIN -->
                    <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/seckill/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 > 0">请在{{detail.delivery_type_config.verify_expire_time_format}}前到店核销</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 == 1 && 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 == 0" class="w-[160rpx] h-[140rpx]"
                               :src="img('addon/seckill/detail/payment.png')" mode="aspectFit" />
                            <image v-if="detail.status == 2" class="w-[160rpx] h-[140rpx]"
                                :src="img('addon/seckill/detail/complete.png')" mode="aspectFit" />
                                <image v-if="detail.status == 1" class="w-[160rpx] h-[140rpx]"
                                :src="img('addon/seckill/detail/complete.png')" mode="aspectFit" />
                            <image v-if="detail.status == -1" class="w-[160rpx] h-[140rpx]"
                                :src="img('addon/seckill/detail/close.png')" mode="aspectFit" />
                            <image class="w-[8rpx] h-[30rpx] mb-[20rpx]"
                                :src="img('addon/seckill/detail/head_002.png')" mode="aspectFit" />
                        </view>
                    </view>
                </view>
                <view class="sidebar-margin mt-[-86rpx] card-template"  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 }">
                    <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.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 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.goods_name }}</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?.price).toFixed(2).split('.')[0]}}.</text>
                                            <text class="text-[#333] text-[20rpx] price-font ">{{parseFloat(detail.sku?.price).toFixed(2).split('.')[1]}}</text>
                                        </view>
                                    </view>
                                    <view  class="flex my-[10rpx] ">
                                        <view v-if="detail.sku_name" class="text-[22rpx] text-[var(--text-color-light9)] truncate max-w-[400rpx] leading-[28rpx]">{{ detail.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="price-font">
                                        <view class="flex items-end">
                                            <template v-if="detail.sku">
                                                <view>
                                                    <text class="text-[40rpx] font-200">{{ parseFloat(detail.sku?.seckill_price).toFixed(2) }}</text>
                                                    <text class="text-[32rpx] ml-[4rpx]">元</text>
                                                </view>
                                                <view class="flex items-center ml-[10rpx]">
                                                    <text class="text-[28rpx] text-[var(--text-color-light9)] line-through">{{ parseFloat(detail.sku?.price).toFixed(2) }}</text>
                                                </view>                                          
                                            </template>
                                        </view>
                                    </view>
                                     -->
                                    <view class="flex w-[100%] justify-between items-center"> 
                                        <view class="text-[24rpx] leading-1 text-[#999999]" v-if="detail.status > 0 && (delivery_type=='verify')&& detail.delivery_type_config.verify_expire_time_format "> {{ detail.delivery_type_config.verify_expire_time_format == 0 ? '永久有效' : detail.delivery_type_config.verify_expire_time_format + ' 前有效' }}</view>
                                        <view class="text-[24rpx] leading-1 text-[#999999]" v-if="detail.status > 0 && (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 class="text-[24rpx] text-[#333] ml-[auto]">实付：
                                            <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>
                                         </view>
                                    </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.goods_name }}</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?.price).toFixed(2).split('.')[0]}}.</text>
                                            <text class="text-[#333] text-[20rpx] price-font ">{{parseFloat(detail.sku?.price).toFixed(2).split('.')[1]}}</text>
                                        </view>
                                    </view>
                                    <view  class="flex  my-[10rpx]">
                                        <view v-if="detail.sku_name" class="text-[22rpx] text-[var(--text-color-light9)] truncate max-w-[400rpx] leading-[28rpx]">{{ detail.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="price-font">
                                        <view class="flex items-end">
                                            <template v-if="detail.sku">
                                                <view>
                                                    <text class="text-[40rpx] font-200">{{ parseFloat(detail.sku?.seckill_price).toFixed(2) }}</text>
                                                    <text class="text-[32rpx] ml-[4rpx]">元</text>
                                                </view>
                                                <view class="flex items-center ml-[10rpx]">
                                                    <text class="text-[28rpx] text-[var(--text-color-light9)] line-through">{{ parseFloat(detail.sku?.price).toFixed(2) }}</text>
                                                </view>                                          
                                            </template>
                                        </view>
                                    </view>
                                     -->
                                    <view class="flex w-[100%] justify-between items-center">
                                        <!-- <view class="text-[24rpx] text-[#999999]"> {{ detail.delivery_type_config.verify_expire_time_format }} 前有效</view> -->
                                        <!-- <view class="text-[24rpx] text-[#333] ml-[auto]">实付：
                                            <text class="text-[#EF000C] text-[20rpx] price-font ">￥</text>
                                             <text class="text-[#EF000C] text-[32rpx] price-font ">{{parseFloat(detail.sku?.seckill_price).toFixed(2).split('.')[0]}}.</text>
                                            <text class="text-[#EF000C] text-[22rpx] price-font ">{{parseFloat(detail.sku?.seckill_price).toFixed(2).split('.')[1]}}</text>
                                         </view> -->
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="flex justify-end w-[100%] mt-[30rpx] mb-[20rpx]" v-if="detail.status != 0 && detail.status != -1 && detail.source=='seckill' && detail.is_enable_refund != 1  ">
                            <view v-if="detail.refund_status != 0 && detail.refund_status != -1 && detail.refund_status != 4"
                                  class="order-grey-hollow-btn"
                                  @click="redirect({ url: '/addon/seckill/pages/refund/detail', param: { order_id : detail.id } })">查看退款</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 != 0 && detail.refund_status != -1 && detail.source!='seckill' && detail.is_enable_refund != 1 && detail.source_order_id !=0">   
                            <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 > 0 && detail.status ==2 ">
                    <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.code_expire_time==0?'永久有效':item.code_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 > 0 && detail.status !=2 && isShowVerification">
                    <view class="py-[30rpx] flex justify-between">
                        <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/seckill/pages/order/card_record', param: { order_id : detail.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">
                        <!-- {{ verificationData.barcode }} -->
                        <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="verificationData.barcode"
                                            mode="widthFix"
                                            class="w-[500rpx] !h-[60rpx]"
                                            @click="previewImage(verificationData.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" class=" card-template-item justify-between">
                        <view class="text-[28rpx]">{{ t('payTime') }}</view>
                        <view class="text-[28rpx]">{{ detail.pay.pay_time }}</view>
                    </view>
                    <view v-if="detail.time" class=" card-template-item justify-between">
                        <view class="text-[28rpx]">秒杀场次</view>
                        <view class="text-[28rpx]">{{ detail.time.name }}</view>
                    </view>
                    <view v-if="detail.third_name" class=" card-template-item justify-between">
                        <view class="text-[28rpx]">商品来源</view>
                        <view class="text-[28rpx]">{{ detail.third_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>
                  
                    <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.order_money" class="text-[28rpx]">￥{{ 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.link && detail.status >0" class="min-w-[180rpx] box-border text-[24rpx]  h-[60rpx] flex-center text-center border-[2rpx] border-solid border-[#ccc] rounded-full ml-[20rpx] text-[var(--text-color-light3)]"
                              >
                              查看链接
                        </view>
                        <view @click="orderBtnFnpage('page')" v-if="delivery_type=='page' && detail.delivery_type_config && detail.delivery_type_config.page && detail.status >0" class="min-w-[180rpx] box-border text-[24rpx]  h-[60rpx] flex-center text-center border-[2rpx] border-solid border-[#ccc] rounded-full ml-[20rpx] text-[var(--text-color-light3)]"
                              >
                              查看页面
                        </view> 
                        <view class="min-w-[180rpx] box-border text-[24rpx]  h-[60rpx] flex-center text-center border-[2rpx] border-solid border-[#ccc] rounded-full ml-[20rpx] text-[var(--text-color-light3)]" v-if="detail.status == 0" @click="orderBtnFn('close')">{{ t('orderClose') }}</view>
                        <view class="min-w-[180rpx] box-border  text-[24rpx] h-[60rpx] flex-center text-center text-[#fff] primary-btn-bg rounded-full ml-[20rpx]" v-if="detail.status == 0" @click="orderBtnFn('pay')">{{ t('topay') }}</view>
                        <template v-if="detail.status != 0 && detail.status != -1 && detail.source!='seckill' && detail.source_order_id !=0">
                            <view class="min-w-[180rpx] box-border text-[24rpx]  h-[60rpx] flex-center text-center border-[2rpx] border-solid border-[#ccc] rounded-full ml-[20rpx] text-[var(--text-color-light3)]" v-if="detail.third_desc" @click="orderBtnFn('source')">{{ detail.third_desc.name }}</view>
                        </template>
                    </view>
                </view>
            </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>

        <loading-page :loading="loading"></loading-page>

        <!-- #ifdef MP-WEIXIN -->
        <!-- 小程序隐私协议 -->
        <wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
        <!-- #endif -->
    </view>
</template>

<script setup lang="ts">
import { ref, nextTick ,computed} from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import { t } from '@/locale'
import { img, redirect, copy, goback, diyRedirect } from '@/utils/common';
import { getSeckillOrderDetail,seckillOrderClose,getSeckillGoodsVerifyCode,getSeckillGoodsBarcode} from '@/addon/seckill/api/order';
import useConfigStore from "@/stores/config";
import { topTabar } from '@/utils/topTabbar';
import diyFormDetail from '@/addon/components/diy-form-detail/index.vue'

/********* 自定义头部 - start ***********/
const topTabarObj = topTabar()
let topTabbarData = topTabarObj.setTopTabbarParam({ title: '订单详情' })
/********* 自定义头部 - end ***********/

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

const exchangeStyle = computed(() => ({
  'background-image': `url(${img('addon/seckill/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;
    getSeckillGoodsBarcodeFn(detail.value);
};

const isShowVerification = computed(() => {
    if(detail.value.delivery_type_config.verify_expire_time==0){
        return true;
    }
    const currentTime = new Date().getTime(); // 当前时间
    const expireTime = detail.value.delivery_type_config.verify_expire_time * 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_id) {
        orderId.value = option.order_id;
        orderDetailFn(orderId.value);
        // #ifdef MP
        nextTick(() => {
            if (wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
        })
        // #endif
    } else {
        let parameter = {
            url: '/addon/seckill/pages/order/list',
            title: '缺少订单id'
        };
        goback(parameter)
    }
});

const orderDetailFn = (id: any) => {
    loading.value = true;
    getSeckillOrderDetail(id).then((res: any) => {
        detail.value = res.data;
        if(detail.value.delivery_type  =='verify'){
            getSeckillGoodsVerifyCodeFn(detail.value)
        }
        delivery_type.value = detail.value.delivery_type  
        exchangeData.value.list = detail.value.delivery_type_config.code_list;
        if (JSON.stringify(res.data) === '[]') {
            let parameter = {
                url: '/addon/seckill/pages/order/list',
                title: '暂无订单信息'
            };
            goback(parameter)
        }

        sendMessageTitle.value = detail.value.goods_name
        sendMessageImg.value = img(detail.value.goods.goods_cover_thumb_mid || '')
        loading.value = false;
    }).catch(() => {
        loading.value = false;
        let parameter = {
            url: '/addon/seckill/pages/order/list',
            title: '暂无订单信息'
        };
        goback(parameter)
    })
}

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

const goodsEvent = (data: any) => {
    redirect({
        url: '/addon/seckill/pages/goods/detail',
        param: {
            sku_id: data.sku_id,
            time_id: data.time_id,
            seckill_id: data.seckill_id
        }
    })
}

const payRef = ref(null)
const orderBtnFn = (type = '') => {
    if (type == 'pay')
        payRef.value?.open(detail.value.order_type, detail.value.id, `/addon/seckill/pages/order/detail?order_id=${ detail.value.id }`);
    else if (type == 'close') {
        close(detail.value);
    } else if (type == 'index') {
        redirect({
            url: '/addon/seckill/pages/index',
            mode: 'reLaunch'
        });
    }else if(type=='source'){
        redirect({
            url: detail.value.third_desc.url,
        })
    }
}

const applyRefund = (detail:any) => {
    if(detail.source =='seckill'){
        redirect({
            url: '/addon/seckill/pages/refund/apply',
            param: {
                order_id: detail.id
            }
        })
    }else{
        redirect({
            url: detail.third_order_refund_page,
        })
    }
 
}

// 商品表单信息
const goodsDiyFormData = ref([]);
const getGoodsDiyFormDetailCallback = (data: any) => {
    goodsDiyFormData.value = data;
}
const orderBtnFnpage =(type: string)=>{
        if(type=='link'){
            diyRedirect(detail.value.delivery_type_config.link);
        }else if(type=='page'){
            redirect({
                url: detail.value.delivery_type_config.page.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 verificationFn = (data: any) => {
//     verificationShow.value = true
//     // verificationData.value = data
//     verificationData.value = {
//         verify_code_barcode: img('addon/seckill/detail/verify_code_barcode.jpg'),
//         verify_code_qrcode: img('addon/seckill/detail/verify_code_qrcode.jpg')
//     }
//   }
const getSeckillGoodsVerifyCodeFn = (data: any) => {
    getSeckillGoodsVerifyCode({
        type:'seckillGoods',
        data:{
        order_id: detail.value.id,
        seckill_id: detail.value.seckill_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;
            getSeckillGoodsBarcodeFn(detail.value);
        }
        console.log('getSeckillGoodsVerifyCodeFn response:', res.data);
    })
}
const getSeckillGoodsBarcodeFn = (data: any) => {
    console.log(data,'data');
    getSeckillGoodsBarcode({
        order_id: detail.value.id,
        seckill_id: detail.value.seckill_id,
        code: verificationData.value.code
    }).then((res: any) => {
        // console.log('getSeckillGoodsBarcodeFn response:', res.data);
        verificationData.value.barcode = res.data.barcode
    })
}
const previewImage = (url) => {
    uni.previewImage({
        urls: [url],
    })
}
</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>
