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

<template>
    <view class="pb-254rpx">
        <view>
            <navbar :title="title" custom-class='!bg-[#F6F7F8]'></navbar>
        </view>

        <view class="text-[#909399] text-26rpx leading-36rpx mx-102rpx mb-40rpx">
            <!-- <text v-if="orderStatus === OrderStatus.ToUse">请在2025.12.31(含)前使用</text> -->
            <text v-if="orderStatus === TeaRoomPackageOrderStatus.Used">感谢购买，期待再次光临！</text>
        </view>

        <view class="">
            <!-- 待使用下显示 -->
            <view class="mx-30rpx" v-if="orderStatus === TeaRoomPackageOrderStatus.ToUse">
                <view class="bg-white rounded-16rpx p-30rpx">
                    <view class="flex items-center">
                        <view class="mr-30rpx">
                            <wd-img width="190rpx" height="190rpx" :src="order.group.img" mode="scaleToFill"></wd-img>
                        </view>
                        <view class="flex-1">
                            <view class="flex justify-between items-center" @click="OrderDetail.handleToCombo">
                                <view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-362rpx line-1">{{ order.group.title }}</view>
                                <wd-icon name="chevron-right" size="32rpx"></wd-icon>
                            </view>
                            <view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
                                <view>{{ order.group.hour }}小时</view>
                                <view>x1</view>
                            </view>
                            <view class="text-[#606266] text-right mt-26rpx">
                                <text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
                                <text class="tetx-32rpx leading-36rpx">￥{{ order.order_amount }}</text>
                                <wd-icon name="chevron-right" size="32rpx"></wd-icon>
                            </view>
                        </view>
                    </view>

                    <!-- 平台团购直营店待使用 -->
                    <view class="mt-30rpx font-500 leading-48rpx">
                        <!-- <view class="text-26rpx text-[#606266]">有效期：2025.04.04-2025.12.31</view> -->
                        <view class="text-28rpx text-[#303133] mt-18rpx">
                            <text class="mr-20rpx">券码 1052 4258 5654 125</text>
                            <text class="text-[#4C9F44]">复制</text>
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 已使用下显示 -->
            <view class="mx-30rpx coupon-bg" v-if="orderStatus === TeaRoomPackageOrderStatus.Used">
                <view class="flex items-center px-30rpx pt-30rpx pb-40rpx">
                    <view class="mr-30rpx">
                        <wd-img width="190rpx" height="190rpx" :src="`${OSS}images/home/home_image5.png`" mode="scaleToFill"></wd-img>
                    </view>
                    <view class="flex-1">
                        <view class="flex justify-between items-center" @click="OrderDetail.handleToRoom">
                            <view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx line-1 w-300rpx">这个是包间的名称</view>
                            <wd-icon name="chevron-right" size="32rpx"></wd-icon>
                            <view class="text-26rpx leading-36rpx text-[#909399]">￥324</view>
                        </view>
                        <view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
                            <view>3小时</view>
                            <view>x1</view>
                        </view>
                        <view class="text-[#606266] text-right mt-26rpx">
                            <text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
                            <text class="tetx-32rpx leading-36rpx">￥29.32</text>
                            <wd-icon name="chevron-right" size="32rpx"></wd-icon>
                        </view>
                    </view>
                </view>

                <view class="px-30rpx mt-28rpx pb-48rpx">
                    <view class="text-30rpx leading-42rpx text-[#303133]">预约信息</view>
                    <view class="font-500 text-26rpx leading-48rpx text-[#606266] mt-20rpx">
                        <view class="mb-20rpx">预约时间：2025-03-18  09:00-12:00</view>
                        <view>预约时长：3小时</view>
                    </view>
                </view>
            </view>
        </view>

       
        <!-- 适用门店 -->
        <view class="">
            <use-store :store="order.store"></use-store>
        </view>

        <!-- 订单信息 -->
        <view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx">
            <view class="text-[#303133] text-32rpx leading-44rpx">订单信息</view>
            <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                <view>订单编号</view>
                <view>
                    <text>{{ order.order_sn }}</text>
                    <wd-divider vertical />
                    <text class="text-[#4C9F44]" @click="copy(order.order_sn)">复制</text>
                </view>
            </view>
            <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                <view>交易方式</view>
                <view>{{ order.pay_way_title }}</view>
            </view>
            <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                <view>创建时间</view>
                <view>{{ order.dtime }}</view>
            </view>
            <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                <view>付款时间</view>
                <view>{{ order.pay_dtime }}</view>
            </view>
        </view>

        <!-- 操作按钮 -->
        <view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx">
            <view class="mt-34rpx">
                <!-- 待使用 -->
                <view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderStatus === TeaRoomPackageOrderStatus.ToUse">
                    <view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="OrderDetail.handleToRefund">申请退款</view>
                    <view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="OrderDetail.handleUsePackage">立即预定</view>
                </view>

                <!-- 已使用 -->
                <view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderStatus === TeaRoomPackageOrderStatus.Used">
                    <view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">再次预定</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
    import { OrderSource, OrderStatus, OrderStatusTitle, TeaRoomPackageOrderStatusTextValue, TeaRoomPackageOrderStatus } from '@/utils/order'
    import { getTeaRoomPackageOrderDetail } from '@/api/tea-room'
    import type { ITeaRoomPackageOrderDetailsResult } from '@/api/types/tea-room'
    import { toast } from '@/utils/toast'
    import { handleToTeaRoomStoreHooks } from '@/hooks/useOrder'
    import { router, copy } from '@/utils/tools'
    import { ReserveServiceCategory } from '@/utils/order'
    import UseStore from '@/components/UseStore.vue'
  
	const OSS = inject('OSS')

    const title = ref<string>('')
    const type = ref<string>('') // 订单类型：团购、抖音等

    // 订单
    const orderId = ref<number>(0)
    const orderStatus = ref<number>(0) // 订单状态：待使用、退款等
    const order = ref<ITeaRoomPackageOrderDetailsResult>({
        pay: 0,
        pay_way_title: '',
        order_amount: '',
        order_sn: '',
        order_status: 0,
        dtime: '',
        pay_dtime: '',
        group: {
            id: 0,
            title: '',
            img: '',
            hour: '',
        },
        store: {
            id: 0,
            address: '',
            latitude: '',
            longitude: '',
            name: '',
            image: '',
            contact_phone: '',
            store_id: 0,
            distance: '',
            operation_type: 1
        }
    })

    onLoad((args) => {
        title.value = OrderStatusTitle[OrderSource.Combo][args.orderStatus] || '订单详情'
        
        orderId.value = args.orderId
        // 获取订单详情
        OrderDetail.handleInit()

        type.value = args.type
        orderStatus.value = args.orderStatus
    })

    const OrderDetail = {
        /**
         * 获取订单详情
         */
        handleInit: async () => {
            const res = await getTeaRoomPackageOrderDetail({
                id: orderId.value,
                latitude: uni.getStorageSync('latitude'), 
                longitude: uni.getStorageSync('longitude')
            })
            order.value = res.details

            // order.value = res.details
            // console.log("🚀 ~ order.value :", order.value )
            title.value = TeaRoomPackageOrderStatusTextValue[order.value.order_status].title || '订单详情'
            orderStatus.value = order.value.order_status
        },

        /**
         * 跳转到套餐详情
         */
        handleToCombo: () => {
            router.navigateTo(`/bundle/tea-room/detail?teaRoomId=${order.value.store.id}&id=${order.value.group.id}&type=${ReserveServiceCategory.GroupBuying}`)
        },

        /**
         * 跳转到包间详情
         */
        handleToRoom: () => {
            handleToTeaRoomStoreHooks(order.value.store.id, order.value.store.store_id)
        },

        /**
         * 处理导航逻辑
         */
        handleLocation: () => {
            uni.openLocation({
                latitude: Number(order.value.store.latitude),
                longitude: Number(order.value.store.longitude),
                name: order.value.store.name,
                address: order.value.store.address,
                scale: 18
            })
        },

        /**
         * 处理拨打电话逻辑
         */
        handleCallPhone: () => {
            uni.makePhoneCall({
                phoneNumber: order.value.store.contact_phone
            })
        },

        /**
         * 跳转到申请退款页面
         */
        handleToRefund: () => {
            router.navigateTo(`/bundle/order/after-sales/after-sales?orderId=${orderId.value}&type=${OrderSource.Combo}&orderStatus=${OrderStatus.AfterSaleApply}`)
        },

        /**
         * 跳转到立即预定页面(选择茶室)
         */
        handleToChooseTeaRoom: () => {
            router.navigateTo(`/bundle/tea-room/choose-room`)
        },

        /**
         * 使用套餐
         */
        handleUsePackage: () => {
            router.navigateTo(`/bundle/tea-room/choose-room?groupCouponId=${order.value.group.id}&teaRoomId=${order.value.store.id}`)
        },
    }
</script>


<style lang="scss">
    page {
	    background-color: $cz-page-background;
    }

    .coupon-bg {
        background-image: url(#{$OSS}images/order/order_image2.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
</style>
