<template>
	<view class="container">
		<!-- 顶部余额显示 -->
		<view class="balance-section">
			<view class="balance-card">
				<view class="balance-info">
					<view class="balance-label">当前余额</view>
					<view class="balance-amount">¥{{ memberInfo.wallet_balance || 0 }}</view>
				</view>
				<view class="balance-icon">
					<uv-icon name="empty-coupon" color="#4285f4" size="40"></uv-icon>
				</view>
			</view>
		</view>

		<!-- 充值金额选择 -->
		<view class="recharge-section">
			<view class="section-title">选择充值金额</view>
			<view class="amount-grid">
				<view class="amount-item" :class="{ active: selectedAmount === item.value }"
					v-for="item in rechargeAmounts" :key="item.value" @click="selectAmount(item.value)">
					<view class="amount-value">¥{{ item.value }}</view>
					<!-- <view v-if="item.bonus" class="amount-bonus">送{{ item.bonus }}元</view> -->
				</view>
			</view>

			<!-- 自定义金额 -->
			<view class="custom-amount">
				<view class="custom-label">自定义金额</view>
				<view class="custom-input">
					<text class="currency">¥</text>
					<input class="amount-input" v-model="customAmount" type="digit" placeholder="请输入充值金额"
						@input="onCustomAmountInput" />
				</view>
				<!-- <view class="amount-tips">充值金额范围：¥0.01 - ¥50000</view> -->
			</view>
		</view>

		<!-- 支付方式 -->
		<view class="payment-section">
			<view class="section-title">选择支付方式</view>
			<view class="payment-list">
				<!-- 微信支付 -->
				<view v-if="isWechat" class="payment-item" :class="{ active: selectedPayment === 'wxpay' }"
					@click="selectPayment('wxpay')">
					<view class="payment-info">
						<uv-icon name="weixin-fill" color="#07c160" size="28"></uv-icon>
						<view class="payment-details">
							<view class="payment-name">微信支付</view>
							<view class="payment-desc">安全快捷，支持零钱和银行卡</view>
						</view>
					</view>
					<uv-icon name="checkmark-circle-fill" :color="selectedPayment === 'wxpay' ? '#4285f4' : '#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="28"></uv-icon>
						<view class="payment-details">
							<view class="payment-name">支付宝</view>
							<view class="payment-desc">便民生活，轻松支付</view>
						</view>
					</view>
					<uv-icon name="checkmark-circle-fill" :color="selectedPayment === 'alipay' ? '#4285f4' : '#ccc'"
						size="20"></uv-icon>
				</view>
				
				<view
				v-if="showAlipay"
				  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">
				      <view class="payment-name">微信支付</view>
				      <view class="payment-desc">推荐使用微信支付</view>
				    </view>
				  </view>
				  <uv-icon
				    name="checkmark-circle-fill"
				    :color="selectedPayment === 'wxpay' ? '#ff3333' : '#ccc'"
				    size="20"
				  ></uv-icon>
				</view>
			</view>
		</view>

		<!-- 充值说明 -->
		<view class="notice-section">
			<view class="section-title">充值说明</view>
			<view class="notice-list">
				<view class="notice-item">
					<uv-icon name="info-circle" color="#999" size="16"></uv-icon>
					<text class="notice-text">充值金额将实时到账，可用于购买会员服务</text>
				</view>
				<view class="notice-item">
					<uv-icon name="info-circle" color="#999" size="16"></uv-icon>
					<text class="notice-text">充值金额不可提现，请根据需要合理充值</text>
				</view>
				<view class="notice-item">
					<uv-icon name="info-circle" color="#999" size="16"></uv-icon>
					<text class="notice-text">如有疑问，请联系客服处理</text>
				</view>
			</view>
		</view>

		<!-- 底部充值按钮 -->
		<view class="bottom-section">
			<view class="recharge-info">
				<text class="recharge-text">充值金额：¥{{ finalAmount }}</text>
				<!-- <text v-if="bonusAmount > 0" class="bonus-text">（含赠送¥{{ bonusAmount }}）</text> -->
			</view>
			<uv-button type="primary" size="large" @click="confirmRecharge" :loading="recharging"
				:disabled="finalAmount <= 0">
				立即充值
			</uv-button>
		</view>
	</view>
</template>

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

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

	const memberInfo = ref({})
	const getMemberInfo = () => {
		uni.showLoading();
		RPC.post('/membership/user/info', {
			user_id: userStore.userInfo.id
		}).then(res => {
			memberInfo.value = res || {}
		}).finally(() => {
			uni.hideLoading();
		})
	}

	// 响应式数据
	const currentBalance = ref(0);
	const selectedAmount = ref(0);
	const customAmount = ref('');
	const selectedPayment = ref('wxpay');
	const recharging = ref(false);
	const showAlipay = ref(true);
	const isWechat = ref(false)

	// 充值金额选项
	const rechargeAmounts = ref([{
			value: 10,
			bonus: 0
		},
		{
			value: 50,
			bonus: 0
		},
		{
			value: 100,
			bonus: 0
		},
		{
			value: 200,
			bonus: 0
		},
		{
			value: 500,
			bonus: 0
		},
		{
			value: 1000,
			bonus: 0
		}
	]);

	// 计算最终充值金额
	const finalAmount = computed(() => {
		if (customAmount.value && parseFloat(customAmount.value) > 0) {
			return parseFloat(customAmount.value);
		}
		return selectedAmount.value;
	});

	// 计算赠送金额
	const bonusAmount = computed(() => {
		if (selectedAmount.value > 0) {
			const selected = rechargeAmounts.value.find(item => item.value === selectedAmount.value);
			return selected ? selected.bonus : 0;
		}
		return 0;
	});

	// 选择充值金额
	const selectAmount = (amount) => {
		selectedAmount.value = amount;
		customAmount.value = '';
	};

	// 自定义金额输入
	const onCustomAmountInput = () => {
		selectedAmount.value = 0;

		// 限制输入范围
		const amount = parseFloat(customAmount.value);
		if (amount > 50000) {
			customAmount.value = '50000';
			uni.showToast({
				title: '充值金额不能超过50000元',
				icon: 'none'
			});
		}
	};

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

	// 检查环境
	const checkEnvironment = () => {
		// #ifdef MP-WEIXIN
		// 微信小程序环境，隐藏支付宝选项
		showAlipay.value = false;
		isWechat.value = true;
		selectedPayment.value = 'wxpay';
		// #endif

		// #ifdef H5
		// H5环境，显示所有支付选项
		showAlipay.value = true;
		selectedPayment.value = 'alipay';
		// #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.h5_url; // 后端返回的H5支付链接
		window.location.href = payUrl;
		return {
			success: true,
			redirect: true,
		};
		// #endif
	};

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

	// 确认充值
	const confirmRecharge = async () => {
		if (finalAmount.value <= 0) {
			uni.showToast({
				title: '请选择充值金额',
				icon: 'none'
			});
			return;
		}

		// if (finalAmount.value < 1) {
		// 	uni.showToast({
		// 		title: '充值金额不能少于1元',
		// 		icon: 'none'
		// 	});
		// 	return;
		// }

		if (!selectedPayment.value) {
			uni.showToast({
				title: '请选择支付方式',
				icon: 'none'
			});
			return;
		}

		recharging.value = true;

		try {
			// 创建充值订单参数
			// const orderParams = {
			//   type: 'recharge',
			//   amount: finalAmount.value,
			//   bonusAmount: bonusAmount.value,
			//   paymentMethod: selectedPayment.value,
			//   userId: userStore.userInfo?.id || 'mock_user_id',
			//   // #ifdef MP-WEIXIN
			//   platform: 'mp-weixin',
			//   // #endif
			//   // #ifdef H5
			//   platform: 'h5',
			//   // #endif
			// };

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

			// 调用后端创建充值订单API
			const orderNum = await RPC.post('/wallet/recharge', {
				user_id: userStore.userInfo.id,
				amount_cents: finalAmount.value * 100,
				pay_channel: selectedPayment.value
			})
			console.log('orderNum', orderNum)
			// 模拟创建订单返回的数据
			// const orderResult = {
			//   orderId: 'RECHARGE_' + Date.now(),
			//   amount: orderParams.amount,
			//   // 微信支付参数
			//   wechatPayInfo: {
			//     appId: 'wx1234567890',
			//     timeStamp: String(Date.now()),
			//     nonceStr: 'random_string_' + Date.now(),
			//     package: 'prepay_id=wx_prepay_id_123456',
			//     signType: 'RSA',
			//     paySign: 'mock_pay_sign_123456',
			//     mwebUrl: 'https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx_prepay_id_123456'
			//   },
			//   // 支付宝支付参数
			//   alipayInfo: {
			//     payUrl: 'https://openapi.alipay.com/gateway.do?mock_recharge_url'
			//   }
			// };

			uni.hideLoading();

			// 根据支付方式调用对应的支付方法
			let paymentResult;
			let orderResult = {};
			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') {
				const orderResult = await RPC.post('/membership/order/pay_by_alipay', {
					order_no: orderNum.order_no
				})
				uni.showLoading({
					title: '正在跳转支付宝...'
				});
				paymentResult = await alipayPay(orderResult);
			}

			uni.hideLoading();

			// 处理支付结果
			if (paymentResult.success) {
				if (paymentResult.redirect) {
					// H5跳转支付
					uni.showToast({
						title: '正在跳转支付页面...',
						icon: 'loading',
						duration: 2000
					});
				} else {
					// 支付成功
					uni.showToast({
						title: '充值成功',
						icon: 'success'
					});

					// 重置选择
					selectedAmount.value = 0;
					customAmount.value = '';
					// setTimeout(() => {
					// 	getMemberInfo()
					// },1000)

					// 延迟返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}
			}

		} catch (error) {
			uni.hideLoading();
			console.log(error)
			console.error('充值失败:', error);

			let errorMessage = '';
			if (error.message === '用户取消支付') {
				errorMessage = '支付已取消';
			} else if (error.message) {
				errorMessage = error.message;
			}

			uni.showToast({
				title: errorMessage || error,
				icon: 'none'
			});
		} finally {
			recharging.value = false;
		}
	};

	// 处理支付回调
	const handlePaymentCallback = () => {
		// #ifdef H5
		const urlParams = new URLSearchParams(window.location.search);
		const orderId = urlParams.get('orderId');
		const payResult = urlParams.get('payResult');

		if (orderId && payResult) {
			// 清理URL参数
			const url = new URL(window.location);
			url.searchParams.delete('orderId');
			url.searchParams.delete('payResult');
			window.history.replaceState({}, document.title, url.pathname + url.search);

			// 检查支付结果
			if (payResult === 'success') {
				uni.showToast({
					title: '充值成功',
					icon: 'success'
				});

				// 刷新余额
				loadUserBalance();

				// 重置选择
				selectedAmount.value = 0;
				customAmount.value = '';
			} else {
				uni.showToast({
					title: '充值失败或取消',
					icon: 'none'
				});
			}
		}
		// #endif
	};

	// 加载用户余额
	const loadUserBalance = async () => {
		try {
			// 调用获取用户余额API
			// const result = await RPC.get('/api/user/balance');
			// currentBalance.value = result.data.balance;
		} catch (error) {
			console.error('加载余额失败:', error);
		}
	};

	onMounted(() => {
		checkEnvironment();
		// loadUserBalance();
		// handlePaymentCallback();
	});

	onShow(() => {
		handlePaymentCallback();
		getMemberInfo()
	});
</script>

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

	.balance-section {
		padding: 20px 16px;
		background: linear-gradient(135deg, #4285f4 0%, #6fa8f5 100%);

		.balance-card {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 12px;
			padding: 20px;

			.balance-info {
				.balance-label {
					color: rgba(255, 255, 255, 0.8);
					font-size: 14px;
					margin-bottom: 8px;
				}

				.balance-amount {
					color: white;
					font-size: 32px;
					font-weight: bold;
				}
			}

			.balance-icon {
				opacity: 0.8;
			}
		}
	}

	.recharge-section,
	.payment-section,
	.notice-section {
		margin: 16px;
		background: white;
		border-radius: 12px;
		padding: 20px;

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

	.amount-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
		margin-bottom: 20px;

		.amount-item {
			background: #f8f9fa;
			border: 2px solid transparent;
			border-radius: 8px;
			padding: 16px 8px;
			text-align: center;
			transition: all 0.3s;

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

			.amount-value {
				font-size: 18px;
				font-weight: bold;
				color: #333;
				margin-bottom: 4px;
			}

			.amount-bonus {
				font-size: 12px;
				color: #ff4d4f;
			}
		}
	}

	.custom-amount {
		.custom-label {
			font-size: 14px;
			color: #666;
			margin-bottom: 12px;
		}

		.custom-input {
			display: flex;
			align-items: center;
			background: #f8f9fa;
			border-radius: 8px;
			padding: 0 16px;
			margin-bottom: 8px;

			.currency {
				font-size: 18px;
				color: #333;
				margin-right: 8px;
			}

			.amount-input {
				flex: 1;
				height: 48px;
				font-size: 16px;
				border: none;
				background: transparent;
			}
		}

		.amount-tips {
			font-size: 12px;
			color: #999;
		}
	}

	.payment-list {
		.payment-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 16px;
			border: 1px solid #e5e5e5;
			border-radius: 8px;
			margin-bottom: 12px;
			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 {
					.payment-name {
						font-size: 16px;
						color: #333;
						margin-bottom: 4px;
					}

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

	.notice-list {
		.notice-item {
			display: flex;
			align-items: flex-start;
			gap: 8px;
			margin-bottom: 12px;

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

			.notice-text {
				flex: 1;
				font-size: 13px;
				color: #666;
				line-height: 1.4;
			}
		}
	}

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

		.recharge-info {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 12px;

			.recharge-text {
				font-size: 16px;
				color: #333;
				font-weight: 500;
			}

			.bonus-text {
				font-size: 14px;
				color: #ff4d4f;
				margin-left: 4px;
			}
		}
	}
</style>