<template>
	<view class="container">
		<!-- 顶部导航 -->
		<!-- <view class="header">
			<view class="header-title">确认支付</view>
		</view> -->

		<!-- 订单信息 -->
		<view class="order-info">
			<view class="order-title">订单详情</view>
			<view class="order-item">
				<view class="item-name">{{ planName }}</view>
				<view class="item-price">¥{{ planPrice }}</view>
			</view>
			<!-- <view class="order-total">
				<text class="total-label">合计：</text>
				<text class="total-price">¥{{ planPrice }}</text>
			</view> -->
		</view>

		<!-- 支付方式 -->
		<view class="payment-section">
			<view class="section-title">选择支付方式</view>
			
			<!-- 钱包支付 -->
			<view class="payment-item" :class="{ active: selectedPayment === 'wallet' }"
				@click="selectPayment('wallet')">
				<view class="payment-info">
					<uv-icon name="empty-coupon" color="#07c160" size="24"></uv-icon>
					<view class="payment-details">
						<text class="payment-name">钱包支付</text>
						<text class="payment-desc">余额：¥{{ walletBalance }}</text>
					</view>
				</view>
				<uv-icon name="checkmark-circle-fill" :color="selectedPayment === 'wallet' ? '#ff3333' : '#ccc'"
					size="20"></uv-icon>
			</view>

			<!-- 微信支付 -->
			<view class="payment-item" :class="{ active: selectedPayment === 'wxpay' }" @click="selectPayment('wxpay')">
				<view class="payment-info">
					<uv-icon name="weixin-fill" color="#07c160" size="24"></uv-icon>
					<view class="payment-details">
						<text class="payment-name">微信支付</text>
						<text class="payment-desc">推荐使用微信支付</text>
					</view>
				</view>
				<uv-icon name="checkmark-circle-fill" :color="selectedPayment === 'wxpay' ? '#ff3333' : '#ccc'"
					size="20"></uv-icon>
			</view>

			<!-- 支付宝支付 - 仅在H5环境显示 -->
			<view v-if="showAlipay" class="payment-item" :class="{ active: selectedPayment === 'alipay' }"
				@click="selectPayment('alipay')">
				<view class="payment-info">
					<uv-icon name="/static/imgs/alipay.png" color="#1677ff" size="24"></uv-icon>
					<view class="payment-details">
						<text class="payment-name">支付宝</text>
						<text class="payment-desc">安全便捷的支付方式</text>
					</view>
				</view>
				<uv-icon name="checkmark-circle-fill" :color="selectedPayment === 'alipay' ? '#ff3333' : '#ccc'"
					size="20"></uv-icon>
			</view>
		</view>

		<!-- 底部支付按钮 -->
		<view class="bottom-section">
			<uv-button type="primary" size="large" @click="confirmPayment" :loading="paying">
				立即支付 ¥{{ planPrice }}
			</uv-button>
			<view class="agreement">
				支付即表示同意
				<text class="link" @click="showAgreement">《会员服务协议》</text>
			</view>
		</view>
	</view>
</template>

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

	const authStore = useAuthStore();
	const userStore = useUserStore();

	// 页面参数
	const planId = ref('');
	const planName = ref('');
	const planPrice = ref(0);

	// 响应式数据
	const selectedPayment = ref("wxpay"); // 默认选中微信支付
	const paying = ref(false);
	const showAlipay = ref(true); // 控制是否显示支付宝选项
	const walletBalance = ref(0);

	// 获取钱包余额
	const getWalletBalance = async () => {
		try {
			const res = await RPC.post('/membership/user/info', {
				user_id: userStore.userInfo.id
			});
			walletBalance.value = res.wallet_balance || 0;
		} catch (error) {
			console.error('获取钱包余额失败:', error);
		}
	};

	// 选择支付方式
	const selectPayment = (payment) => {
		selectedPayment.value = payment;
	};

	// 页面加载时获取参数
	onLoad((options) => {
		planId.value = Number(options.planId) || '';
		planName.value = decodeURIComponent(options.planName || '');
		planPrice.value = parseFloat(options.planPrice || 0);
	});

	onShow(() => {
		getWalletBalance();
	});

	// 检查当前环境并设置支付选项
	const checkEnvironment = () => {
		// #ifdef MP-WEIXIN
		// 微信小程序环境，隐藏支付宝选项
		showAlipay.value = false;
		// #endif

		// #ifdef H5
		// H5环境，显示所有支付选项
		showAlipay.value = true;
		// #endif
	};

	// 微信支付
	const wechatPay = async (orderInfo) => {
		// #ifdef MP-WEIXIN
		// 微信小程序支付
		try {
			const paymentResult = await uni.requestPayment({
				provider: "wxpay",
				timeStamp: orderInfo.timeStamp,
				nonceStr: orderInfo.nonceStr,
				package: orderInfo.package,
				signType: orderInfo.signType,
				paySign: orderInfo.paySign,
			});

			console.log("微信支付成功:", paymentResult);
			return {
				success: true,
				data: paymentResult
			};
		} catch (error) {
			console.error("微信支付失败:", error);
			if (error.errMsg === "requestPayment:fail cancel") {
				throw new Error("用户取消支付");
			}
			throw new Error("微信支付失败");
		}
		// #endif

		// #ifdef H5
		// H5微信支付
		const payUrl = orderInfo.mwebUrl; // 后端返回的H5支付链接
		window.location.href = payUrl;
		return {
			success: true,
			redirect: true
		};
		// #endif
	};

	// 支付宝支付（仅H5环境）
	const alipayPay = async (orderInfo) => {
		// #ifdef H5
		// H5支付宝支付
		const payUrl = orderInfo.pay_url; // 后端返回的支付宝H5支付链接
		window.location.href = payUrl;
		return {
			success: true,
			redirect: true
		};
		// #endif
	};

	function showModalAsync(options) {
		return new Promise((resolve, reject) => {
			uni.showModal({
				...options,
				success: (res) => {
					resolve(res);
				},
				fail: (err) => {
					reject(err);
				}
			});
		});
	}

	// 确认支付
	const confirmPayment = async () => {
		if (!selectedPayment.value) {
			uni.showToast({
				title: "请选择支付方式",
				icon: "none",
			});
			return;
		}

		paying.value = true;
		try {
			// 1. 创建订单参数
			const orderParams = {
				user_id: userStore.userInfo?.id,
				plan_id: planId.value,
				pay_channel: selectedPayment.value
			};

			uni.showLoading({
				title: "正在创建订单...",
			});

			// 2. 创建订单
			const orderNum = await RPC.post('/membership/order/create', orderParams);

			uni.hideLoading();
			let orderResult = {}
			
			// 3. 根据支付方式调用对应的支付方法
			let paymentResult;
			if (selectedPayment.value === "wxpay") {
				// #ifdef MP-WEIXIN
				const res = await uni.login({
					provider: 'weixin'
				})
				orderResult = await RPC.post('/membership/order/pay_by_wechat_mini', {
					code: res.code,
					"order_no": orderNum.order_no
				})
				// #endif
				
				// #ifdef H5
				orderResult = await RPC.post('/membership/order/pay_by_wechat_h5', {
					"order_no": orderNum.order_no
				})
				// #endif
				
				uni.showLoading({
					title: "正在跳转微信支付...",
				});
				console.log('orderResult', orderResult)
				paymentResult = await wechatPay(orderResult);
			} else if (selectedPayment.value === "alipay") {
				orderResult = await RPC.post('/membership/order/pay_by_alipay', {
					"order_no": orderNum.order_no
				})
				uni.showLoading({
					title: "正在跳转支付宝...",
				});
				console.log('orderResult', orderResult)
				paymentResult = await alipayPay(orderResult);
			} else if (selectedPayment.value === 'wallet') {
				const res = await showModalAsync({
					title: '确认支付',
					content: '确认使用钱包余额支付？'
				});

				if (res.confirm) {
					paymentResult = await RPC.post('/membership/order/pay_by_wallet', {
						order_no: orderNum.order_no
					})
					console.log('paymentResult', paymentResult)
				} else if (res.cancel) {
					console.log('用户点击了取消');
					paymentResult = { success: false }
				}
			}

			uni.hideLoading();
			console.log('paymentResult', paymentResult)
			
			// 4. 处理支付结果
			if (paymentResult?.success) {
				if (paymentResult.redirect) {
					// H5跳转支付，不需要额外处理
					uni.showToast({
						title: "正在跳转支付页面...",
						icon: "loading",
						duration: 2000,
					});
				} else {
					// 支付成功
					setTimeout(() => {
						uni.showToast({
							title: "支付成功",
							icon: "success",
						});
						// 延迟跳转回上一页或首页
						setTimeout(() => {
							uni.navigateBack({
								delta: 2 // 返回到会员页面
							});
						}, 1500);
					}, 1000)
				}
			}
		} catch (error) {
			uni.hideLoading();
			console.error("支付失败:", error);
			let errorMessage = "支付失败，请重试";
			if (error.message === "用户取消支付") {
				errorMessage = "支付已取消";
			} else if (error.message) {
				errorMessage = error.message;
			} else if (error) {
				errorMessage = error
			}

			uni.showToast({
				title: errorMessage,
				icon: "none",
			});
		} finally {
			paying.value = false;
		}
	};

	// 显示协议
	const showAgreement = () => {
		uni.navigateTo({
			url: "/pagesA/user-agreement/user-agreement",
		});
	};

	onMounted(() => {
		checkEnvironment();
	});
</script>

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

	.header {
		background: white;
		padding: 20px 16px;
		border-bottom: 1px solid #f0f0f0;

		.header-title {
			font-size: 18px;
			font-weight: 500;
			color: #333;
			text-align: center;
		}
	}

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

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

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

			.item-name {
				font-size: 14px;
				color: #333;
			}

			.item-price {
				font-size: 16px;
				font-weight: 500;
				color: #ff3333;
			}
		}

		.order-total {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 12px 0 0;

			.total-label {
				font-size: 14px;
				color: #666;
				margin-right: 8px;
			}

			.total-price {
				font-size: 18px;
				font-weight: bold;
				color: #ff3333;
			}
		}
	}

	.payment-section {
		background: white;
		margin: 0 16px 16px;
		border-radius: 12px;
		padding: 16px;

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

		.payment-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 16px;
			margin-bottom: 8px;
			border: 1px solid #e5e5e5;
			border-radius: 8px;
			transition: all 0.3s;

			&.active {
				border-color: #4285f4;
				background-color: #f0f7ff;
			}

			&:last-child {
				margin-bottom: 0;
			}

			.payment-info {
				display: flex;
				align-items: center;
				gap: 12px;

				.payment-details {
					display: flex;
					flex-direction: column;

					.payment-name {
						font-size: 14px;
						color: #333;
						margin-bottom: 2px;
					}

					.payment-desc {
						font-size: 12px;
						color: #999;
					}
				}
			}
		}
	}

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

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

		.agreement {
			text-align: center;
			font-size: 12px;
			color: #999;
			margin-top: 12px;

			.link {
				color: #4285f4;
			}
		}
	}
</style>