<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar title="充值"></z-nav-bar>
		<view class="cha_jine">
			<view class="cj_title">充值金额</view>
			<view class="cj_xiang">
				<view v-for="(item, index) in cjList" @click="chosPric(item)"
					:class="stepsCj.priceTypeId == item.priceTypeId?'Tab_cj cj_price':'cj_price'">
					<view class="pr_jg">￥{{item.realMoney}}</view>
					<view class="pr_yl">{{item.money}} 疯币</view>
					<view class="pr_lj">限时特惠</view>
				</view>
				<br clear="both">
			</view>
		</view>
		<view class="cha_fangsh">
			<view class="cf_title">支付方式</view>
			
			<view class="cf_radio">
				<u-radio-group v-model="payType">
					<view style="width: 100%;" v-if="isAndroid">
						<view v-for="(item, index) in paylist" @click="choseType(item.id)"
							:class="payType == item.id?'Tab_xf cf_xuanx':'cf_xuanx'">
							<image :src="item.img"></image>
							{{item.title}}
							<u-radio v-if="isAndroid" :key="index" activeColor="#fe6e09" :name='item.id'
								style="float: right;margin-top: 5rpx;"></u-radio>
							
						</view>
					</view>
					<view style="width: 100%;" v-else>
						<view v-for="(item, index) in iosPaylist" @click="choseType(item.id)"
							:class="payType == item.id?'Tab_xf cf_xuanx':'cf_xuanx'">
							<image :src="item.img"></image>
							{{item.title}}
							<u-radio v-if="isAndroid" :key="index" activeColor="#fe6e09" :name='item.id'
								style="float: right;margin-top: 5rpx;"></u-radio>
							
						</view>
					</view>
				</u-radio-group>
			</view>
			
		</view>
		<view class="agree_wo">* 我已阅读并同意《会员服务协议》</view>
		<view class="char_btn">
			<view @click="kaiChar" v-if="isAndroid">立即充值</view> 
			<view @click="iosPay" v-else>立即充值</view>
		</view>
	</view>
</template>

<script>
	import $http from '@/config/requestConfig.js';
	// import {  // 引入ios支付
	//     Iap,
	//     IapTransactionState
	//   } from "@/utils/iap.js"
	import {
		mapState
	} from 'vuex';
	import {
		setPay,
		setPayAssign
	} from '@/config/utils';
	export default {
		data() {
			return {				
				stepsCj: {},
				cjList: [],
				productid:'',
				isAndroid:true, // 是否为安卓环境
				payType: 2,
				paylist: [{
						title: '支付宝',
						id: 2,
						img: '../../static/icon/pay_1.png'
					},
					{
						title: '微信',
						id: 1,
						img: '../../static/icon/pay_2.png'
					}
				],
				iosPaylist: [
					{
						title: 'ios内购',
						id: 3,
						img: '../../static/icon/pay_2.png'
					}
				],
			};
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.getData();
			this.getIapChannels()
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.requestIapOrder()
		},
		computed: {
			...mapState(['userInfo']),
		},
		//方法
		methods: {
			// 获取应用内支付对象
			getIapChannels() {
			  console.log('------getIapChannels' );
			  let _this = this;
			  plus.payment.getChannels(function(channels){
			    for (let i in channels) {
			      let channel = channels[i];
			      // 获取 id 为 'appleiap' 的 channel  
			      if (channel.id == 'appleiap') {
			        _this.iap = channel;
			        _this.requestIapOrder();
			      }
			    }
			  }, function(e){
			    showToasts("获取iap支付通道失败：" + e.message);
			  });
			},
			// 获取到支付对象后，初始化支付项目列表
			requestIapOrder() {
			  console.log('------requestIapOrder' );
			  // #ifdef APP-PLUS
			  let ids = [this.productid];
			  this.iap.requestOrder(ids, function(res) {  
			      console.log(res);
			      this.iapOrder = true;
			    }, function(e) {
			      this.vm.jumpPay = false;
			      showToasts("获取订单信息失败：" + e.code);
			  });
			  // #endif
			},
			// 支付
			goApplePay() {
			  console.log('------goApplePay' );
			  // 获取订单
			  let _this = this;
			  payApply().then(res => {
			    // 发起支付
			    plus.payment.request(this.iap, {
			        productid: this.productid,
			        username: res.data.out_trade_no,
			      }, function(result){
			        console.log(result);
			        _this.appleNotify(result);
			      }, function(e){
			        // console.log(e);
			        this.vm.jumpPay = false;
			        showToasts("支付失败");
			    });
			  }).catch(err => {
			    showToasts(err.message || '获取数据失败');
			  })
			},
			appleNotify(notifyData) {
			  console.log('------appleNotify' );
			  
			  // 关闭支付弹窗
			  this.popPayClose();
			  
			  // 支付成功
			  appleNotify({notify: notifyData}).then(res => {
			    console.log(res);
			    if(res.data  == 1) {
			      this.$emit('apply-pay-success');
			    }
			  }).catch(err => {
			    showToasts("支付失败");
			  });
			},
			// 回调处理，这里是用的前端回调返回给服务端处理
			getDevName(){
				// 获取使用环境
				if(uni.getSystemInfoSync().platform === 'android'){
					this.isAndroid = true
				       // console.log('运行Android上')
				    }else{
						this.isAndroid = false
				       // console.log('运行iOS上')
				    }
			},
			// 获取充值金额
			getData() {
				this.$http
					.post('book/bookbuyconfig/getVipOrPoint', {
						type: 'point',
						qudao: 'Android'
					})
					.then(res => {
						this.cjList = res.list
						this.stepsCj = res.list[0]
					});
			},

			// 点击充值金额
			chosPric(e) {
				this.stepsCj = e
			},

			// 选择支付方式
			choseType(e) {
				let that = this
				that.payType = e
			},
			//ios充值
			iosPay(){
				let that = this
				
				let data = {
					userId: that.userInfo.id, //下单人ID
					userPhone: that.userInfo.tel, //收货人手机号
					paymentMethod: that.payType, 
					orderMoney: that.stepsCj.money * 1, //订单金额
					districtMoney: 0, //优惠金额
					realMoney: that.stepsCj.money * 1, //实收金额
					orderStatus: 0, //订单状态
					orderType: "point", //订单类型
				}
				
				$http.request({
					url: "book/buyorder/rechargeSave",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
					data,
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					console.log(res)
				})
			},
			// 充值
			kaiChar() {
				let that = this

				let data = {
					userId: that.userInfo.id, //下单人ID
					userPhone: that.userInfo.tel, //收货人手机号
					paymentMethod: that.payType, //1支付宝，2微信，3ios内购
					orderMoney: that.stepsCj.money * 1, //订单金额
					districtMoney: 0, //优惠金额
					realMoney: that.stepsCj.money * 1, //实收金额
					orderStatus: 0, //订单状态
					orderType: "point", //订单类型
				}

				$http.request({
					url: "book/buyorder/rechargeSave",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
					data,
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					if (res.code == 0) {
						setPay({
							typePay: 'alipay',
							subject: 'point',
							totalAmount: that.stepsCj.money,
							type: that.payType,
							relevanceoid: res.orderSn,
							body: that.stepsCj.priceTypeId,		
						}, res => {
							if (res.success) {
								uni.showToast({
									title: "支付成功"
								});
							} else {
								uni.showToast({
									title: "支付失败",
									icon: "none",
									image: '../../static/icon/ic_close.png'
								});
							}
						})
					}
				})



			},

			// 跳转
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},

		},

	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.cha_jine {
		margin: 40rpx 50rpx 0 50rpx;

		.cj_title {
			font-size: 36rpx;
			font-weight: bold;
		}

		.cj_xiang {
			margin-top: 50rpx;

			.cj_price {
				box-shadow: 0 0 20rpx 0 #0000001a;
				float: left;
				width: 47%;
				margin: 0 30rpx 30rpx 0;
				text-align: center;
				padding: 25rpx 0 30rpx 0;
				border-radius: 20rpx;
				position: relative;
				color: #2d2d2d;

				.pr_jg {
					font-size: 45rpx;
					margin: 20rpx 0 10rpx 0;
					font-weight: bold;
				}

				.pr_yl {
					font-size: 30rpx;
					// text-decoration: line-through;
					color: #b1b1b1;
				}

				.pr_lj {
					background-image: linear-gradient(90deg, #fe6e09 0%, #efa574 100%);
					color: #fff;
					position: absolute;
					top: -10rpx;
					right: 0;
					font-size: 24rpx;
					padding: 5rpx 10rpx;
					border-top-left-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
				}
			}

			.cj_price:nth-child(2n) {
				margin-right: 0;
			}

			.Tab_cj {
				box-shadow: 0 0 20rpx 0 #fe700bcc;
				color: #7b4c0a;
				background: #fff9f5cc;
			}
		}
	}

	.cha_fangsh {
		margin: 40rpx 50rpx 0 50rpx;

		.cf_title {
			font-size: 36rpx;
			font-weight: bold;
		}

		.cf_radio {
			margin-top: 20rpx;

			.cf_xuanx {
				font-size: 32rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;
				border-bottom: 1px solid #ededed;

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

			.Tab_xf {
				background-color: #fdf1e9cc;
			}

		}



	}

	.agree_wo {
		color: #aaa;
		font-size: 25rpx;
		margin-top: 30rpx;
		margin: 40rpx 50rpx 0 50rpx;
		padding-bottom: 180rpx;
	}

	.char_btn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 30rpx;

		view {
			background-image: linear-gradient(90deg, #ed7161 0%, #efa574 100%);
			color: #fff;
			width: 90%;
			margin: 0 auto;
			text-align: center;
			font-size: 35rpx;
			font-weight: bold;
			padding: 25rpx 0;
			border-radius: 50rpx;
		}
	}
</style>
