<template>
	<view>
		<view class="head df jcsb">
			<div>
				<div class="head-yu">账户余额</div>
				<div class="head-one">{{balance}}<span>元</span></div>
			</div>
			<div class="covip df aic jcsa" @click="show=true">充值</div>
		</view>
		<view class="list">
			<view class="name">
				历史记录
			</view>
			<mescroll-uni ref="mescroll" @getData="getList" top="380rpx">
				<!-- <block slot="list"> -->
				<view v-for="(item,index) in pagelist" :key="index" slot="list">
					<view class="card">
						<view class="left">
							<view class="name">
								{{item.type_name}}
							</view>
							<view class="time-one">{{ $util.timeStampTurnTime(item.create_time) }}</view>
						</view>
						<view class="right">
							{{item.account_data}}
						</view>
					</view>
				</view>
				<!-- </block> -->
			</mescroll-uni>
			<loading-cover ref="loadingCover"></loading-cover>
		</view>
		<u-overlay :show="show" @click="show = false">
			<view class="Recharge" @tap.stop>
				<view class="df jcsb qinru">
					<div></div>
					<div>请输入充值金额</div>
					<!-- <image  :src="$util.img('/upload/weapp/user/X.png')" mode=""></image> -->
					<image :src="$util.img('/upload/weapp/user/xx.png')" mode=""></image>
				</view>
				<view class="df mannin">
					<view class="" v-for="(item,index) in copper" :key="index">
						<view :style="arr==index?{background:'#21BBF3',color:'#fff'}:''" class="mannin-one df aic jcsa"
							@click="btn(item,index)">￥{{item}}</view>
					</view>
				</view>
				<view class="df head-pay">
					<div class="df aic"></div>
					<div>
						<input placeholder="请输入充值金额" v-model="recharge_money" type="number">
						<div class="arr">￥</div>
						<div class="box">元</div>
					</div>
				</view>
				<!-- <view class="about">
					*充值满500总赠送50优惠券，充值满1000送100优惠券
				</view> -->
				<view class="xuind">

				</view>
				<view class="Select-payment">
					<!-- <div><input type="radio" name="sex" value="微信支付" checked="checked" /></div> -->
					<div v-for="(item,index) in radiolist1" :key="index">
						<div class="arr df aic jcsb" @click="time(index)">
							<div class="df aic">
								<image :src="$util.img(item.img)"></image>
								<text>{{item.name}}</text>
							</div>
							<image v-if="index==indexa" :src="$util.img(`/upload/weapp/user/gou.png`)" mode=""></image>
							<image v-else :src="$util.img(`/upload/weapp/user/un_gou.png`)" mode=""></image>
						</div>

					</div>

				</view>
				<view class="btn-qz df aic jcsa" @click="zfqd">
					确定支付
				</view>
			</view>
		</u-overlay>

	</view>
</template>

<script>
	// #ifdef H5
	import { Weixin } from 'common/js/wx-jssdk.js';
	// #endif

	// 包裹 uniapi 接口
	const MiniWarp = (fn, data) => {
		return new Promise((resolve, reject) => {
			fn({
				success: (res) => resolve(res),
				fail: (res) => reject(res),
				...data,
			})
		})
	}
	const uniLogin = data => MiniWarp(uni.login, data);
	const requestPayment = data => MiniWarp(uni.requestPayment, data);
	export default {
		data() {
			return {
				token: uni.getStorageSync('token'),
				show: false,
				arr: -1,
				indexa: 0,
				balance: '',
				pagelist: [],
				recharge_money: "",
				out_trade_no: "",
				list: [],
				copper: [],
				radiolist1: [

					// #ifndef MP-ALIPAY
					{
						name: '微信支付',
						img: '/upload/weapp/pageSalesman/reportForm/WeChat.png',
						payCode: "WECHAT_JSAPI"
					},
					// #endif
					// #ifndef MP-WEIXIN
					{
						name: '支付宝支付',
						img: '/upload/weapp/pageSalesman/reportForm/Alipay.png',
						payCode: "ALIPAY_JSAPI"
					},
					// #endif

				],
			};
		},
		onShow() {

			this.getBalance()
			this.getCopper();
			this.$refs.mescroll.refresh();


		},
		onHide() {
			uni.removeStorageSync('chemeData')
		},
		methods: {
			getBalance() {
				this.$api.sendRequest({
					url: '/api/memberaccount/info',
					data: {
						account_type: "balance"
					},
					success: res => {
						console.log(res);
						this.balance = res.data.balance
					}
				});
			},
			getCopper() {
				this.$api.sendRequest({
					url: '/api/ordercreate/getRechargeList',
					success: res => {
						this.copper = res.data
					}
				})
			},
			getList(mescroll) {
				this.$api.sendRequest({
					url: "/api/memberaccount/page",
					data: {
						page: mescroll.num,
						page_size: mescroll.size,
						account_type: "balance"
					},
					success: res => {
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
						} else {
							this.$util.showToast({
								title: msg
							});
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) {
							this.pagelist = []; //如果是第一页需手动制空列表
							this.related_id = 0;
						}
						this.pagelist = this.pagelist.concat(newArr); //追加新数据
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				})
			},
			btn(item, index) {

				this.arr = index;
				this.recharge_money = item;

			},
			time(index) {
				this.indexa = index
				console.log(index);
			},
			zfqd() {
				if (!this.recharge_money) {
					this.$util.showToast({
						title: '请输入充值金额'
					});
					return;
				}
				this.$api.sendRequest({
					url: '/api/ordercreate/rechargeCreate',
					data: {
						recharge_money: this.recharge_money,
					},
					success: res => {
						this.out_trade_no = res.data;
						// console.log(this.indexa);
						// this.indexa 0 微信支付 1支付宝支付
						// #ifdef MP-ALIPAY
						if (this.indexa == 0) {
							this.alipay()
						}
						// #endif
						// #ifdef MP-WEIXIN
						if (this.indexa == 0) {
							this.weixinPay()
						}
						// #endif
						// #ifdef APP-PLUS
						if (this.indexa == 0) {
							this.baofuWx()
						} else if (this.indexa == 1) {
							this.alipay()
						}
						// #endif


					}
				})
				// this.show = false
				// this.$util.showToast({
				// 	title: '支付成功'
				// });
			},
			// 支付宝支付
			alipay() {

				// #ifdef MP-ALIPAY
				console.log(`MP-ALIPAY`);
				this.aliPay()
				// #endif
				// #ifdef APP-PLUS
				console.log(`APP-PLUS`);
				this.$api.sendRequest({
					url: '/api/pay/getAliSchemeUrl',
					data: {
						token: this.token,
						out_trade_no: this.out_trade_no,
						goods_type: 2,
						pay_money: this.recharge_money,
						page: 'pages_tool/pay/index'
					},
					success: res => {
						console.log(res, 'res');
						// #ifdef APP-PLUS
						plus.runtime.openURL(res.data.openlink);
						// #endif
						// #ifndef APP-PLUS
						window.open(res.data.openlink)
						// #endif
						this.show = false
						// this.$util.showToast({
						// 	title: '支付成功'
						// });
					}
				})
				// #endif
			},
			// 宝付支付
			baofuWx() {
				// console.log('/pages_tool/pay/index?token=' + uni.getStorageSync('token') +
				// 	'&out_trade_no=' + this.out_trade_no + '&goods_type=2');
				// #ifdef MP-WEIXIN || APP-PLUS
				this.weixinPay()
				// #endif
				// // #ifndef MP-WEIXIN
				// this.$api.sendRequest({
				// 	url: '/api/pay/getSchemeUrl',
				// 	data: {
				// 		token: this.token,
				// 		out_trade_no: this.out_trade_no,
				// 		goods_type: 2,
				// 		pay_money: this.recharge_money
				// 	},
				// 	success: res => {
				// 		console.log(res, 'res');
				// 		// #ifdef APP-PLUS
				// 		plus.runtime.openURL(res.data.openlink);
				// 		// #endif
				// 		// #ifndef APP-PLUS
				// 		window.open(res.data.openlink)
				// 		// #endif
				// 		this.show = false
				// 		// this.$util.showToast({
				// 		// 	title: '支付成功'
				// 		// });
				// 	}
				// })
				// // #endif
			},
			async aliPay() {
				try {
					let provider = 'alipay'
					// 微信登录
					const loginRes = await uniLogin({ provider })
					console.log(loginRes, 'loginRes');
					
					this.aliCode = loginRes.code;
					// return
					// 请求后端
					// let url = '/api/boofopay/unifiedOrder';
					// debug 模式调用 测试支付接口
					// appBaseInfo = wx.getAppBaseInfo()
					// if (appBaseInfo.enableDebug)
					// 	url = '/api/boofopay/test'
					// goods_type 默认1 充值余额2

					let url = '/api/boofopay/rechargeUnifiedOrder'
					const res = await this.$api.sendRequest({
						url,
						data: {
							token: this.token,
							code: this.aliCode,
							payCode: "ALIPAY_JSAPI", //payCode  支付宝：ALIPAY_JSAPI 微信：WECHAT_JSAPI
							out_trade_no: this.out_trade_no,
							goods_type: 2,
						},
						async: false
					})
					// 拼接支付参数

					const { trade_no } = res.data.chlRetParam
					await requestPayment({
						provider,
						orderInfo: trade_no
					});

					// 退出小程序
					// wx.exitMiniProgram()
					this.getBalance()
					this.$refs.mescroll.refresh();
					this.show = false;
				} catch (e) {

					//TODO handle the exception
					console.log(e);
				}
			},
			async weixinPay() {
				try {
					let provider = 'weixin'
					// 微信登录
					const loginRes = await uniLogin({ provider })
					// console.log(loginRes, 'loginRes');
					const wxCode = loginRes.code ;
					// 请求后端
					// console.log('wxCode', wxCode);
					// return
					const appBaseInfo = wx.getAppBaseInfo()
					// console.log(666);
					// let url = '/api/boofopay/rechargeUnifiedOrder'
					let url = '/api/boofopay/preRechargeUnifiedOrder'
					const res = await this.$api.sendRequest({
						url,
						data: {
							token: this.token,
							// code: wxCode,
							payCode: "WECHAT_JSAPI", //payCode  支付宝：ALIPAY_JSAPI 微信：WECHAT_JSAPI
							out_trade_no: this.out_trade_no,
							goods_type: 2  

						},
						// success: res => {

						// 	if (res.code < 0) {
						// 		this.$util.showToast({
						// 			title: res.message
						// 		});
						// 	}
						// },
						async: false
					})

					// console.log('获取宝付的token', res.data);
					// #ifdef MP-WEIXIN
						uni.navigateToMiniProgram({
							appId:'wx9f0f95c42bcf73c9',
							path: `pages/pay-plugin/pay-plugin?tradeNo=${res.data.token}&type=BF`,
							success: () => {
								// this.$util.redirectTo('/pages/member/index');
								this.getBalance()
								this.$refs.mescroll.refresh();
								this.show = false;
							}
						})
					// #endif
					// #ifdef APP-PLUS
						 plus.share.getServices(response => {
							let sweixin = null;

							for (let i = 0; i < response.length; i++) {
							  let t = response[i];
							  if (t.id == 'weixin') {
								sweixin = t;
							  }
							}
							if(sweixin) {
								sweixin.launchMiniProgram({
									id:'gh_d3de2c52074f',
									type: 0,
									path: `pages/pay-plugin/pay-plugin?tradeNo=${res.data.token}&type=BF`,
									success: () => {
										this.show = false
										this.$util.showToast({
											title: '支付成功'
										});
									}
								})
							} else {
								plus.nativeUI.alert('当前环境不支持微信操作!');
							}
						 })
					// #endif
					// 拼接支付参数
					// const { timeStamp, nonceStr, package: payPackage, signType, paySign } = res.data.chlRetParam
					// 	.wc_pay_data
					// await requestPayment({
					// 	provider,
					// 	timeStamp,
					// 	nonceStr,
					// 	package: payPackage,
					// 	signType,
					// 	paySign,
					// });
					// 退出小程序
					// wx.exitMiniProgram()
					// this.getBalance()
					// this.$refs.mescroll.refresh();
					// this.show = false;
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .mescroll-uni-content {

		background-color: #FFFFFF;

		.jcsb {
			width: calc(100 vw - 64rpx) !important;
		}
	}

	.head {
		width: 686rpx;
		height: 232rpx;
		background: linear-gradient(130deg, #21BBF3 0%, #09B6FF 100%);
		border-radius: 24rpx;
		padding: 0 48rpx;
		box-sizing: border-box;
		margin: 0 auto;
		margin-top: 32rpx;

		.head-yu {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 40rpx;
			margin-top: 48rpx;
		}

		.head-one {
			font-size: 64rpx;
			font-family: DINAlternate-Bold, DINAlternate;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 64rpx;
			margin-top: 16rpx;

			span {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 40rpx;
				margin-left: 8rpx;
			}
		}

		.covip {
			width: 152rpx;
			height: 64rpx;
			background: #FFFFFF;
			border-radius: 32rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #21BBF3;
			line-height: 40rpx;
			margin-top: 88rpx;
		}
	}

	.list {
		width: calc(100 vw - 64rpx);
		height: 100%;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 32rpx 32rpx 40rpx 32rpx;
		box-sizing: border-box;
		margin: 0 auto;
		margin-top: 30rpx;

		.card {
			width: calc(100% - 64rpx);
			margin: 20rpx auto;
			display: flex;
			justify-content: space-between;
			padding-bottom: 20rpx;
			border-bottom: #BFBFBF 1rpx solid;

			.time-one {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 34rpx;
				margin: 8rpx 4rpx 0 0;
			}

			.name {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 44rpx;
				margin-bottom: 8rpx;
			}

			.right {
				font-size: 40rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #222222;

			}
		}



		.name-cz {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
			line-height: 40rpx;
			margin-top: 32rpx;
		}



		.time-two {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			margin-top: 8rpx;
		}

		.sex {
			font-size: 40rpx;
			font-family: DINAlternate-Bold, DINAlternate;
			font-weight: bold;
			color: #222222;
			line-height: 48rpx;
			margin-top: 48rpx;
		}

		.xukjs {

			width: 622rpx;
			height: 1rpx;
			background: #E8E8E8;
			border-radius: 2rpx;
			margin-top: 32rpx;


		}

	}

	.Recharge {
		width: 750rpx;
		height: 854rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;

		image {
			width: 40rpx;
			height: 40rpx;
		}

		.qinru {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
			line-height: 44rpx;
			margin-top: 40rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
		}

		.mannin {
			margin-top: 64rpx;
			display: flex;
			flex-wrap: wrap;

			.mannin-one {
				width: 202rpx;
				height: 104rpx;
				background: rgba(33, 187, 243, 0.08);
				border-radius: 16rpx;
				font-size: 36rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #21BBF3;
				line-height: 64rpx;
				margin: 10rpx 24rpx;
			}

		}

		.head-pay {
			padding: 24rpx 0 0 32rpx;
			// margin-top: 24rpx;
		}

		.head-pay div:nth-child(2) {
			// margin-left: 68rpx;
			position: relative;

			input {
				// border: 1rpx solid red;
				width: 700rpx;
				height: 70rpx;
				background: #F6F6F6;
				border-radius: 16rpx;
				margin: 0 auto;
				padding: 0 68rpx;
				box-sizing: border-box;
			}

			.arr {
				font-size: 36rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #21BBF3;
				line-height: 44rpx;
				position: absolute;
				top: 50%;
				left: 20rpx;
				transform: translateY(-50%);
			}

			.box {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 24rpx;
			}
		}

		.about {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #BFBFBF;
			line-height: 34rpx;
			margin: 16rpx 0 32rpx 0;
			margin-left: 30rpx;
		}

		.xuind {
			width: 654rpx;
			height: 1rpx;
			background: #E8E8E8;
			margin: 0 auto;
			border-radius: 2rpx;
			margin-bottom: 4rpx;
		}

		.Select-payment {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 24rpx;
			padding: 32rpx;
			box-sizing: border-box;
			margin: 0 auto;

			.arr {
				margin-right: 16rpx;
				margin-bottom: 32rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
					margin-left: 16rpx;
				}
			}
		}

		.btn-qz {
			width: 686rpx;
			height: 80rpx;
			background: #21BBF3;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 40rpx;
			margin: 0 auto;

		}

	}
</style>