<template>
	<view class="container">
		<!-- 切换的页面内容 -->
		<view class="content">
			<!-- 消费页面内容 -->
			<z-paging ref="paging_consume" :fixed="false" height="100vh" v-model="ConsumeDataList"
				@query="loadMoreDataConsume" :default-page-no="1" :default-page-size="4" :auto-show-back-to-top="true">
				<uni-card :title="`订单号:${item.orderId}`" v-for="(item,index) in ConsumeDataList" :key="item.orderId"
					@click="goToOrderDetail(item.orderId)">
					<view class="flex justify-between card-header">
						<view class="order-time">
							{{item.createdAt}}
						</view>
						<view class="order-no">
							{{item.bikeCode}}
						</view>
					</view>

					<view class="flex justify-between card-info">
						<view class="ride-info">
							<image :src="`${imgPath}/static/userui/icon/riding-line.png`"></image>
							<span>{{item.ridingDuration}} 5.6km</span>
						</view>
						<view class="ride-cost">
							￥{{item.totalAmount}}元
						</view>
					</view>
					<view class="text-right status-tag padding-sm flex justify-end">
						<!-- 标签 进行中 -->
						<view v-if="item.status == 0" class="cu-tag bg-blue light">{{item.statusName}}</view>

						<!-- 标签 已取消 -->
						<view v-if="item.status == 1" class="cu-tag bg-grey light">{{item.statusName}}</view>

						<!-- 标签 待支付 -->
						<view v-if="item.status == 2" class="cu-tag bg-orange light">{{item.statusName}}</view>

						<!-- 标签 已支付 -->
						<view v-if="item.status == 3" class="cu-tag bg-green light">{{item.statusName}}</view>

						<!-- 标签 退款中 -->
						<view v-if="item.status == 4" class="cu-tag bg-purple light">{{item.statusName}}</view>

						<!-- 标签 已退款 -->
						<view v-if="item.status == 5" class="cu-tag bg-red light">{{item.statusName}}</view>
					</view>
				</uni-card>
			</z-paging>
		</view>
	</view>
	<zero-loading v-if="isloading" color="#c1c1c0" type="wobble" mask="true"></zero-loading>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import * as api from '@/utils/api.js';
	import config from '@/utils/config';
	import {
		showModelMessage,
		jkcBaseEncode,
		jkcBaseDecode
	} from '@/utils/tools.js';
	const isloading = ref(false);
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const imgPath = config.imgPath;

	// 使用ref来声明选中的标签
	const selectedTab = ref('consume');
	// 切换选中的标签
	const selectTab = (tab) => {
		selectedTab.value = tab;
	};

	const paging_consume = ref(null);
	const paging_refund = ref(null);
	const RefundDataList = ref([]);
	const wechat_user = ref({});
	const ConsumeDataList = ref([]);
	const scrollHeight = ref(null);

	onLoad((options) => {
		// 获取设备信息
		const systemInfo = uni.getSystemInfoSync();
		// 获取屏幕高度和状态栏高度
		const screenHeight = systemInfo.screenHeight;
		const statusBarHeight = systemInfo.statusBarHeight;
		// 计算去掉状态栏后的可用区域高度
		scrollHeight.value = screenHeight - statusBarHeight;
		wechat_user.value = JSON.parse(jkcBaseDecode(uni.getStorageSync("wechat_user")));
	})
	// 加载数据
	const loadMoreDataConsume = (pageNo, pageSize) => {
		// 组装参数
		const params = {
			"userId": wechat_user.value.userId,
			"pageParam": {
				"pageNum": pageNo,
				"pageSize": pageSize
			}
		};
		api.callOrdereApi("userOrders/orderDetailsUserList", params).then((res) => {
			if (res.code === 200) {
				const records = res.data;
				paging_consume.value.complete(records);
			} else {
				paging_consume.value.complete(false);
			}
		});
	};
	// // 加载退款数据
	// const loadMoreDataRefund = (pageNo, pageSize) => {
	// 	// 组装参数
	// 	const params = {
	// 		"userId": wechat_user.value.userId,
	// 		"orderType": "refund",
	// 		"pageParam": {
	// 			"pageNum": pageNo,
	// 			"pageSize": pageSize
	// 		}
	// 	};

	// 	api.callOrdereApi("userOrders/orderDetailsUserList", params).then((res) => {
	// 		if (res.code === 200) {
	// 			const records = res.data;
	// 			paging_refund.value.complete(records);
	// 		} else {
	// 			paging_refund.value.complete(false);
	// 		}
	// 	});
	// };
	onMounted(() => {});

	const goToOrderDetail = (orderId) => {

		isloading.value = true;
		setTimeout(() => {
			isloading.value = false;
			uni.navigateTo({
				url: "/pages/user/views/OrderDetailsPage?orderId=" + orderId
			})
		}, 500);
		// showModelMessage("正在跳转订单明细…………"+orderId)
	}


	function checkPaymentStatus() {
		api.callPaymentApi("wxPayment/queryOrderByOutTradeNo?outTradeNo=" + props.orderId, {}, "get")
			.then(res => {
				if (res.code == 200) {
					gotoHome();
				} else {
					console.log("支付未成功，继续轮询");
					setTimeout(checkPaymentStatus(), 30000); // 30秒后继续轮询
				}
			})
			.catch(error => {
				console.log("请求失败，继续轮询", error);
				setTimeout(checkPaymentStatus(), 30000); // 30秒后继续轮询
			});
	}
</script>

<style scoped>
	.container {
		height: 100vh;
		background-color: white;
	}

	.selectTop {
		width: 20px;
		height: 2px;
		background-color: rgb(76, 188, 74);
		margin-left: 30px;
		margin-top: 5px;
		border-radius: 2px;
	}

	.selectColor {
		color: rgb(76, 188, 74);
	}

	.wztitle {
		font-size: 16px;
		font-weight: bold;
	}

	.active {
		color: rgb(76, 188, 74);
	}

	.content {}

	.order-card {
		padding: 16px;
		background-color: #fff;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
	}

	.card-header {
		font-size: 14px;
		color: #333;
	}

	.card-header .order-time {
		font-size: 12px;
		color: #a2a2a2;
	}

	.card-header .order-no {
		font-style: italic;
		font-size: 12px;
		color: #a2a2a2;
	}

	.card-info {
		margin-top: 12px;
		font-size: 16px;
	}

	.card-info .ride-info {
		color: rgb(15, 27, 38);
		font-size: 15px;
	}

	.card-info .ride-info image {
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}


	.card-info .ride-cost {
		font-weight: bold;
		font-size: 15px;
		color: rgb(226, 42, 72);
		letter-spacing: 1px;
	}

	.status-tag {
		margin-top: 12px;
	}

	.corui-ride-in-progress {
		background-color: rgb(37, 172, 51);
		color: #fff;
		padding: 4px 10px;
		font-size: 12px;
		border-radius: 5px;
	}

	.corui-completed {
		background-color: rgb(195, 198, 203);
		color: #fff;
		padding: 4px 10px;
		font-size: 12px;
		border-radius: 5px;
	}

	.corui-processing {
		background-color: rgb(218, 102, 17);
		color: #fff;
		padding: 4px 10px;
		font-size: 12px;
		border-radius: 5px;
	}
</style>