<template>
	<view>
		<view class="top-box d-c d-c-s">
			<view class="f30 gray3 mb20">{{ $t('w_0212') }}</view>
			<view class="d-b-c">
				<view class="f30">{{ currencyIcon() }}</view>
				<input class="recharge-input fb" type="digit" v-model="money" placeholder="0.00" />
			</view>
		</view>
		<view class="pay-list">
			<view class="pay-item d-s-c f30 gray3" style="border: none;">{{ $t('w_0215') }}</view>
			<template v-if="pay_type == 20">
				<view class="d-b-c pay-item" @click="changePayType(2, 2, '')">
					<image class="pay-icon" src="/static/icon/pay-wallet.png" mode=""></image>
					<view class="flex-1 f26">{{ $t('w_0226') }}</view>
					<view class="radio-check" :class="{ checked: payType == 2 && payChannel == 2 }"></view>
					<!-- <view class="domation fb f30">3</view> -->
					<view class="icon iconfont icon-jiantou" @click="openWX = !openWX" :class="{ checked: openWX }"></view>
				</view>
			</template>
			<template v-if="pay_type == 10">
				<view v-if="payConfig.pay12" class="d-b-c pay-item border-b" @click="changePayType(5, 2)">
					<u-icon width="48rpx" height="47rpx" name="/static/icon/wx.png"></u-icon>
					<text class="m-0-20 flex-1">{{ $t('w_0229') }}</text>
					<view class="radio-check" :class="{ checked: payType == 2 && payChannel == 5 }"></view>
				</view>
				<view v-if="payConfig.pay13" class="d-b-c pay-item border-b" @click="changePayType(6, 2)">
					<u-icon width="48rpx" height="47rpx" name="/static/icon/wx.png"></u-icon>
					<text class="m-0-20 flex-1">{{ $t('w_0230') }}</text>
					<view class="radio-check" :class="{ checked: payType == 2 && payChannel == 6 }"></view>
				</view>
				<view v-if="payConfig.pay15" class="d-b-c pay-item" @click="openHF = !openHF">
					<u-icon width="48rpx" height="47rpx" name="/static/icon/yhk.png"></u-icon>
					<text class="m-0-20 flex-1">{{ $t('w_0231') }}</text>
					<view class="icon iconfont icon-jiantou" :class="{ checked: openHF }"></view>
				</view>
				<view class="autoBox" :class="{ open: !openHF }">
					<view class="d-b-c pay-item border-b" v-for="(item, index) in adaList" :key="index" @click="changePayType(6, 3, item.bindCode)">
						<text class="m-0-20 flex-1">{{ item.bankName + '(' + item.bankNo + ')' }}</text>
						<view class="radio-check" :class="{ checked: bindCode == item.bindCode }"></view>
					</view>
					<view class="d-s-c pay-item border-b" @click="gotoPage('/pages/user/card/otherAdd?type=0')">
						<u-icon name="plus-circle" size="24rpx" color="#333"></u-icon>
						<text class="m-0-20 flex-1">{{ $t('w_0179') }}</text>
					</view>
				</view>
				<view v-if="payConfig.pay4" class="d-b-c pay-item" @click="openJD = !openJD">
					<u-icon width="48rpx" height="47rpx" name="/static/icon/yhk.png"></u-icon>
					<text class="m-0-20 flex-1">{{ $t('w_0234') }}</text>
					<view class="icon iconfont icon-jiantou" :class="{ checked: openJD }"></view>
				</view>
				<view class="autoBox" :class="{ open: !openJD }">
					<view class="d-b-c pay-item border-b" v-for="(item, index) in jdList" :key="index" @click="changePayType(4, 3, item.bindCode)">
						<text class="m-0-20 flex-1">{{ item.bankName + '(' + item.bankNo + ')' }}</text>
						<view class="radio-check" :class="{ checked: bindCode == item.bindCode }"></view>
					</view>
					<view class="d-s-c pay-item border-b" @click="gotoPage('/pages/user/card/otherAdd?type=1')">
						<u-icon name="plus-circle" size="24rpx" color="#333"></u-icon>
						<text class="m-0-20 flex-1">{{ $t('w_0179') }}</text>
					</view>
				</view>
			</template>
		</view>
		<button class="normal-sub-btn" @click="payFunc">{{ $t('MN_F_T_87') }}</button>
		<!-- 	<template v-if="showPop">
			<view class="pop-bg"></view>
			<view class="pop-success" v-if="showPop">
				<view class="d-c d-b-c hh100">
					<view class="d-e-c ww100" @click="showPop = false"><u-icon name="close" size="34rpx"
							color="#999"></u-icon></view>
					<view><u-icon size="77rpx" name="/static/icon/success.png"></u-icon></view>
					<view class="f30 gray3 fb">{{$t('w_0334')}}</view>
					<view class="f28 gray3">{{currencyIcon()}}3000</view>
					<button class="pop-btn">{{$t('w_0035')}}</button>
				</view>
			</view>
		</template> -->
		<popInput :title="$t('w_0251')" :password="true" :placeholder="$t('w_0250')" :isShow="isPassword" @close="closePassword"></popInput>
		<view v-if="isQrcode">
			<view class="pop-bg" @click="isQrcode = false"></view>
			<view class="pop-success-s">
				<view class="d-c d-b-c hh100">
					<view class="d-e-c ww100" @click="isQrcode = false"><u-icon name="close" size="34rpx" color="#999"></u-icon></view>
					<view class="f30 gray3 fb tc mb20">{{ $t('w_0226') }}</view>
					<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
					<button class="pop-btn mt20" @click="isQrcode = false">{{ $t('w_0035') }}</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
/* 引入uQRCode */
import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
import popInput from '@/components/pop-input.vue';
export default {
	components: {
		popInput
	},
	data() {
		return {
			isPassword: false,
			money: '',
			radiovalue1: 10,
			showPop: false,
			payConfig: {
				pay4: true, //京东银行卡
				pay12: true, //宝付微信
				pay13: true, //汇付微信
				pay15: true, //汇付银行卡
				pay20: true //微信APP（true=显示，false=不显示）
			},
			jdList: [],
			adaList: [],
			payChannel: -1,
			payType: '',
			bindCode: '',
			openJD: false,
			openHF: false,
			orderCode: '',
			flag: '',
			openZX: false,
			openZH: false,
			pay_type: 10,
			businessType: 3,
			isQrcode: false,
			payTime: false
		};
	},
	onReady() {},
	onLoad() {
		// #ifdef APP-PLUS
		this.getPayType();
		// #endif
		// #ifndef APP-PLUS
		this.pay_type = 10;
		// #endif
	},
	onShow() {
		this.getPayconfig();
		this.getJdFast();
		this.getAdaFast();
	},
	methods: {
		getQrcode(e) {
			let self = this;
			self.isQrcode = true;
			self.$nextTick(() => {
				// 获取uQRCode实例
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = e;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 200;
				// 调用制作二维码方法
				console.log(11111);
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', self); // 如果是组件，this必须传入
				console.log(canvasContext);
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
			});
		},
		getPayType() {
			let self = this;
			let url = this.config.yxyapi;
			uni.request({
				url: url + '/yiti.php',
				data: {
					type: 2,
					platform: self.getPlatform()
				},
				success: result => {
					console.log(result);
					var data = result.data;
					self.pay_type = data.pay_type;
				},
				error: error => {
					console.log('----------------error');
					console.log(error);
				}
			});
		},
		changePayType(payChannel, payType, bindCode) {
			if (payChannel == -1 && payType == -1 && bindCode == '') {
				this.openZH = !this.openZH;
			}
			this.payChannel = payChannel;
			this.payType = payType;
			this.bindCode = bindCode || '';
		},
		/* 京东银行卡绑卡列表 */
		getPayconfig() {
			let self = this;
			self._get('pay/config', {}, res => {
				self.payConfig = res.data;
			});
		},
		/* 京东银行卡绑卡列表 */
		getJdFast() {
			let self = this;
			self._get('pay/jd-fast/list', {}, res => {
				self.jdList = res.data;
			});
		},
		/* 汇付银行卡绑卡列表 */
		getAdaFast() {
			let self = this;
			self._get('pay/ada-fast/list', {}, res => {
				self.adaList = res.data;
			});
		},
		closePassword(e) {
			console.log(e);
			if (e) {
				if (this.payChannel == 4) {
					this.jdFast(e);
				}
				if (this.payChannel == 6) {
					this.adaFast(e);
				}
			}
			this.isPassword = false;
		},
		adaFast(e) {
			let self = this;
			let params = {
				smsCode: e,
				bindCode: self.bindCode,
				orderCode: self.orderCode
			};
			self._post('pay/ada-fast/pay-confirm', params, res => {
				uni.showModal({
					title: self.$t('w_0034'),
					content: res.msg,
					success() {
						self.money = '';
						self.payChannel = '';
						self.orderCode = '';
						self.payType = '';
						self.bindCode = '';
					}
				});
			});
		},
		jdFast(e) {
			let self = this;
			let params = {
				smsCode: e,
				bindCode: self.bindCode,
				orderCode: self.orderCode
			};
			self._post('pay/jd-fast/pay-confirm', params, res => {
				uni.showModal({
					title: self.$t('w_0034'),
					content: res.msg,
					success() {
						self.money = '';
						self.payChannel = '';
						self.orderCode = '';
						self.payType = '';
						self.bindCode = '';
					}
				});
			});
		},
		/* 点击充值 */
		payFunc() {
			if (!this.money || this.money <= 0) {
				uni.showToast({
					title: this.$t('S_C_70') + this.$t('w_0212'),
					icon: 'none'
				});
				return;
			}
			if (this.payType === '') {
				uni.showToast({
					title: this.$t('CK_KS_38') + this.$t('w_0215'),
					icon: 'none'
				});
				return;
			}
			this.preCharge();
		},

		/* 在线预充值 */
		preCharge() {
			let self = this;
			self._get(
				'member/api/recharge/preCharge',
				{
					rechargeAmount: self.money
				},
				res => {
					if (res.flag == 1) {
						self.orderCode = res.orderCode;
						self.zxPay();
					} else {
						uni.showToast({
							title: self.$t('请稍后再试！'),
							icon: 'none'
						});
					}
				}
			);
		},
		/* 支付状态 */
		zxPay() {
			let self = this;
			let params = {
				payChannel: self.payChannel,
				businessCode: self.orderCode,
				businessType: self.businessType,
				payType: self.payType,
				bindCode: self.bindCode
			};
			uni.showLoading({
				title: 'Loading....'
			});
			self._post(
				'pay/unifiedorder',
				params,
				res => {
					if (res.code == 200) {
						/* 微信支付 */
						if (self.payType == 2) {
							self.getQrcode(res.data);
							self.payTime = true;
							self.payStatus();
						}
						if (self.payType == 3) {
							self.isPassword = true;
						}
					}

					console.log(res);
					uni.hideLoading();
					// pay(res, self);
				},
				err => {
					uni.hideLoading();
				}
			);
		},
		closeCode() {
			this.isQrcode = false;
			this.payTime = false;
		},
		payStatus() {
			let self = this;
			let params = {
				payChannel: self.payChannel,
				businessCode: self.orderCode,
				businessType: self.businessType,
				payType: self.payType,
				bindCode: self.bindCode
			};
			let callback = function() {
				self._get('pay/status', params, res => {
					if (res.data == 1) {
						self.closeCode();
						self.money = '';
						self.payChannel = '';
						self.orderCode = '';
						self.payType = '';
						self.bindCode = '';
						uni.showModal({
							title: self.$t('w_0034'),
							content: self.$t('w_0335'),
							showCancel: false
						});
					} else {
						if (self.payTime) {
							self.payStatus();
						}
					}
				});
			};
			setTimeout(function() {
				callback();
			}, 5000);
		}
	}
};
</script>

<style lang="scss">
.top-box {
	margin-top: 7rpx;
	margin-bottom: 21rpx;
	height: 166rpx;
	background: #ffffff;
	padding: 30rpx;
	box-sizing: border-box;
}

.recharge-input {
	font-size: 42rpx;
	line-height: 1.5;
	flex: 1;
}

.pay-list {
	background-color: #ffffff;
	padding: 0 30rpx;
	margin-bottom: 60rpx;
}

.pay-item {
	height: 115rpx;
	border-bottom: 1rpx solid #eee;
}

.pay-item:last-child {
	border: none;
}

.pay-icon {
	width: 48rpx;
	height: 48rpx;
}

.radio-check {
	width: 32rpx;
	height: 32rpx;
	background: #ffffff;
	border: 2rpx solid #dddddd;
	border-radius: 50%;
	margin-right: 11rpx;
	margin-left: 20rpx;
	position: relative;
	box-sizing: border-box;
}

.radio-check.checked {
	border: none;
	background-color: #fb3024;
}

.radio-check.checked::after {
	content: '';
	position: absolute;
	z-index: 1;
	width: 16rpx;
	height: 16rpx;
	background: #ffffff;
	border-radius: 50%;
	left: 8rpx;
	top: 8rpx;
}

.icon.icon-jiantou {
	font-size: 26rpx;
	color: #999;
	font-weight: bold;
	margin-left: 10rpx;
	transition: transform 0.4s;
}

.icon.icon-jiantou.checked {
	transform: rotate(90deg);
}

.autoBox {
	min-height: 100rpx;
	padding: 20rpx 0;
	transition: all 0.6s ease;
	box-sizing: border-box;
}

.autoBox.open {
	height: 0;
	min-height: 0;
	overflow: hidden;
	padding: 0;
}

.pop-success-s {
	position: fixed;
	z-index: 99;
	width: 664rpx;
	background: #ffffff;
	border-radius: 10px;
	padding: 50rpx 20rpx;
	box-sizing: border-box;
	left: 0;
	top: 20%;
	right: 0;
	margin: auto;
}
</style>
