<template>
	<view class="container">
		<view class="content">
			<view class="card">
				<view class="yearRow">
					<view class="label">缴费年限</view>
					<view class="control">
						<image class="icon" @click="minusYear" src="/static/dd_02.png" mode="widthFix" v-if="form.payYear > 1" ></image>
						<image class="icon" src="/static/dd_02_g.png" mode="widthFix" v-else ></image>
						<text class="num">{{ form.payYear }}年</text>
						<image class="icon" src="/static/btn_03.png" mode="widthFix" @click="plusYear" v-if="form.payYear < 5" ></image>
						<image class="icon" src="/static/btn_03_g.png" mode="widthFix" v-else ></image>
					</view>
				</view>
			</view>

			<view class="card ">
				<view class="row ">
					<text class="label">费用合计</text>
					<text class="value red">{{ form.payYear * memberFee }}元</text>
				</view>

			</view>
		
			<view class="payRow ">
				<radio-group @change="onPayTypeChange">
					<label class="radioItem">
						<radio value="1" :checked="payType === '1'" class="custom-radio" />
						<view class="payInfo">
							<image class="icon" src="/static/min.png" mode="widthFix"></image>
							<text>民生付</text>
						</view>
					</label>
				</radio-group>
			</view>

			<view class="totalRow ">
				<text class="label">支付费用合计</text>
				<text class="value redBig">{{ memberTotalFee }}元</text>
			</view>

		</view>

		<view class="bottomBtn">
			<button class="payBtn" @click="handelPay" :loading="isPaying">立即支付 ¥{{ memberTotalFee }}</button>
		</view>

	</view>
</template>

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

const form = ref({
	payYear: 1
})

// 支付方式
const payType = ref('1')
const isPaying = ref(false)

// 费用与优惠
const memberFee = ref(0)
const memberTotalFee = computed(() => {
	return memberFee.value * form.value.payYear

})
onLoad((options) => {
	if (options.baseFormData) {
		const data = JSON.parse(decodeURIComponent(options.baseFormData))
		form.value = {
			...data,
			payYear: 1 // 年限默认1
		}
	}
	// 初始化接口
	getMyMemberCertUnitFeeApi()
})



// 减年限
const minusYear = () => {
	if (form.value.payYear > 1) {
		form.value.payYear--
	}
}

// 加年限（最大 5 年）
const plusYear = () => {
	if (form.value.payYear < 5) {
		form.value.payYear++
	}
}

// 支付方式切换
const onPayTypeChange = (e) => {
	payType.value = e.detail.value
}

const handelPay = async () => {
	if (memberTotalFee.value <= 0) {
		uni.showToast({ title: '支付金额异常', icon: 'none' })
		return
	}

	isPaying.value = true
	try {
		// 拼接完整参数
		const postData = {
			...form.value,
			payYear: form.value.payYear,
			payType: payType.value,
			totalFee: memberTotalFee.value
		}

		const res = await api.insertSinglePay(postData)
		console.log(777,res)
		if (res.data?.orderId) {
		api.pcallBack2(res.data.orderId)
			uni.navigateTo({
			url: `/personal/sucPay`
		})
		}
		// if (data.payFlag == 0 || data.orderId) {
		// 	data.orderId && api.callBack2(data.orderId)
			// uni.navigateTo({ url: `/personal/submitPay?price=${res.data.price}` })
		// }
	} catch (err) {
		uni.showToast({ title: '支付失败', icon: 'none' })
	} finally {
		isPaying.value = false
	}
}



// 获取会员费
async function getMyMemberCertUnitFeeApi() {
	const res = await api.getZtxFeeConfig()
	memberFee.value = Number(res.data.personMemberFee || 1500)
}

</script>

<style scoped>
.container {
	min-height: 100vh;
	background-color: #f7f7f7;
}
.content {
	padding: 20rpx 20rpx 120rpx;
}
.card {
	background: #fff;
	border-radius: 8rpx;
	padding: 25rpx 20rpx;
	margin-bottom: 20rpx;
}
.yearRow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20rpx;
}
.yearRow .label {
	font-size: 28rpx;
	color: #333;
}
.yearRow .control {
	display: flex;
	align-items: center;
}
.control image {
	width: 50rpx;
	height: 50rpx;
}
.yearRow .num {
	font-size: 28rpx;
	color: #333;
	min-width: 80rpx;
	text-align: center;
	margin: 0 10rpx;
}
.row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.row .label {
	font-size: 28rpx;
	color: #333;
}
.row .value {
	font-size: 30rpx;
	color: #C4121B;
	font-weight: 500;
}
.hintRow {
	display: flex;
	align-items: flex-start;
	font-size: 24rpx;
	line-height: 1.4;
}
.hintRow .hintText {
	color: #FF8124;
	flex: 1;
	margin-top: 10rpx;
}
.deductRow {
	background: #fff;
	padding: 20rpx 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;
	border-radius: 8rpx;
}
.deductRow .label {
	font-size: 28rpx;
	color: #333;
}
.deductRow .value {
	font-size: 30rpx;
	color: #C4121B;
}
.payRow {
	background: #fff;
	border-radius: 8rpx;
	padding: 20rpx 20rpx;
	margin-bottom: 20rpx;
}
.radioItem {
	display: flex;
	align-items: center;
}
.payInfo {
	display: flex;
	align-items: center;
	margin-left: 15rpx;
}
.payInfo .icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
}
.payInfo text {
	font-size: 28rpx;
	color: #333;
}
.totalRow {
	background: #fff;
	border-radius: 8rpx;
	padding: 20rpx 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10rpx;
}
.totalRow .label {
	font-size: 28rpx;
	color: #333;
}
.redBig {
	font-size: 32rpx;
	color: #C4121B;
	font-weight: bold;
}
.bottomBtn {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx 20rpx;
	background: #fff;
	border-top: 1rpx solid #eee;
}
.payBtn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	background-color: #C4121B;
	color: #fff;
	border-radius: 8rpx;
	font-size: 32rpx;
	text-align: center;
	border: none;
}
.payBtn[disabled] {
	background-color: #ccc;
	color: #999;
}
.red {
	color: #C4121B;
}
.icon{
	width:30px;
}
::v-deep .custom-radio .wx-radio-input {
	width: 30rpx;
	height: 30rpx;
	border-radius: 50%;
	border: 2rpx solid #ccc;
}
::v-deep .custom-radio .wx-radio-input.wx-radio-input-checked {
	border-color: #C4121B !important;
	background: #C4121B !important;
}
</style>