<template>
	<view>
		<view class="topLine"></view>
		<view class="recList">
			<view class="recItem" @click="showPayType(index)" v-for="(item,index) in list" :key="index">
				<view class="recVal">
					<text>{{item.num}}</text>币
				</view>
				<view class="recPrice">
					{{item.price}}元
				</view>
			</view>
			<!-- <view class="recItem">
				<view class="recVal">
					<input type="number" v-model="custNum" placeholder="自定义" style="width: 50%;text-align: center;"
						placeholder-style="font-size:28rpx;color:#4a8b94;" />
				</view>
				<view class="recPrice" style="font-weight: 600;" @click="custom">
					立即充值
				</view>
			</view> -->
		</view>
		<navigator url="aboutUs"></navigator>
		<view class="agreeCont">
			<!-- <checkbox color="#4a8b94"/> -->充值即代表您同意<text
				@click="$href('aboutUs?navTitle=问野币充值协议')">《问野币充值协议》</text>
		</view>
		<!-- 游侠付款弹框 -->
		<pay-type v-if="showPay" @pay="pay" @changePayType="changePayType" :price="price"
			@closePayAlert="showPay = false"></pay-type>
	</view>
</template>

<script>
	import payType from '@/components/payType.vue'
	export default {
		data() {
			return {
				custNum: '',
				id: '',
				param: {
					number: '', //问野币数量
					pay_type: 'wechat'
				},
				iosPay: {
					order_id: '',
					data: ''
				},
				showPay: false, //展示支付弹框
				price: 0,
				list: [
					// {
				// 		num: 10,
				// 		price: 1,
				// 		id: 'PTMH2SF',
				// 	},
				// 	{
				// 		num: 60,
				// 		price: 6,
				// 		id: 'K93MD8T',
				// 	},
				// 	{
				// 		num: 120,
				// 		price: 12,
				// 		id: 'TR5CNJF',
				// 	},
				// 	{
				// 		num: 250,
				// 		price: 25,
				// 		id: 'AIDHZK4',
				// 	},
				// 	{
				// 		num: 500,
				// 		price: 50,
				// 		id: '87FC0DH',
				// 	}
				]
			}
		},
		components: {
			payType
		},
		onLoad() {
			this.getMoneyGoods()
			uni.getProvider({
				service: 'payment',
				success: function(res) {
					console.log('获取通道', res.provider)
				}
			});

			let that = this
			console.log('查看支付通道')
			plus.payment.getChannels((channels) => {
				console.log('判断是否是苹果支付', channels)
				for (var i in channels) {
					// 判断是否苹果支付
					if (channels[i].id === 'appleiap') {
						that.iapChannel = channels[i]
						console.log('判断是否是苹果支付赋值', that.iapChannel)
						// that.requestOrder()
					}
				}
			})
		},
		methods: {
			// {
			// 		num: 120,
			// 		price: 12,
			// 		id: 'TR5CNJF',
			// 	},
			getMoneyGoods () {
				return new Promise((reslove) => {
					this.$request('/wallet/getMoneyGoods', {type:'ios'}).then((res) => {
						console.log('充值选项列表', res)
						this.list = res.data
						this.list.forEach((item)=>{
							item.num = item.number
							item.price = item.number /10
						})
						reslove(res)
					})
				})
			},
			//修改支付类型
			changePayType(e) {
				console.log('修改支付类型', e)                                                  
				this.param.pay_type = e
			},
			//显示支付类型选择弹框
			showPayType(index) {
				this.price = this.list[index].price
				this.param.number = this.list[index].num
				this.id = this.list[index].apple_goods_id
				this.param.pay_type = 'wechat'
				this.showPay = true
			},
			custom() {
				if (this.custNum == '' || this.custNum <= 0) {
					uni.showToast({
						title: '请输入正确的问野币数量',
						icon: 'none'
					})
					return
				}
				let flag = new RegExp("^[1-9]([0-9])*$").test(this.custNum);
				if (!flag) {
					uni.showToast({
						title: '请输入正确的问野币数量',
						icon: 'none'
					})
					return
				}
				this.param.number = this.custNum
				this.price = this.param.number / 10
				this.showPay = true
			},
			pay() {
				const that = this
				// uni.showLoading({    
				// 	title: '检测支付环境...',
				// 	mask: true
				// })
				// plus.payment.getChannels((channels) => {
				// 	console.log('判断是否是苹果支付1',channels)
				// 	for (var i in channels) {
				// 		// 判断是否苹果支付
				// 		if (channels[i].id === 'appleiap') {
				// 			that.iapChannel = channels[i]
				// 			console.log('判断是否是苹果支付2',that.iapChannel)
				that.requestOrder()
				// 		} else {
				// 			that.payment()
				// 			// that.requestOrder()
				// 		}
				// 	}
				// })
			},
			async payment() {
				console.log('安卓')
				var orderInfo = await this.getOrderInfo();
				uni.requestPayment({
					provider: this.param.pay_type == 'wechat' ? 'wxpay' : 'alipay',
					orderInfo: this.param.pay_type == 'wechat' ? orderInfo.data : orderInfo.data
						.body, //this.param.pay_type == 'wechat' ? JSON.stringify(orderInfo.data) : orderInfo.data, //微信、支付宝订单数据
					success: (e) => {
						uni.navigateBack({
							delta: 1
						})
						setTimeout(() => {
							uni.showToast({
								title: '充值成功'
							})
						}, 500)
					},
					fail: function(err) {
						console.log('充值失败', err)
					}
				});
			},
			requestOrder() {
				const that = this
				// ['xxxxx'] 是平台申请拿到的内购商品的id 
				console.log('苹果支付', that.iapChannel)
				that.iapChannel.requestOrder([that.id],
					function(event) {
						// uni.hideLoading()
						console.log('苹果支付1', event)
						for (var index in event) {
							var OrderItem = event[index]
							console.log(OrderItem)
							that.topay(OrderItem.productid)
						}
					},
					function(erroemsg) {
						// uni.hideLoading()
						console.log('获取支付通道失败', erroemsg)
						uni.showToast({
							title: "获取支付通道失败：" + erroemsg.message,
							icon: 'none'
						})
					})
				console.log('苹果支付', that.iapChannel)
			},
			async topay(id) {
				const that = this
				that.param.pay_type = 'ios'
				var orderInfo = await this.getOrderInfo();
				uni.showLoading({
					title: '充值中请勿离开',
					mask: true
				})
				console.log(id)
				uni.requestPayment({
					provider: 'appleiap',
					orderInfo: {
						productid: id
					},
					success: (res => {
						console.log(1)
						console.log(res)
						uni.hideLoading()
						this.rechargeIosPay(res.transactionReceipt);
						// 支付成功查询订单
						// plus.payment.request(that.iapChannel, statement, function(res){
						// 	console.log(res)
						// 	})
					}),
					fail: (e) => {
						uni.hideLoading()
						uni.showModal({
							content: "支付失败",
							showCancel: false
						})
					},
					complete: () => {
						console.log("payment结束")
						this.loading = false;
					}
				})
			},
			getOrderInfo() {
				return new Promise((reslove) => {
					this.$request('/wallet/recharge', this.param).then((res) => {
						console.log('充值问野币', res)
						this.iosPay.order_id = res.data.order_id
						reslove(res)
					})
				})
			},
			rechargeIosPay(data) {
				this.iosPay.data = data
				return new Promise((reslove) => {
					this.$request('/wallet/rechargeIosPay', this.iosPay).then((res) => {
						console.log('充值问野币ios支付', res)
						uni.navigateBack({
							delta: 1
						})
						setTimeout(() => {
							uni.showToast({
								title: '充值成功'
							})
						}, 500)
						reslove(res)
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f8f8f9;
	}

	.topLine {
		height: 2rpx;
		background: rgba(25, 24, 51, 0.06);
	}

	.recList {
		padding: 0 32rpx;
		display: flex;
		flex-wrap: wrap;

		.recItem {
			width: 218rpx;
			height: 240rpx;
			background: #ffffff;
			border-radius: 24rpx;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
			margin: 24rpx 16rpx 0 0;

			.recVal {
				padding-top: 64rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #4a8b94;

				text {
					font-size: 40rpx;
				}
			}

			.recPrice {
				padding-top: 16rpx;
				text-align: center;
				font-size: 28rpx;
			}
		}

		.recItem:nth-of-type(3n) {
			margin-right: 0;
		}
	}

	.agreeCont {
		checkbox {
			transform: scale(0.7);
		}

		padding-top: 42rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			color: #4a8b94;
		}
	}
</style>