<template>
	<view class="container alipay-page">
		<view class="pay-content">
			<view class="method-card">
				<view class="method-header">
					<view class="method-index">方式一</view>
					<view class="method-title">浏览器链接支付宝支付</view>
				</view>
				<view class="browser-tip">点击右上角三个点，使用浏览器打开</view>
				<image class="tips-image" src="/static/tips.png" mode="widthFix"></image>
			</view>

			<view class="method-card">
				<view class="method-header">
					<view class="method-index">方式二</view>
					<view class="method-title">支付宝扫码支付</view>
				</view>
				<view class="qr-wrap">
					<u-qrcode v-if="qrUrl" :val="qrUrl" :size="220" unit="px" :show-loading="false"></u-qrcode>
				</view>
				<view class="qr-desc">截图保存二维码，打开支付宝扫一扫即可支付</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import { getPendingAlipayPaymentData } from '@/utils/payment.js';

	const browserUrl = ref('');
	const qrUrl = ref('');
	const hasRedirected = ref(false);

	const isInWechat = () => /micromessenger/i.test(navigator.userAgent);

	const decodePaymentUrl = (value) => {
		if (!value) {
			return '';
		}

		try {
			const normalized = value.replace(/-/g, '+').replace(/_/g, '/');
			const padding = '='.repeat((4 - normalized.length % 4) % 4);
			return decodeURIComponent(escape(atob(normalized + padding)));
		} catch (e) {
			return '';
		}
	};

	const getQueryParam = (key) => {
		// #ifdef H5
		const params = new URLSearchParams(window.location.search);
		return params.get(key) || '';
		// #endif
		// #ifndef H5
		return '';
		// #endif
	};

	const getPayUrlFromQuery = () => {
		return decodePaymentUrl(getQueryParam('pay64'));
	};

	const getQrUrlFromQuery = () => {
		return decodePaymentUrl(getQueryParam('qr64'));
	};

	const redirectToAlipayInBrowser = () => {
		// #ifdef H5
		if (hasRedirected.value || isInWechat() || !browserUrl.value) {
			return;
		}

		hasRedirected.value = true;
		window.location.href = browserUrl.value;
		// #endif
	};

	const loadPaymentData = () => {
		const data = getPendingAlipayPaymentData();
		browserUrl.value = getPayUrlFromQuery() || data?.copyUrl || data?.qrUrl || '';
		qrUrl.value = getQrUrlFromQuery() || data?.qrUrl || data?.copyUrl || browserUrl.value;
		redirectToAlipayInBrowser();
	};

	onShow(() => {
		loadPaymentData();
	});
</script>

<style lang="scss" scoped>
	.alipay-page {
		min-height: 100vh;
		box-sizing: border-box;
		padding: 28rpx 24rpx 48rpx;
		background: linear-gradient(180deg, #eaf4ff 0%, var(--bg-secondary) 42%);
	}

	.pay-content {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.method-card {
		background: var(--bg-primary);
		border-radius: 28rpx;
		padding: 32rpx;
		box-shadow: 0 16rpx 40rpx rgba(10, 132, 255, 0.08);
		border: 1rpx solid rgba(10, 132, 255, 0.08);
	}

	.qr-desc {
		margin-top: 14rpx;
		font-size: 26rpx;
		line-height: 1.55;
		color: var(--text-tertiary);
	}

	.method-header {
		display: flex;
		align-items: center;
		gap: 16rpx;
		margin-bottom: 28rpx;
	}

	.method-index {
		padding: 8rpx 14rpx;
		border-radius: 12rpx;
		background: var(--primary);
		color: var(--text-inverse);
		font-size: 22rpx;
		font-weight: 700;
	}

	.method-title {
		font-size: 30rpx;
		font-weight: 700;
		color: var(--text-primary);
	}

	.browser-tip {
		padding: 22rpx 24rpx;
		border-radius: 18rpx;
		background: rgba(10, 132, 255, 0.08);
		color: var(--primary);
		font-size: 28rpx;
		font-weight: 600;
		line-height: 1.45;
		text-align: center;
	}

	.tips-image {
		display: block;
		width: 100%;
		margin-top: 28rpx;
		border-radius: 18rpx;
		background: var(--gray-100);
	}

	.qr-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 28rpx;
		border-radius: 24rpx;
		background: #fff;
		border: 1rpx dashed rgba(10, 132, 255, 0.24);
	}

</style>
