<route lang="jsonc" type="page">{
	"layout": "default",
	"style": {
        "navigationStyle": "custom",
		"navigationBarBackgroundColor": "#fff"
	}
}</route>

<template>
	<view>
        <view>
            <navbar title="订单详情" custom-class="!bg-[transparent]"></navbar>
        </view>

        <view class="mt-38rpx">
            <view class="">
                <view class="mx-48rpx flex items-center">
                    <view class="rounded-4rpx w-60rpx text-center  text-[#40AE36] border-2rpx border-solid border-[#40AE36] text-22rpx pb-4rpx" v-if="isGroupBuy">团购</view>
                    <view class="rounded-4rpx w-60rpx text-center  text-[#FF5951] border-2rpx border-solid border-[#FF5951] text-22rpx pb-4rpx" v-if="isDirectSale">直营</view>
                        <template v-if="isRecharge">
                            <view class="w-600rpx line-2 ml-20rpx font-bold text-30rpx text-[#303133] leading-42rpx text-center">
                                门店余额充值
                            </view>
                        </template>
                        <template v-else>
                            <view class="w-600rpx line-2 ml-20rpx font-bold text-30rpx text-[#303133] leading-42rpx text-left">
                                【{{ bill?.room?.title }}】{{ bill?.order?.group?.title || '' }}
                            </view>
                        </template>
                </view>
            </view>

            <view class="mt-30rpx text-40rpx text-[#303133] leading-56rpx text-center">
                <text class="font-bold" v-if="bill.change_type == 1 || bill.change_type == 2 || bill.change_type == 4 || bill.change_type == 9">+</text>
                <text class="font-bold" v-if="bill.change_type == 3 || bill.change_type == 5">-</text>
                ￥{{ bill.amount }}
            </view>

            <!-- <view class="flex items-center flex items-center justify-center mt-16rpx">
                <wd-img width="28rpx" height="28rpx" :src="`${OSS}images/store/finance/image2.png`" mode="aspectFit" />
                <view class="text-26rpx text-[#606266] leading-36rpx ml-12rpx" v-if="bill.change_type == 1">预定成功</view>
                <view class="text-26rpx text-[#606266] leading-36rpx ml-12rpx" v-if="bill.change_type == 2">续订成功</view>
                <view class="text-26rpx text-[#606266] leading-36rpx ml-12rpx" v-if="bill.change_type == 3">提现成功</view>
                <view class="text-26rpx text-[#606266] leading-36rpx ml-12rpx" v-if="bill.change_type == 4">核销成功</view>
                <view class="text-26rpx text-[#606266] leading-36rpx ml-12rpx" v-if="bill.change_type == 5">退款成功</view>
            </view> -->
            <view class="flex items-center flex items-center justify-center mt-16rpx">
                <wd-img width="28rpx" height="28rpx" :src="`${OSS}images/store/finance/image2.png`" mode="aspectFit" />
                <view class="text-26rpx text-[#606266] leading-36rpx ml-12rpx" v-if="isGroupBuy">核销成功</view>
                <view class="text-26rpx text-[#606266] leading-36rpx ml-12rpx" v-if="isDirectSale">结算成功</view>
            </view>

            <view class="mx-28rpx mt-72rpx">
                <!-- 这一块内容是在直营店才显示 -->
                <view v-if="isDirectSale">
                    <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                        <view>预定门店</view>
                        <view>{{ bill?.store?.name }}</view>
                    </view>

                    <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                        <view>预约时间</view>
                        <view>{{ bill?.order?.update_dtime }}</view>
                    </view>    
                    
                    <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                        <view>预约时长</view>
                        <view>{{ bill?.order?.hours }}小时</view>
                    </view>

                    <view class="mt-20rpx">
                        <wd-gap height="2rpx" bg-color="#E5E5E5"></wd-gap>
                    </view>
                </view>

                <view v-if="isRecharge">
                    <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                        <view>充值金额</view>
                        <view>￥{{ bill?.order?.recharge_price }}</view>
                    </view>

                    <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                        <view>赠送金额</view>
                        <view>￥{{ bill?.order?.gift_price }}</view>
                    </view>

                    <view class="mt-20rpx">
                        <wd-gap height="2rpx" bg-color="#E5E5E5"></wd-gap>
                    </view>
                </view>
                 

                <!-- 直营和团购都显示 -->
                <view>
                    <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                        <view>总收入</view>
                        <view>￥{{ bill?.order?.order_amount }}</view>
                    </view>

                    
                    <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx" v-if="bill.change_type != 9">
                        <view>优惠券</view>
                        <view>-￥{{ bill?.order?.coupon_price }}</view>
                    </view>

                    <view class="mt-20rpx">
                        <wd-gap height="2rpx" bg-color="#E5E5E5"></wd-gap>
                    </view>
                </view>

                <view>
                    <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                        <view>用户手机号</view>
                        <view>{{ bill?.order.mobile }}</view>
                    </view>        

                    <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                        <view>订单编号</view>
                        <view>
                            <text>{{ bill?.order?.order_sn }}</text>
                            <wd-divider vertical />
                            <text class="text-[#4C9F44]" @click="copy(bill?.order?.order_sn)">复制</text>
                        </view>
                    </view>

                    <!-- 直营显示 -->
                    <view v-if="isDirectSale" class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                        <view>交易方式</view>
                        <view>{{ bill?.order?.pay_way_title }}</view>
                    </view>

                    <!-- 充值的支付方式 -->
                    <view v-if="isRecharge" class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                        <view>支付方式</view>
                        <view>{{ bill?.order?.pay_way_title }}</view>
                    </view>
                    
                    <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                        <view>创建时间</view>
                        <view>{{ bill?.order?.dtime }}</view>
                    </view>        
                    
                    <!-- 团购显示 -->
                    <view v-if="isGroupBuy">
                        <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                            <view>验券时间</view>
                            <view>{{ bill?.order?.group?.yanquan_dtime }}</view>
                        </view>       
                            
                        <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                            <view>验券门店</view>
                            <view>{{ bill?.store?.name }}</view>
                        </view>        
                        
                        <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                            <view>券号</view>
                            <view>{{ bill?.order?.group?.qr_sn }}</view>
                        </view>        
                    </view>
     
                    <!-- 直营显示 -->
                    <view v-if="isDirectSale" class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                        <view>付款时间</view>
                        <view>{{ bill?.order?.dtime }}</view>
                    </view>

                    <!-- 充值 -->
                    <view v-if="isRecharge" class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                        <view>付款时间</view>
                        <view>{{ bill?.order?.pay_time }}</view>
                    </view>   
                </view>
            </view>
        </view>
	</view>
</template>


<script lang="ts" setup>
    import { toTimes, copy } from '@/utils/tools'
    import { getUserTransactionDetailsInfo } from '@/api/user'

	const OSS = inject('OSS')
    const bill = ref<any>({})

	onLoad(async (args) => {
        const id = Number(args.id) || 0
        if (id) {
            const res = await getUserTransactionDetailsInfo(id)
            bill.value = res.details
        }
	})

    // 团购
    const isGroupBuy = computed(() => {
        return bill.value.change_type === 4
    })

    // 直营
    const isDirectSale = computed(() => {
        return bill.value.change_type === 1 || bill.value.change_type === 2
    })

    // 充值
    const isRecharge = computed(() => {
        return bill.value.change_type === 9
    })
</script>
	
<style lang="scss">
    page {
        background-color: #fff;
    }
</style>
