<template>
	<view class="container alipay-page">
		<view v-if="!hasPaymentUrl" class="empty-card">
			<view class="empty-title">支付链接已失效</view>
			<view class="empty-desc">请返回后重新发起支付宝支付</view>
			<up-button class="primary-button" type="primary" @tap="goBack">返回</up-button>
		</view>

		<view v-else 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 { computed, ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import { getPendingAlipayPaymentData } from '@/utils/payment.js';

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

	const hasPaymentUrl = computed(() => !!browserUrl.value || !!qrUrl.value);

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

	const goBack = () => {
		uni.navigateBack();
	};

	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,
	.empty-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);
	}

	.empty-desc,
	.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;
	}

	.primary-button {
		width: 100%;
		margin-top: 18rpx;
	}

	.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);
	}

	.empty-card {
		margin-top: 160rpx;
		text-align: center;
	}

	.empty-title {
		font-size: 34rpx;
		font-weight: 700;
		color: var(--text-primary);
	}
</style>
