<template>
	<view class="recharge-page">
		<!-- 自定义导航栏 -->
		<nav-bar :title="$t('order.recharge')"></nav-bar>
		<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 rechargeList.bookBuyConfigList" :key="item.priceTypeId">
					<view class="recharge_money">￥{{item.money}}</view>
					<view>{{item.realMoney}}{{$t('order.virtualCoin')}}</view>
					<!-- 红框位置的618活动标签 -->
					<!-- <view class="activity-tag">618活动</view> -->
					<span class="activity-label" v-if="item.givejf >0">618充值活动</span>
					<text class="recharge_give" v-if="item.givejf >0">（赠{{item.givejf}}币）</text>
				</view>
			</view>
		</view>
		<view class="activity-container">
			<view v-html="remark.remark"></view>
		</view>
		<view class="cha_fangsh">
			<view class="cf_title PM_font">{{$t('user.paymentMethod')}}</view>
			<view class="cf_radio">
				<radio-group v-for="item in iosPaylist" @click="choseType(item.id)">
					<view style="width: 100%">
						<view :class="payType == item.id ? 'Tab_xf cf_xuanx' : 'cf_xuanx'">
							<!-- <image class="pay_item_img" :src="item.imgUrl" mode="aspectFil">
							</image> -->
							<text>{{ item.title }}</text>
							<radio :checked="payType === item.id"></radio>
						</view>
					</view>
				</radio-group>
			</view>
		</view>
		<view class="agree_wo flexbox">
			<radio-group class="agree" v-for="(item, index) in argee" :key="index" @click="radioCheck">
				<view>
					<radio class="agreeRadio" :value="item.id" :checked="state" color="#007bff"></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 } from '@/api/modules/user'
	// const googlePay = uni.requireNativePlugin("sn-googlepay5");
	const { t } = useI18n()
	const message = useMessage()
	const payType = ref('1')
	const iosPaylist = ref([
		{
			title: "Google Pay",
			id: '1',
			// imgUrl: "/static/icon/currency.png"
		}
	])
	// 充值列表
	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(101)

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

	const remark = ref({})
	const isConnected = ref(false)


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

	// 点击金额
	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
	}
	/**
	 * 获取充值列表数据
	 */
	const getData = async () => {
		try {
			rechargeList.value = await getBookBuyConfigList(type.value, qudao.value)
			console.log(rechargeList.value.bookBuyConfigList, '充值列表');
			// 默认选择第一个金额
			aloneItem.value = rechargeList.value.bookBuyConfigList[0]
		} 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)
		}
	}

	/**
	 * 切换支付方式
	 */
	const choseType = () => {
		// payType.value = val;
	}

	const handleRecharge = () => {
		if(!state.value){
			uni.showToast({
			  title: t('order.readAgreeServices'),
			  icon: 'none'
			})
			return
		}
		uni.showLoading({ title: '加载中...' })
		console.log('立即充值');
		getGooglePay()
	}

	/**
	 * 初始化
	 */
	const getGooglePay = () => {
		googlePay.init({
		}, (e:any) => {
			console.log('init', e);
			if (e.code == 0) {
				isConnected.value = true;
				getQuerySku()
				// 初始化成功
			} else {
				// 初始化失败
				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('查询成功',e);
		      // e.list; // 查询结果, array
		    } else {
					console.log('查询失败');
		      // 查询失败
		    }
		  }
		)
		}
	
	const getPayAll = () =>{
		googlePay.payAll(
		  {
		    productId: "", // 产品id
		
		  },
		  (e) => {
		    if (e.code == 0) {
		      // 支付成功
		      e.data; //支付结果, array [ {original:{ }, signature: ''} ]
		    } else {
		      // 支付失败
		    }
		  },
		)
	}
	

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

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

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

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

	.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: 30rpx;
				margin-bottom: 10rpx;

			}

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

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

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

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

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

	.activity-container {
		margin: 0 20rpx 20rpx 20rpx;
		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: 16rpx;
		font-weight: 600;
		color: #ffffff;
		background-color: #007bff;
		border-radius: 16rpx 0;
		padding: 6rpx 10rpx;
		letter-spacing: 0.5rpx;
	}

	.cha_fangsh {
		padding: 20rpx 20rpx 60rpx 20rpx;

		.cf_title {
			font-size: 30rpx;
			color: #007bff;
		}

		.cf_radio {
			margin-top: 20rpx;

			.cf_xuanx {
				font-size: 24rpx;
				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 160rpx 20rpx;
		color: #aaa;
		font-size: 18rpx;
		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
		}
	}
</style>