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

<template>
    <view class="pb-40rpx">
		<view>  
			<navbar title="订单续订" custom-class='!bg-[#F6F7F8]'></navbar>
		</view>

        <view class="mt-38rpx">
            <mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="Renew.upCallback" :down="downOption" :up="upOption">
                <view class="bg-white rounded-16rpx p-30rpx mx-32rpx relative mb-20rpx" v-for="item in list" :key="item.id">
                    <view class="absolute top-0 right-0 bg-[#4C9F44] text-[#fff] w-160rpx h-64rpx leading-64rpx text-center xd" @click="selectRenewOrderId = item.id; showRenewTimePopup = true">
                        续单
                    </view>
                    <view class="flex items-center">
                        <view class="mr-28rpx">
                            <wd-img width="200rpx" height="200rpx" :src="item.img"></wd-img>
                        </view>
                        <view class="flex-1">
                            <view @click="ComboCard.handleToOrderDetail">
                                <view class="font-bold text-28rpx text-[#303133] leading-40rpx line-2 w-260rpx">{{ item.room_name }}</view>
                                <view class="font-400 leading-36rpx text-26rpx text-[#606266] mt-10rpx">
                                    <view>预约时间：{{ item.day_time }} {{ item.start_time }}-{{ item.end_time }}</view>
                                    <view class="mt-18rpx">预约时长：{{ item.hours }}小时</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </mescroll-body>
        </view>
        
        <!-- <view class="bg-[#4C9F44] w-630rpx h-90rpx text-[#fff] text-center leading-90rpx rounded-8rpx mx-auto mt-50rpx">确定</view> -->

        <!-- 选择续订时间 -->
		<renew-time v-model="showRenewTimePopup" @selectedTime="Renew.handleChooseRenewTime"></renew-time>
    </view>
</template>


<script lang="ts" setup>
    import ComboCard from '@/components/order/ComboCard.vue'
	import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
	import { router } from '@/utils/tools'
    import { getStoreOrderList, renewOrder} from '@/api/order'
    import { useStoreStore } from '@/store'
    import { toast } from '@/utils/toast'

    const OSS = inject('OSS')
    const useStore = useStoreStore()

    // mescroll
	const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
    const downOption = {
		auto: true
	}
	const upOption = {
		auto: true,
		textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
	}
	const list = ref<Array<any>>([]) // 茶室列表

    // 续单
    const reserveTime = ref<Array<any>>([])
	const showRenewTimePopup = ref<boolean>(false)
    const selectRenewOrderId = ref<number>(0)

    onLoad(async (args) => {

        // 预定时间
        // const next7 = await getNext7Days()
        // Object.assign(sevenDay, next7)
    })

    onUnload(() => {
    })

    const Renew = {
        /**
         * 分页加载
         * @param mescroll 
         */
		upCallback: (mescroll) => {
			// 需要留一下数据为空的时候显示的空数据图标内容
            const filter = {
				page: mescroll.num, 
				size: mescroll.size,
                store_id: useStore.defaultStore.id,
				order_status: '',
			}

            getStoreOrderList(filter).then((res) => {
				const curPageData = res.list || [] // 当前页数据
				if(mescroll.num == 1) list.value = [] // 第一页需手动制空列表
				list.value = list.value.concat(curPageData) //追加新数据
				mescroll.endSuccess(curPageData.length, Boolean(res.more))
			}).catch(() => {
				mescroll.endErr() // 请求失败, 结束加载
			})
		},

        /**
		 * 一键续订时间
		 */
		handleChooseRenewTime: async (item) => {
            uni.showLoading({
                title: '操作中...',
                mask: true
            })

            try {
                uni.hideLoading()
                await renewOrder({
                    id: selectRenewOrderId.value,
                    renew_hour: item.value
                })

                list.value = []
			    getMescroll().resetUpScroll()

                toast.success('续订成功')
            } catch (error) {
                uni.hideLoading()
                toast.info('续订失败，请稍后重试')
                return
            }

			console.log("🚀 ~ item:", item)
		}
    }
</script>

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

    .xd {
        border-radius: 0rpx 10rpx 0rpx 10rpx;
    }
</style>
