<template>
	<view class="recharge-page">
		<!-- 自定义导航栏 -->
		<nav-bar :title="$t('order.recharge')"></nav-bar>
		<!-- 活动充值金额 -->
		<view class="block" v-if="eventAmountList?.length > 0">
			<!-- <view class="text">{{$t('order.rechargeAmount')}}</view> -->
			<view class="text">活动充值金额</view>
			<view class="recharge">
				<view class="recharge_block" @click="chosPric(item)"
					:class="aloneItem.priceTypeId === item.priceTypeId ? 'selected' : ''" v-for="item in eventAmountList"
					:key="item.priceTypeId">
					<view class="recharge_money">NZ${{item.realMoney}}</view>
					<view style="font-size: 26rpx;">{{item.money}}{{ $t('global.coin') }}</view>
					<span class="activity-label" v-if="item.givejf >0">{{item.description}}</span>
					<text class="recharge_give"
						v-if="item.givejf >0">（{{$t('order.give')}}{{item.givejf}}{{$t('order.points')}}）</text>
				</view>
			</view>
		</view>
		<!-- 标准充值金额 -->
		<view class="block">
			<view class="text">{{$t('order.rechargeAmount')}}</view>
			<view class="recharge">
				<view class="recharge_block" @click="chosPric(item)"
					:class="aloneItem.priceTypeId === item.priceTypeId ? 'selected' : ''" v-for="item in standardAmountList"
					:key="item.priceTypeId">
					<view class="recharge_money">NZ${{item.realMoney}}</view>
					<view style="font-size: 26rpx;">{{item.money}}{{ $t('global.coin') }}</view>
					<span class="activity-label" v-if="item.givejf >0">{{item.description}}</span>
					<text class="recharge_give"
						v-if="item.givejf >0">（{{$t('order.give')}}{{item.givejf}}{{$t('order.points')}}）</text>
				</view>
			</view>
		</view>
		<view class="active_block" v-if="remark?.remark">
			<view v-html="remark.remark"></view>
		</view>
		<view class="cha_fangsh">
			<view class="cf_title">{{$t('user.paymentMethod')}}</view>
			<view class="cf_radio">
				<radio-group>
					<view>
						<view class="cf_xuanx">
							<text>{{ isAndroid ? $t('user.googlePay') : $t('user.applePay')}}</text>
							<radio checked="true;" @click="choseType(item.id)"></radio>
						</view>
					</view>
				</radio-group>
			</view>
		</view>
		<view class="agree_wo">
			<radio-group class="agree" v-for="(item, index) in argee" :key="index">
				<view>
					<radio class="agreeRadio" :value="item.id" :checked="state" color="#007bff" @click="radioCheck"></radio>
				</view>
			</radio-group>
			<view>{{$t('order.readAgree')}}<span class="highlight"
					@click="showAgreement">《{{$t('order.valueAddedServices')}}》</span></view>
		</view>
		<view class="bottom-button-container">
			<button class="recharge-button" @click="handleRecharge">{{$t('order.recharge')}}</button>
		</view>
		<wd-popup v-model="agreemenState" position="bottom" :closeable="true">
			<view class="agreement">
				<view class="agreement_title">{{ agreementObj.title }}</view>
				<view class="agreement_row">
					<view v-html="agreementObj.content"></view>
				</view>
			</view>
		</wd-popup>

		<wd-message-box />
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted, toRefs, reactive } from 'vue'
	import { useI18n } from 'vue-i18n'
	import { useMessage } from '@/uni_modules/wot-design-uni'
	import { getBookBuyConfigList, getAgreement, getActivityDescription, verifyGooglePay, getPlaceOrder, getIosPayment } from '@/api/modules/user'
	import { useUserStore } from '@/stores/user'
	import { useThrottle } from '@/hooks/useThrottle';

	const googlePay = uni.requireNativePlugin("sn-googlepay5");
	const userStore = useUserStore()
	const { t } = useI18n()
	const message = useMessage()
	// 充值列表
	const rechargeList = ref([])
	// 金额列表单独每项
	const aloneItem = ref({})

	// 充值列表type-固定传值
	const type = ref('point')

	const qudao = ref('')
	const state = ref(false)
	const argee = ref([
		{
			value: false,
			id: "1",
		},
	])

	const popup = ref(null)
	const agreemenState = ref(false)
	// 协议id
	const id = ref(116)

	const richTextContent = ref('');
	// 协议数据
	const agreementObj = reactive({
		title: '',
		content: '',
	})
	const isAndroid = ref()

	const remark = ref({})
	const isConnected = ref(false)
	const purchaseToken = ref()
	// 订单编号
	const orderSn = ref('')
	// 活动充值数据
	const eventAmountList = ref([])
	//正常金额数据
	const standardAmountList = ref([])
	// 声明ios实例
	const iapChannel = ref(null)

	/**
		 * 获取使用环境
		 */
	const getDevName = () => {
		if (uni.getSystemInfoSync().platform === "android") {
			qudao.value = 'Google'
			isAndroid.value = true;
			console.log('运行Android上')
		} else {
			isAndroid.value = false;
			qudao.value = 'IOS'
			console.log('运行iOS上')
		}
		getData()
	}

	/**
	 * 获取充值列表数据
	 */
	const getData = async () => {
		try {
			rechargeList.value = await getBookBuyConfigList(type.value, qudao.value)
			console.log(rechargeList.value.bookBuyConfigList, '充值列表');
			const data = rechargeList.value.bookBuyConfigList
			// 默认选择第一个金额
			aloneItem.value = data[0]
			eventAmountList.value = data.filter(item => item.givejf > 0)
			standardAmountList.value = data.filter(item => item.givejf <= 0)
		} catch (error) {
			console.error('获取订单列表失败:', error)
		}
	}

	/**
	 * 点击支付按钮
	 */

	const paymentButton = async () => {
		if (!state.value) {
			uni.showToast({
				title: t('order.readAgreeServices'),
				icon: 'none'
			})
			return
		}
		getPlaceOrderObj()
	}
	// 节流支付按钮
	const handleRecharge = useThrottle(paymentButton);

	/**
		* 获取订单编号
		*/
	const getPlaceOrderObj = async () => {
		console.log(isAndroid.value);
		const { priceTypeId, realMoney, money } = toRefs(aloneItem.value)
		const data = {
			userId: userStore.userInfo.id, // 用户di
			paymentMethod: isAndroid.value ? '5' : '3', //支付方式3ios 5google
			orderMoney: money.value, //订单金额
			realMoney: realMoney.value, //实际金额
			come: '10', //订单来源 2医学吴门医述 10海外读书
			orderType: 'point', //订单类型, point充值、order课程、书、vip 课vip、abroadVip 书vip、relearn 复读、trainingClass 培训班
			productId: priceTypeId.value // 商品id
		}
		try {
			const res = await getPlaceOrder(data)
			orderSn.value = res.orderSn
			console.log(orderSn.value, '获取订单号');
			uni.showLoading({ title: t('order.orderCreating') })
			isAndroid.value ? getGooglePay() : checkProvider()
			// getGooglePay()
		} catch (error) {
			console.error('获取订单号失败', error)
		}
	}

	// 点击金额
	const chosPric = (item : any) => {
		console.log(item, '金额每项');
		aloneItem.value = item;
	};

	/**
	 * 勾选协议
	 */
	const radioCheck = () => {
		state.value = !state.value
		console.log('点击了', state.value);
	}

	/**
	 * 协议弹窗显示
	 */
	const showAgreement = () => {
		agreemenState.value = true
	}

	/**
	 * 检测支付提供商（判断是否支持applepay）
	 */
	const checkProvider = () => {
		uni.getProvider({
			service: 'payment',
			success: (res) => {
				console.log('getProvider返回结果：', res); // 关键日志：看是否包含applepay
				iapChannel.value = res.providers.find((channel) => {
					return (channel.id === 'appleiap')
				})
				getProductInfo()
			}
		});
	}

	/**
	 * 查询后台配置的商品信息
	 */
	const getProductInfo = () => {
		const id = String(aloneItem.value.priceTypeId)
		iapChannel.value.requestProduct([id], (res : any) => {
			console.log(res, '查询苹果后台配置的商品id');
			topay(id)
		}, (err : any) => {
			uni.showToast({ title: '未获取到产品信息，请联系管理员', icon: 'none' });
			console.error('失败', err);
		});
	}

	/**
	 * 准备支付-调出支付窗口
	 */
	const topay = (id : string) => {
		return new Promise((resolve, reject) => {
			uni.hideLoading()
			uni.requestPayment({
				provider: 'appleiap',
				orderInfo: {
					productid: id,
					username: orderSn.value, // 订单id
					quantity: 1,
					manualFinishTransaction: true
				},
				success: (res) => {
					console.log(res, 'res-topay');
					iapCheck(res);
					resolve(res);
				},
				fail: (err) => {
					console.log('支付错误', err);
					restoreComplateRequest()
					uni.showToast({ title: t('user.closeWindow'), icon: 'error' })
					reject(err);
				}
			});
		})
	}

	/**
	 * 调用后台支付-ios
	 */
	const iapCheck = async (res : { transactionIdentifier : string; transactionReceipt : string }) => {
		// console.log(res.transactionIdentifier,res.payment.productid,res.payment.username,res.transactionReceipt,userStore.userInfo.id);
		try {
			const obj = await getIosPayment(res.transactionIdentifier, res.payment.productid, res.payment.username, res.transactionReceipt, userStore.userInfo.id)
			console.log(obj, '校验订单')
			finishTransaction(res)
			uni.switchTab({
				url: '/pages/user/index'
			})
		} catch (error) {
			console.error('校验订单失败:', error)
			// 也需要释放订单，防止失败再次提交支付窗口拉不起来
			finishTransaction(res)
		}

	}

	/**
	 * 检查是否存在未关闭的订单
	 */
	const restoreComplateRequest = () => {
		return new Promise((resolve, reject) => {
			iapChannel.value.restoreCompletedTransactions({
				manualFinishTransaction: true,
			}, (res : unknown) => {
				console.log(res, '成功-restoreCompletedTransactions');
				res.map((item : any) => {
					finishTransaction(item)
				})
				resolve(res);
			}, (err : any) => {
				console.log(err, '失败-restoreCompletedTransactions');
				reject(err);
			})
		});
	}

	/**
	 * 关闭订单
	 */
	const finishTransaction = (trans : any) => {
		iapChannel.value.finishTransaction(
			trans,
			(success : any) => {
				console.log("关闭订单成功", success);
			},
			(fail : any) => {
				console.log("关闭订单失败", fail);
			}
		);
	}

	/**
	 * 谷歌初始化
	 */
	const getGooglePay = () => {
		googlePay.init({
		}, (e : any) => {
			console.log('init', e);
			if (e.code == 0) {
				isConnected.value = true;
				console.log('init成功了');
				getQuerySku()
				// 初始化成功
			} else {
				console.log('init失败了/谷歌商店没有登录');
				uni.showToast({
					title: t('order.unusable'),
					icon: 'error'
				})
				// 初始化失败
				isConnected.value = false;
			}
		});
	}

	/**
	 * 查询sku
	 */
	const getQuerySku = () => {
		const id = aloneItem.value.priceTypeId
		console.log(id, '获取每项');
		googlePay.querySku(
			{
				inapp: [id], // 与subs二选一, 参数为商品ID（字符串）数组
			},
			(e : any) => {
				if (e.code == 0) {
					// 查询成功.
					console.log('querySku查询成功', e);
					getPayAll()
					uni.hideLoading()
				} else {
					console.log('查询失败\网络连接失败', e);
					uni.showToast({
						title: t('global.networkConnectionError'),
						icon: 'error'
					})
				}
			}
		)
	}

	/**
	 * 发起支付
	 */
	const getPayAll = () => {
		console.log(aloneItem.value.priceTypeId, orderSn.value, '发起支付传入产品id,订单id');
		googlePay.payAll(
			{
				productId: aloneItem.value.priceTypeId, // 产品id
				accountId: orderSn.value // 订单编号
			},
			(e : any) => {
				if (e.code == 0) {
					purchaseToken.value = e.data[0].original.purchaseToken
					// 支付成功
					console.log(e, 'payAll方法成功返参');
					getConsume()
				} else {
					uni.showToast({ title: t('user.closeWindow'), icon: 'error' })
					console.log(e, 'e');
					// 支付失败
				}
			},
		)
	}

	/**
	 * 消耗品 确认交易
	 */
	const getConsume = () => {
		googlePay.consume(
			{
				purchaseToken: purchaseToken.value, // 来自支付结果的original.purchaseToken (或 original.token)
			},
			(e : any) => {
				if (e.code == 0) {
					console.log(e, '确认交易成功');
					uni.showToast({ title: t('user.returnMine'), icon: 'none' })
					// 确认成功
					googleVerify()
				} else {
					console.log(e, '确认交易失败');
					// 确认失败
				}
			},
		);
	}

	/**
	 * 校验订单
	 */
	const googleVerify = async () => {
		uni.hideLoading()
		console.log(typeof aloneItem.value.priceTypeId, typeof purchaseToken.value, typeof orderSn.value);
		try {
			const obj = await verifyGooglePay(aloneItem.value.priceTypeId, purchaseToken.value, orderSn.value)
			uni.switchTab({
				url: '/pages/user/index'
			})
			console.log(obj, '校验订单');
		} catch (error) {
			console.error('校验订单失败:', error)
		}
	}

	/**
	 * 获取协议数据
	 */
	const getAgreementData = async () => {
		try {
			const text = reactive(await getAgreement(id.value))
			const { title, content } = toRefs(text.agreement)
			agreementObj.title = title.value
			agreementObj.content = content.value.replace(/<\/h5>/g, "</view>");
			// console.log(agreementObj, '协议数据');
		} catch (error) {
			console.error('获取协议数据:', error)
		}
	}

	/**
	 * 获取活动说明数据
	 */
	const getActivityDescriptionData = async () => {
		try {
			const text = ref(await getActivityDescription())
			remark.value = text.value.res[0]
			console.log(remark.value, '活动说明内容');
		} catch (error) {
			console.error('获取协议数据:', error)
		}
	}

	onMounted(() => {
		getDevName();
		getActivityDescriptionData()
		getAgreementData()
	})
</script>

<style lang="scss" scoped>
	$theme-color: #54a966;

	.recharge-page {
		min-height: 100vh;
		background-color: #f7faf9;
	}

	.text {
		font-size: 45rpx;
		font-weight: bold;
		color: #007bff;
		padding: 30rpx 0 20rpx 30rpx;
	}

	.recharge {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 0 20rpx 30rpx;

		.recharge_block {
			box-shadow: 0 0 20rpx 0 #0000001a;
			float: left;
			width: 46%;
			margin: 0 3% 30rpx 0;
			text-align: center;
			padding: 30rpx 0 0;
			border-radius: 15rpx;
			position: relative;
			height: 160rpx;

			.recharge_money {
				font-size: 50rpx;
				font-weight: bold;
			}

			.recharge_give {
				font-size: 22rpx;
				color: #FF0033;
			}
		}
	}

	.selected {
		border: 2rpx solid #007bff;
		color: #007bff;
	}

	.bottom-button-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background-color: #ffffff;
		border-top: 1px solid #f0f0f0;
		z-index: 999;
	}

	.recharge-button {
		width: 60%;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #007bff;
		color: #ffffff;
		font-size: 40rpx;
		border-radius: 50rpx;
		border: none;
	}

	.recharge-button::after {
		border: none;
	}

	.activity-container {
		margin: 0 30rpx 20rpx 30rpx;
		padding: 15rpx;
		background-color: #e6f4ff;
		border-radius: 8rpx;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	}

	.activity-label {
		position: absolute;
		top: -10rpx;
		right: -6rpx;
		font-size: 20rpx;
		font-weight: 600;
		color: #ffffff;
		background-color: #007bff;
		border-radius: 16rpx 0;
		padding: 6rpx 10rpx;
		letter-spacing: 0.5rpx;
	}

	.cha_fangsh {
		padding: 30rpx;

		.cf_title {
			font-size: 45rpx;
			font-weight: bold;
			color: #007bff;
		}

		.cf_radio {
			margin-top: 20rpx;

			.cf_xuanx {
				font-size: 36rpx;
				padding: 10rpx 0;
				margin-bottom: 20rpx;
				border-bottom: 1px solid #ededed;
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
					display: inline-block;
					margin-right: 20rpx;
					vertical-align: bottom;
				}
			}

			.Tab_xf {
				// background-color: #fdf1e9cc;
			}
		}
	}

	.pay_item_img {
		width: 50rpx;
		height: 50rpx;
		float: left;
		margin-right: 20rpx;
	}


	.agree_wo {
		display: flex;
		padding: 20rpx 20rpx 180rpx 20rpx;
		color: #aaa;
		font-size: 30rpx;
		align-items: center;

		.highlight {
			color: #007bff;
		}
	}


	.agreeRadio {
		display: flex;
		zoom: 0.7;
	}

	.agreement {
		padding: 40rpx 30rpx 40rpx 30rpx;
		position: relative;

		.agreement_title {
			font-size: 32rpx;
			margin-bottom: 50rpx;
			color: #555;
			text-align: center;
			font-weight: bold;
		}

		.agreement_row {
			max-height: 1000rpx;
			overflow-y: scroll
		}
	}

	.active_block {
		background-color: rgba(37, 143, 235, 0.2);
		margin: 0 30rpx 20rpx 30rpx;
		border-radius: 10rpx;
		padding: 15rpx;
		font-size: 28rpx;
		color: #333;
	}

	::v-deep.active_block span {
		color: red;
		font-size: 32rpx;
		font-weight: bold;
		padding: 0 5rpx;
	}

	::v-deep.active_block span:first-child {
		padding: 0 5rpx 0 0;
	}

	::v-deep.active_block p {
		padding-top: 10rpx;
		color: #666;
		font-size: 24rpx;
		line-height: 34rpx;
	}

	::v-deep.active_block p span {
		padding: 0 5rpx !important;
	}
</style>