<template>
	<view class="container">
		<!-- 支付结果显示 -->
		<view class="result-section">
			<!-- 加载中状态 -->
			<view v-if="paymentStatus === 'loading'" class="status-loading">
				<view class="loading-icon">
					<uv-loading-icon mode="circle" color="#4285f4" size="60"></uv-loading-icon>
				</view>
				<view class="status-title">支付处理中...</view>
				<view class="status-desc">请稍候，正在确认支付结果</view>
				<view class="countdown-text">{{ countdownText }}</view>
			</view>

			<!-- 支付成功 -->
			<view v-else-if="paymentStatus === 'success'" class="status-success">
				<view class="success-icon">
					<uv-icon name="checkmark-circle-fill" color="#52c41a" size="80"></uv-icon>
				</view>
				<view class="status-title">支付成功</view>
				<view class="status-desc">恭喜您，支付成功</view>
			</view>

			<!-- 支付失败 -->
			<view v-else-if="paymentStatus === 'failed'" class="status-failed">
				<view class="failed-icon">
					<uv-icon name="close-circle-fill" color="#ff4d4f" size="80"></uv-icon>
				</view>
				<view class="status-title">支付失败</view>
				<view class="status-desc">{{ failedReason || '支付过程中出现问题，请重试' }}</view>
			</view>

			<!-- 支付取消 -->
			<view v-else-if="paymentStatus === 'cancelled'" class="status-cancelled">
				<view class="cancelled-icon">
					<uv-icon name="info-circle-fill" color="#faad14" size="80"></uv-icon>
				</view>
				<view class="status-title">支付已取消</view>
				<view class="status-desc">您已取消本次支付</view>
			</view>

			<!-- 超时状态 -->
			<view v-else-if="paymentStatus === 'timeout'" class="status-timeout">
				<view class="timeout-icon">
					<uv-icon name="clock-fill" color="#faad14" size="80"></uv-icon>
				</view>
				<view class="status-title">查询超时</view>
				<view class="status-desc">支付结果查询超时，请手动查看订单状态</view>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="order-info" v-if="orderInfo">
			<view class="info-title">订单信息</view>
			<view class="info-item">
				<text class="label">订单号：</text>
				<text class="value">{{ orderNo }}</text>
			</view>
			<view class="info-item" v-if="orderInfo.amount">
				<text class="label">金额：</text>
				<text class="value price">¥{{ orderInfo.amount }}</text>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-section">
			<view class="button-group">
				<!-- 支付成功时的按钮 -->
				<template v-if="paymentStatus === 'success'">
					<uv-button type="primary"  @click="goToMine">
						返回会员中心
					</uv-button>
				</template>

				<!-- 支付失败时的按钮 -->
				<template v-else-if="paymentStatus === 'failed'">
					<uv-button type="primary"  @click="goToMine" customStyle="margin-right: 12px; flex: 1;">
						返回会员中心
					</uv-button>
					<!-- <uv-button type="primary"  @click="retryPayment" customStyle="flex: 1;">
						重新支付
					</uv-button> -->
				</template>

				<!-- 其他状态的按钮 -->
				<template v-else>
					<uv-button type="primary"  plain  @click="goToMine">
						返回会员中心
					</uv-button>
					<uv-button type="primary"  @click="checkOrderStatus" >
						查看订单
					</uv-button>
				</template>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		useUserStore
	} from "@/store";
	import RPC from "@/utils/request";
	import dayjs from "dayjs";

	const userStore = useUserStore();

	// 页面参数
	const orderNo = ref('');

	// 响应式数据
	const paymentStatus = ref('loading'); // loading, success, failed, cancelled, timeout
	const failedReason = ref('');
	const orderInfo = ref(null);
	const countdown = ref(60); // 查询倒计时，60秒
	const countdownText = ref('');

	// 定时器
	let queryTimer = null;
	let countdownTimer = null;

	// 页面加载时获取参数
	onLoad((options) => {
		orderNo.value = options.out_trade_no || '';
		if (orderNo.value) {
			startQueryPaymentStatus();
		} else {
			paymentStatus.value = 'failed';
			failedReason.value = '订单号参数缺失';
		}
	});

	// 开始查询支付状态
	const startQueryPaymentStatus = () => {
		// 开始倒计时
		startCountdown();
		// 立即查询一次
		queryPaymentStatus();
		// 设置定时查询（每3秒查询一次）
		queryTimer = setInterval(() => {
			queryPaymentStatus();
		}, 3000);
	};

	// 查询支付状态
	const queryPaymentStatus = async () => {
		try {
			const res = await RPC.post('/membership/order/status', {
				order_no: orderNo.value
			});

			orderInfo.value = res;

			// 根据订单状态设置页面状态
			if (res.status === 'paid') {
				paymentStatus.value = 'success';
				clearTimers();
			} else if (res.status === 'failed') {
				paymentStatus.value = 'failed';
				failedReason.value = res.fail_reason || '支付失败';
				clearTimers();
			} else if (res.status === 'canceled' || res.status === 'cancelled') {
				paymentStatus.value = 'cancelled';
				clearTimers();
			} else if (res.status === 'created' || res.status === 'pending') {
				// 继续等待
				paymentStatus.value = 'loading';
			}
		} catch (error) {
			console.error('查询支付状态失败:', error);
			// 如果是网络错误，继续查询；如果是其他错误，显示失败
			if (countdown.value <= 0) {
				paymentStatus.value = 'timeout';
				clearTimers();
			}
		}
	};

	// 开始倒计时
	const startCountdown = () => {
		updateCountdownText();
		countdownTimer = setInterval(() => {
			countdown.value--;
			updateCountdownText();
			
			if (countdown.value <= 0) {
				paymentStatus.value = 'timeout';
				clearTimers();
			}
		}, 1000);
	};

	// 更新倒计时文本
	const updateCountdownText = () => {
		countdownText.value = `查询超时倒计时：${countdown.value}秒`;
	};

	// 清除定时器
	const clearTimers = () => {
		if (queryTimer) {
			clearInterval(queryTimer);
			queryTimer = null;
		}
		if (countdownTimer) {
			clearInterval(countdownTimer);
			countdownTimer = null;
		}
	};

	// 格式化时间
	const formatTime = (timestamp) => {
		if (!timestamp) return '';
		return dayjs(timestamp * 1000).format('YYYY-MM-DD HH:mm:ss');
	};

	// 返回会员中心
	const goToMine = () => {
		uni.switchTab({
			url: '/pages/mine/mine'
		});
	};

	// 重新支付
	const retryPayment = () => {
		// 返回支付页面，重新发起支付
		uni.navigateBack({
			delta: 1
		});
	};

	// 查看订单
	const checkOrderStatus = () => {
		uni.switchTab({
			url: '/pages/order/order'
		});
	};

	// 页面卸载时清除定时器
	onUnmounted(() => {
		clearTimers();
	});
</script>

<style lang="scss" scoped>
	.container {
		font-size: 14px;
		background-color: #f8f8f8;
		min-height: 100vh;
		padding: 20px 16px;
        box-sizing: border-box;
	}

	.result-section {
		background: white;
		border-radius: 12px;
		padding: 40px 20px;
		text-align: center;
		margin-bottom: 20px;

		.loading-icon,
		.success-icon,
		.failed-icon,
		.cancelled-icon,
		.timeout-icon {
			margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
		}

		.status-title {
			font-size: 20px;
			font-weight: bold;
			color: #333;
			margin-bottom: 8px;
		}

		.status-desc {
			font-size: 14px;
			color: #666;
			margin-bottom: 16px;
		}

		.countdown-text {
			font-size: 12px;
			color: #999;
		}

		.status-success {
			.status-title {
				color: #52c41a;
			}
		}

		.status-failed {
			.status-title {
				color: #ff4d4f;
			}
		}

		.status-cancelled {
			.status-title {
				color: #faad14;
			}
		}

		.status-timeout {
			.status-title {
				color: #faad14;
			}
		}
	}

	.order-info {
		background: white;
		border-radius: 12px;
		padding: 16px;
		margin-bottom: 20px;

		.info-title {
			font-size: 16px;
			font-weight: 500;
			color: #333;
			margin-bottom: 16px;
		}

		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 8px 0;
			border-bottom: 1px solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.label {
				font-size: 14px;
				color: #666;
			}

			.value {
				font-size: 14px;
				color: #333;

				&.price {
					color: #ff3333;
					font-weight: 500;
				}
			}
		}
	}

	.bottom-section {
		// position: fixed;
		// bottom: 0;
		// left: 0;
		// right: 0;
		background: white;
		padding: 16px;
        border-radius: 10px;
		// border-top: 1px solid #e5e5e5;


		/* #ifdef H5 */
		// bottom: 50px;
		/* H5环境下给tabBar留出空间 */
		/* #endif */

		.button-group {
			display: flex;
			gap: 30px;
		}
	}
</style>