<template>
	<view style="height: 100%;display: flex;flex-direction: column;align-items: center;">
		<view
			style="display: flex;flex-direction: column;align-items: center;overflow-y: scroll;flex:1;padding-top: 60rpx;">
			<view style="color: #666;margin-left: 20rpx;margin-right: 20rpx;text-align: center;font-size: 24rpx;">
				{{convertSecondsToHMS(page.countdown)}}
			</view>
			<view>
				<text style="color: black;font-size: 35rpx;font-weight: bold;">￥</text>
				<text style="color: black;font-size: 70rpx;font-weight: bold;">{{data.price}}</text>
			</view>
			<view style="color: #666;margin-left: 20rpx;margin-right: 20rpx;text-align: center;font-size: 24rpx;">
				{{data.goods}}
			</view>

			<view style="background: #ffffff;margin-top: 100rpx;border-radius: 20rpx;width: calc(100vw - 40rpx);">
				<radio-group @change="radioChange">
					<label
						style="width: 100%;height: 120rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;"
						v-for="(item, index) in  page.real" :key="index">
						<view style="width: 100%;height: 120rpx;display: flex;flex-direction: row;align-items: center;">
							<image :src="item.image" style="width: 55rpx;height: 55rpx;margin-left: 25rpx;"></image>
							<text style="flex: 1;font-size: 30rpx;margin-left: 6rpx;">{{item.pay}}</text>
							<radio style="transform:scale(0.8);margin-right: 25rpx;" :checked="index==0"
								:value="index+''" :activeBackgroundColor="item.btnColor" />
						</view>
						<view v-if="index != page.real.length-1"
							style="width: 93%;height: 1px;background-color: #f1f2f3;"></view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="btn" :style="{'background': page.real[page.selected].btnColor}" @click="createOrder">
			{{page.submitText}}
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '../../utils/pay_http.js'
	export default {
		data() {
			return {
				page: {
					// 本插件提供的支付方式
					supports: [{
						payType: 'wxpay',
						pay: '微信',
						image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAADcUlEQVR4nO2ZfVLaUBDAdyFCAGekJyg9Qb2BMBX/lZ4APEHxBOIJSk+gnqD0X6EFT6A9QfUExZkCAUK2u1iYNF98+CiR8ptR92Xy8X4vm7cvEWFD2IqEjf9DJN3UMwMTihyunZgGV+2ccQ8++Iqk6vGPFkCZw9AQAah28v1TDl14iqQa8apF8IHD0BFB+NQ57LsG2CUi6dQ36QeHoSWu4RtnmrlEknW9QkBnHIaYyGkv36tyMOVFiiDgeTdvVMDGVmSdbEUWAx+QoIVR/rHgHmxwXcoCQQaQCgSwx5uWYsUieBMFqPzKGy2Yg2QjWSCyygB0wM2FWIkIn+AxAliYV8DJH6EqC73m5lwoF+EU+h7bSWTbuXabm0uTbqbTg2GvRQhvuTkTpSKqJCaITN80anxnDrgZiDIRPugxpiUyqiSEVEMvElGZAPa5GYg6EYy+7x52axw+C7kLw5FxbFlQ4VucAUYWhdaMBasSEUmp7lF/n8OlEYGBaXBnx3cgzZukI19iGpZlMZi81i8JqcibPVEiwmPmWrAJ0rlZqSYr68EIzoioBFPwgaftkn3We5rJRp859ESJiNcSetxBk24BoydeKbdb17MWQpFsAnzhR/5ddXZIkEHpm72fHHqCKkR6+b7rGCFZj9cI4DjCb3E7WuJc7o4IjADOOIWyYINPME0j8CFRjxP/8WSlIk+dpiaHY3inNvHgcmjDnUZ+rE1ESF7H77yKGh/gm0Z+rFwkriVeSdpw6CL1VS9ZFl1wOAUJr2I7UAlKIyfyzAW9bisRmVVD+FmRlNrjPW84jSrzpJETrwGxo0aER7h7ZJTABxnNIUTTnVznjptLwYNxSwEVXomIEJRez8U5aXihTAQRL7uHxgmHShnXj6HB9YgyEIAyEWHWs7IMyYZ+Qbai6YdaEa4TGMHTzjvjEhQwr4SgVGRCJIInz5FJNVP7ZJoXFPBwO1mJyKxZzA+Z3WQBCTT+EJHmTXOzGhHbSWXVyt9KjvmkrZ0o3DiL4O43/WBk4T6SlSUA3nc57NecwNf8m0VFooA5TdPvBmZP0mPpzi3CSkRkKiYLspxjGfhHrERkHWxFwsbGiHD1cn03cInI/B70LhAGvL4buESEjfhn6IQwyvhJCL4iwlOaYQGB0txcGwTYjmtUc6aTnUCRl8RWJGxsjMhvudpkUV3iI98AAAAASUVORK5CYII=',
						btnColor: '#FE9039'
					}],
					// 可使用的方式，主要是对App,h5可进行定义，微信小程序定时时无效(因为仅支持微信支付)
					use: [0],
					real: [],
					selected: 0,
					countdown: 0,
					submitText: '确认支付',
					cancleText: '订单已取消'
				},
				data: {
					price: '价格',
					goods: '商品名称',
					remainder: 60000,
					// 生成待支付订单时后台返回的,具体地址是啥，参数是啥由后台提供
					// 唯一支付方式固定为type参数
					pay_url: {
						url: '底梦哲提供，王鹏飞进行组装成绝对地址返回',
						// 底梦哲提接口传参要求，王鹏飞进行组装
						params: {
							// 此参数由本工具进行返回，后台不需要传
							type: '支付方式，由本框架提供',
							// ...更多参数
						}
					},
					// 由前端去设置，查看订单的详情地址
					return_url: '订单详情的地址'
				}
			}
		},
		methods: {
			wxPay(order, o) {

				wx.requestPayment({
					appId: order.appid,
					timeStamp: order.timeStamp, //创建订单时间戳
					nonceStr: order.nonceStr,
					package: order.package, // 订单包
					signType: order.signType, // 加密方式统一'MD5'
					paySign: order.sign, // 后台支付签名返回
					success(res) {
						// 数据源转换成字符
						let data = JSON.stringify(o)
						// 转码传输
						let value = encodeURIComponent(data)
						uni.redirectTo({
							url: '/uni_modules/common-pay/pages/success/success?data=' +
								value
						})
					},
					fail(res) {
						try {
							if (err.errMsg != 'requestPayment:fail cancel') {
								uni.showToast({
									icon: 'error',
									title: '支付失败'
								})
							}
						} catch (e) {
							//TODO handle the exception
						}
					}
				})
			},
			convertSecondsToHMS(seconds) {
				var hours = Math.floor(seconds / (60 * 60)); // 计算小时
				seconds %= (60 * 60); // 取余得到不足1小时的秒数

				var minutes = Math.floor(seconds / 60); // 计算分钟
				seconds %= 60; // 取余得到不足1分钟的秒数

				let result = '支付剩余时间 '
				if (hours > 0) {
					result += (hours < 10 ? '0' + hours : hours) + ":" + (minutes < 10 ? '0' + minutes : minutes) + ":" + (
						seconds < 10 ? '0' + seconds : seconds)
				} else {
					// 不显示小时，直接显示 分钟：秒
					if (minutes > 0) {
						result += (minutes < 10 ? '0' + minutes : minutes) + ":" + (seconds < 10 ? '0' + seconds : seconds)
					} else {
						result += "00:" + (seconds < 10 ? '0' + seconds : seconds)
					}
				}

				return result
			},
			startCountdown() {
				setInterval(() => {
					if (this.page.countdown > 0) {
						this.page.countdown--;
					} else {
						// 秒杀倒计时结束的操作，例如弹出提示或触发秒杀请求
						this.page.submitText = this.page.cancleText
					}
				}, 1000);
			},
			radioChange: function(evt) {
				this.page.selected = parseInt(evt.detail.value)
			},
			createOrder() {

				if (this.page.cancleText === this.page.submitText) {
					uni.showToast({
						icon: 'error',
						title: this.page.cancleText
					})
					return
				}

				// 额外组装type
				let payType = this.page.real[this.page.selected].payType
				this.data.pay_url.params.type = payType

				let o = this.data
				o.color = this.page.real[this.page.selected].btnColor
				o.pay = this.page.real[this.page.selected].pay

				http({
					url: this.data.pay_url.url,
					data: this.data.pay_url.params
				}).then((res) => {
					if ('wxpay' === payType) {
						this.wxPay(res.data, o)
					}
				}).catch((err) => {
					console.log('fail', JSON.stringify(err));
				});
			}
		},
		onLoad(options) {

			try {
				// 跳转携带数据
				this.data = JSON.parse(options.data)
			} catch (e) {
				this.data = JSON.parse(decodeURIComponent(options.data))
			}
			
			this.page.countdown = this.data.remainder;
			if (this.page.countdown <= 0) {
				this.page.submitText = this.page.cancleText
			} else {
				// 开始倒计时
				this.startCountdown();
			}

			// ToDo h5，app下生效
			// 将来支持配置
			// #ifdef APP || H5

			// #endif
			// 微信下生效
			// #ifdef MP-WEIXIN
			// 微信不支持配置
			this.page.use = [0]
			// #endif

			for (var i = 0; i < this.page.use.length; i++) {
				this.page.real.push(this.page.supports[this.page.use[i]])
			}

			if (this.page.real.length < 1) {
				uni.showModal({
					content: '未正确配置支付方式',
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							uni.navigateBack()
						}
					}
				});
				return
			}

			// if (this.page.real.length == 1) {
			// 	// 仅有一个选择时直接调用支付接口
			// 	this.createOrder()
			// }
		}
	}
</script>

<style>
	uni-page-body,
	page {
		background-color: #f1f3f5;
		height: 100%;
	}

	.btn {
		width: calc(100% - 40rpx);
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		border-radius: 50rpx;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
		color: #fff;
	}
</style>