<template>
	<view class="pay-order-container">
		<!-- 页面头部 -->
		<view class="page-header">
			<text class="title">确认并支付</text>
		</view>

		<!-- 订单核心信息 -->
		<view class="order-info">
			<view class="info-item">
				<text class="label">人数合计：</text>
				<text class="value red">{{ formData.all ?? 0 }}人</text>
			</view>
			<view class="info-item">
				<text class="label">新会员合计：</text>
				<text class="value red">{{ formData.new ?? 0 }}人</text>
			</view>
			<view class="info-item">
				<text class="label">续费会员合计：</text>
				<text class="value red">{{ formData.old ?? 0 }}人</text>
			</view>
			<view class="info-item total-price">
				<text class="label">支付总费用：</text>
				<text class="value red">{{ formData.price ?? 0 }}元</text>
			</view>
		</view>

		<!-- 支付方式选择（修复v-model报错 + 默认勾选） -->
		<view class="pay-type-section">
			<text class="section-title">选择支付方式</text>
			<!-- uni-app小程序原生radio-group写法 -->
			<radio-group :value="payType" @change="handlePayTypeChange">
				<label class="radio-item">
					<!-- checked属性实现默认勾选 -->
					<radio value="0" color="#E60012" :checked="payType === '0'" />
					<view class="pay-method">
						<image class="icon" src="/static/min.png" mode="widthFix"></image>
						<text class="pay-name">民生付</text>
					</view>
				</label>
			</radio-group>
		</view>

		<!-- 底部支付按钮 -->
		<view class="fixed-bottom">
			<button class="pay-btn red-bg" :loading="payLoading" @click="handlePay">立即支付</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import * as api from '@/common/api.js'

	// 核心数据
	const formData = ref({}) // 订单统计数据
	const rangeId = ref('') // 核心业务ID
	const payType = ref('0') // 支付方式（默认0=民生付）
	const payLoading = ref(false) // 支付按钮加载状态

	// 页面加载接收参数
	onLoad(async (options) => {
		console.log('订单ID：', options.rangeId)
		if (options.rangeId) {
			rangeId.value = options.rangeId
			await getCount()
		}
	})

	async function getCount() {
		try {
			const res = await api.getNewCountByRangeId(rangeId.value)
			formData.value = res.data || {
				all: 0,
				new: 0,
				old: 0
			}
		} catch (e) {
			formData.value = {
				all: 0,
				new: 0,
				old: 0
			}
		}
	}

	// 支付方式切换
	function handlePayTypeChange(e) {
		payType.value = e.detail.value
	}

	// 立即支付核心逻辑
	async function handlePay() {
		// 基础校验
		if (!rangeId.value || rangeId.value === '-1') {
			return uni.showToast({
				title: '订单ID异常',
				icon: 'none'
			})
		}

		try {
			payLoading.value = true
			const res = await api.goPay(rangeId.value)

			if (res.data?.orderId) {
				api.pcallBack2(res.data.orderId)
				uni.redirectTo({
					url: `/myCenter/sucPay?rangeId=${rangeId.value}from=payOrder`
				})
			}

			// 跳转到支付成功页

		} catch (err) {
			const errMsg = err?.data?.msg || err?.message || '支付失败，请稍后重试'
			uni.showToast({
				title: errMsg,
				icon: 'none'
			})
		} finally {
			payLoading.value = false
		}
	}
</script>

<style scoped lang="scss">
	.pay-order-container {
		padding: 30rpx;
		background-color: #fff;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.icon {
		width: 30px;
	}

	// 页面头部
	.page-header {
		text-align: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #eee;
		margin-bottom: 40rpx;

		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: #333;
		}
	}

	// 订单信息区域
	.order-info {
		margin-bottom: 60rpx;

		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 25rpx 0;
			border-bottom: 1px solid #f5f5f5;
			font-size: 32rpx;

			.label {
				color: #666;
			}

			.value {
				font-weight: 600;
				font-size: 34rpx;
			}

			.red {
				color: #E60012;
			}
		}

		.total-price {
			border-bottom: none;
			margin-top: 10rpx;

			.label {
				font-size: 34rpx;
				color: #333;
			}

			.value {
				font-size: 38rpx;
			}
		}
	}

	// 支付方式区域
	.pay-type-section {
		margin-bottom: 80rpx;

		.section-title {
			font-size: 32rpx;
			color: #333;
			margin-bottom: 20rpx;
			display: block;
		}

		.radio-item {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			padding: 10rpx 0;

			.pay-method {
				display: flex;
				align-items: center;
				margin-left: 10rpx;

				.pay-name {
					font-size: 32rpx;
					margin-left: 20rpx;
					color: #333;
				}
			}
		}
	}

	// 底部支付按钮
	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 30rpx 30rpx;
		background-color: #fff;
		border-top: 1px solid #eee;

		.pay-btn {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 44rpx;
			font-size: 34rpx;
			font-weight: 600;
		}

		.red-bg {
			background-color: #E60012;
			color: #fff;
		}
	}
</style>