<template>
	<uni-nav-bar
		left-icon="left" 
		title="在线支付" 
		@clickLeft="goBack" 
		fixed 
		color="#8B2316" 
		height="140rpx" 
		:border="false" 
		backgroundColor="#eeeeee"
	></uni-nav-bar>
	<view class="pay-page">
		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 购买信息 -->
			<view class="purchase-summary">
				<view class="summary-row">
					<text class="summary-label" v-if="type=='ganDanFile'">下载{{ paymentInfo.provider_name}}的课件</text>
					<text class="summary-amount">{{(paymentInfo.amount/100).toFixed(2)}}元</text>
				</view>
			</view>
			
			<!-- 支付方式说明 -->
			<view class="payment-intro">
				<text class="intro-text">通过以下方式支付</text>
			</view>
			<radio-group @change="radioChange">
			<!-- 余额支付选项 -->
			<label class="payment-option" @tap="selectPayment('balance')">
				<view class="option-left">
					<up-image  :src="moneyImg" width="56rpx" height="56rpx" ></up-image>
				</view>
				<view class="option-middle">
					<text class="option-title">余额支付 ¥{{ balance }}</text>
					<text class="option-desc" v-if="balance<paymentInfo.amount/100">余额不足</text>
				</view>
				<view class="option-right">
					{{ selectedPayment === 'balance' }}
					<radio 
						:checked="selectedPayment === 'balance'" 
						value="balance"
						:disabled="balance<paymentInfo.amount/100"
						color="#8B2316"
					/>
				</view>
			</label>

			<!-- 选择付款方式标题 -->
			<view class="payment-method-title">
				<text class="method-title-text">选择付款方式</text>
			</view>

			<!-- 微信支付选项 -->
			<label class="payment-option" @tap="selectPayment('wechat')">
				<view class="option-left">
					<up-image  :src="wxImg" width="56rpx" height="56rpx" ></up-image>
				</view>
				<view class="option-middle">
					<text class="option-title">微信支付</text>
				</view>
				<view class="option-right">
					{{ selectedPayment === 'balance' }}
					<radio 
						:checked="selectedPayment === 'wechat'" 
						value="wechat"
						color="#8B2316"
					/>
				</view>
			</label>
			</radio-group>
		</view>
	
		<!-- 底部支付按钮 -->
		<view class="bottom-actions">
			<view class="pay-btn" @click="confirmPayment">
				<text class="btn-text">立即支付</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import wxImg from "@/static/weixin.png"
	import moneyImg from "@/static/yue.png"
	import { onLoad,onShow} from "@dcloudio/uni-app";
	import { requestPayment } from "@/utils/payment.js"
	import api from '@/api/api';
	const file_uuid=ref('');
	const type=ref('');
	const trade_no=ref('');
	const  balance=ref(0);
	onLoad((options) => {
		if(options.type=='ganDanFile'){
			file_uuid.value=options.uuid;
			type.value='ganDanFile';
		};
		createGanDanFileOrder();
		getBalance();
	})
	onShow(()=>{
		if(trade_no.value){
			getOrderStatus();
		}
	})
	const radioChange=(e)=>{
		console.log(e)
	}
	const getOrderStatus=()=>{
		api.getOrderStatus({
			trade_no:trade_no.value
		}).then(res=>{
			console.log(res)
		})
	};
	const payGanDanFile=()=>{
		api.payGanDanFile({
			channel:selectedPayment.value=='balance'?'balance':'wx',
			trade_no:trade_no.value
		}).then(res=>{
			if(res.code==200){
				const payParams = res.data
				requestPayment(payParams,()=>{
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					});
					uni.navigateBack();
				},(err)=>{
					console.log(err)
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					});
				})
			}
		})
	};
	const getBalance=()=>{
		api.getBalance().then(res=>{
			if(res.code==200){
				balance.value=res.data.toFixed(2);
			}
		})
	};
	const createGanDanFileOrder=()=>{
		api.createGanDanFileOrder({
			file_uuid:file_uuid.value
		}).then(res=>{
			if(res.code==200){
				trade_no.value=res.data.trade_no;
				paymentInfo.value=res.data;
			}
		})
	};
	// .png支付信息
	const paymentInfo = ref({
		amount:0,
		provider_name:''
	});

	// 选择的支付方式
	const selectedPayment = ref('');

	// 方法
	const goBack = () => {
		uni.navigateBack({
			fail() {
				uni.redirectTo({
					url: '/pages/index/index'
				});
			}
		});
	};

	const selectPayment = (paymentType) => {
		if(paymentType=='balance'){
			if(balance.value<paymentInfo.value.amount/100){
				uni.showToast({
					title: '余额不足',
					icon: 'none'
				});
				return false;
			}else{
				selectedPayment.value = paymentType;
			}
		}else{
			selectedPayment.value = paymentType;
		}
		console.log(selectedPayment.value)
		
	};

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

		payGanDanFile()
	};
</script>

<style lang="scss" scoped>
	// 变量定义
	$bg-color: #e4e4e4;
	$text-primary: #333333;
	$text-secondary: #666666;
	$text-light: #999999;
	$border-color: #e0e0e0;
	$white: #ffffff;
	$theme-color: #e74c3c;
	$green-color: #52c41a;
	$light-grey: #f8f9fa;

	// 混合器
	@mixin flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	@mixin flex-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.pay-page {
		height: calc(100vh - 140rpx);
		background-color: $bg-color;
		overflow: hidden;
	}

	.status-bar {
		height: 44rpx;
		background-color: $white;
		@include flex-between;
		padding: 0 30rpx;
		font-size: 24rpx;
		color: $text-primary;

		.status-left {
			display: flex;
			align-items: center;
			gap: 20rpx;

			.time {
				font-weight: normal;
			}

			.app-icons {
				display: flex;
				gap: 8rpx;

				.app-icon {
					width: 24rpx;
					height: 24rpx;
					border-radius: 4rpx;
					@include flex-center;
					font-size: 16rpx;
					color: $white;

					&.blue { background-color: #007aff; }
					&.purple { background-color: #8e44ad; }
					&.red { background-color: #ff3b30; }
				}
			}
		}

		.status-right {
			display: flex;
			align-items: center;
			gap: 20rpx;

			.network-info,
			.signal,
			.wifi,
			.battery {
				font-size: 22rpx;
			}
		}
	}

	.header {
		height: 88rpx;
		background-color: $white;
		@include flex-between;
		padding: 0 30rpx;
		border-bottom: 1rpx solid $border-color;

		.header-left {
			.back-btn {
				font-size: 48rpx;
				color: $theme-color;
				font-weight: normal;
			}
		}

		.header-center {
			.title {
				font-size: 36rpx;
				color: $theme-color;
				font-weight: normal;
			}
		}
	}

	.main-content {
		padding: 0;

		.purchase-summary {
			background-color: $white;
			padding: 30rpx;
			border-bottom: 1rpx solid $border-color;

			.summary-row {
				@include flex-between;

				.summary-label {
					font-size: 32rpx;
					color: $text-primary;
					font-weight: normal;
				}

				.summary-amount {
					font-size: 36rpx;
					color: $theme-color;
					font-weight: normal;
				}
			}
		}

		.payment-intro {
			
			padding: 30rpx;
			border-bottom: 1rpx solid $border-color;

			.intro-text {
				font-size: 28rpx;
				color: $text-secondary;
				font-weight: normal;
			}
		}

		.payment-option {
			background-color: $white;
			padding: 30rpx;
			border-bottom: 1rpx solid $border-color;
			@include flex-between;

			.option-left {
				.payment-icon {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					@include flex-center;
					font-size: 32rpx;
					color: $white;
					font-weight: normal;

					&.balance-icon {
						background-color: $green-color;
					}

					&.wechat-icon {
						background-color: $green-color;
					}
				}
			}

			.option-middle {
				flex: 1;
				display: flex;
				align-items: center;
				margin-left: 30rpx;

				.option-title {
					font-size: 32rpx;
					color: $text-primary;
					font-weight: normal;
					display: block;
				}

				.option-desc {
					font-size: 24rpx;
					color: $theme-color;
					font-weight: normal;
					margin-left: 30rpx;
				}
			}

			.option-right {
				// 移除radio-btn样式，使用uni-app原生radio组件
			}
		}

		.payment-method-title {
			padding: 30rpx;
			border-bottom: 1rpx solid $border-color;

			.method-title-text {
				font-size: 28rpx;
				color: $text-secondary;
				font-weight: normal;
			}
		}
	}

	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: $white;
		padding: 20rpx 30rpx;
		border-top: 1rpx solid $border-color;
		z-index: 100;

		.pay-btn {
			background-color: #8B2316;
			border-radius: 8rpx;
			height: 88rpx;
			@include flex-center;
			cursor: pointer;

			.btn-text {
				color: $white;
				font-size: 32rpx;
				font-weight: normal;
			}
		}
	}
</style>
