<template>
	<view>
		<view class="bg-blue padding text-white text-center">
			<view class="">{{info.name}}</view>
			<view class="margin-tb text-xl">
				¥
				<text class="text-xxxl margin-left-xs num">{{info.price}}</text>
			</view>
			<view class="opacity text-sm">订单号:{{info.temp_order_id}}</view>
		</view>
		<view class="text-lg padding text-ssblue">支付方式</view>
		<!-- 支付方式列表 -->
		<form @submit="formSubmit">
			<view class="padding">
				<radio-group name="pay_type" class="bg-white radius grace-box-shadow">
					<block v-for="(v, k) in pay_type" :key="k">
					<label class="padding grace-space-between grace-flex-vcenter grace-border-b">
						<view :class="v.icon"></view>
						<text class="text-sblue text-df grace-flex-v1">{{v.name}}</text>
						<radio :checked="v.checked" :value="v.value"></radio>
					</label>
					</block>
				</radio-group>
				<view class="margin-top">
					<button type="primary" formType="submit" :disabled="btn.disabled" :loading="btn.loading" class="grace-button buttom-radius buttom-shadow margin-top-xxl">
						<text class="padding-left-xs">{{btn.text}}</text>
					</button>
				</view>
			</view>
			<view ref="initHtml" class="initHtml">
							
			</view>
		</form>
		<pageLoading :pageLoading="pageLoading"></pageLoading>
	</view>
</template>

<script>
var self;
var mount;
import graceChecker from "@/lib/graceUI/jsTools/graceChecker.js";
export default {
	data() {
		return {
			// 按钮
			btn:this.Dever.btn(this, '确认支付'),
			pay_type:[],
			info:{
				name : '',
				price : '',
				temp_order_id : '',
			},
		};
	},
	mounted() {
		this.Dever.initHtml(this);
	},
	onLoad: function(option) {
		this.code = option.code;
		if (option.token) {
			this.Dever.setToken(option.token);
		}
		this.Dever.checkLogin();
		this.getInfo();
	},
	onShow : function() {
		uni.hideLoading();
	},
	// 返回或卸载页面的提示，但弹不出来在H5调试
	/*
	onBackPress:function(e) {
		console.log(e);
		if (e.from == 'backbutton') {
			this.$utils
				.showModal('提示', '订单尚未支付,确认退出吗?', true, '继续支付', '确定')
				.then(() => {
					console.log('确定');
					uni.navigateBack({
						delta: 1
					});
				})
				.catch(() => {
					console.log('继续支付');
				});
			return true; //阻止默认返回行为
		}
	},
	*/

	methods: {
		getInfo: function() {
			var self = this;
			this.Dever.get(this, 'buyInfo', {code:this.code}, function(e) {
				self.pay_type = e.pay_type;
				self.info = e.info;
			});
		},
		formSubmit: function(e) {
			// 表单验证
			var self = this;
			var rule = [{ name: 'pay_type', checkType: 'notnull', errorMsg: '请选择支付方式' }];
			var formData = e.detail.value;
			var checkRes = graceChecker.check(formData, rule);
			// 验证通过
			if (checkRes) {
				formData.code = self.code;
				formData.refer = self.Dever.host + '/pages/pay/payMsg';
				formData.source = self.Dever.source;
				if (formData.pay_type == 'value_2' && this.Dever.wxTip()) {
					return;
				}
				this.Dever.post('buyOrder', formData, function(r) {
					if (self.Dever.source == 'h5') {
						uni.hideLoading();
						uni.showLoading({title: '跳转中', mask: true});
						self.Dever.html(r.order);
					}
					if (self.Dever.source == 'app') {
						self.Dever.appPayment(r.type, r.order, function() {
							self.Dever.location('pay/payMsg?code=' + self.code, 'to');
						}, function() {
							self.Dever.location('pay/payMsg?code=' + self.code, 'to');
						});
					}
				}, function(e) {
					self.Dever.alert(e.info);
				});
			} else {
				uni.showToast({ title: graceChecker.error, icon: 'none' });
			}
		},
	
	}
};
</script>

<style>
page {
	background-color: #ffffff;
}

.initHtml{
	display:block;
}

.pay_wechat {
	width: 50rpx;
	height: 50rpx;
	background: url('data:image/png;base64,[encoded data, 28700 characters]');
	background-size: auto 100%;
	margin-right: 20upx;
}
.pay_alipay {
	width: 50rpx;
	height: 50rpx;
	background: url('data:image/png;base64,[encoded data, 29184 characters]');
	background-size: auto 100%;
	margin-right: 20upx;
}
</style>
