<template>
	<view class="whiteItem">
		<view class="bigmoney">¥<text>{{money}}</text></view>
		
		<view class="countdown">
			 支付剩余时间
			<uni-countdown style="display: inline-block;" color="#999" splitorColor="#999" @timeup="timeup"
				:show-day="false" :show-hour="true" :start="true" :minute="countdown.minute"
					:second="countdown.second"></uni-countdown>
		</view>
		
		<radio-group @change="payChange">
			<label class="uni-list-cell uni-list-cell-pd">
				<view class="littleimgBox">
					<image class="littleimg" src="@/static/zf01.png"></image>微信支付
				</view>
				<view>
					<radio checked="checked" value="7" />
				</view>
			</label>
		</radio-group>
	</view>
	
	<view class="bbfix" v-if="!isClick">
		<view class="subBtn" @click="submit"> 确认支付 </view>
	</view>
	
	<uni-popup ref="alertDialog" type="dialog">
		<uni-popup-dialog type="info" cancelText="取消" confirmText="确定" content="是否确认支付？" @confirm="dialogConfirm" 
			@close="dialogClose"></uni-popup-dialog>
	</uni-popup>
	<uni-popup ref="alertPayOk" type="dialog">
		<uni-popup-dialog type="success" confirmText="查看订单详情" cancelText="继续预订"  content="支付成功" @confirm="goBillDetail"  @close="goBack">
		</uni-popup-dialog>
	</uni-popup>
	<uni-popup ref="alertPayWrong" type="dialog">
		<uni-popup-dialog type="error" confirmText="查看订单详情" content="支付失败" @confirm="goBillDetail" @close="goBillDetail">
		</uni-popup-dialog>
	</uni-popup>
</template>

<script setup>
import {reactive,toRefs,ref} from 'vue';
import {onLoad,onShow} from '@dcloudio/uni-app';
import * as hotel from '@/common/hotel.js';
	const data = reactive({
		money:'',orderId:'',
		alertDialog:null,
		alertPayOk:null,
		alertPayWrong:null,isClick:false,lockPay:false,surplus:0
	})
	const {
		money,alertDialog,alertPayOk,alertPayWrong,orderId,isClick,lockPay,surplus
	} = toRefs(data);
	const countdown = ref({
		start: false,
		minute: 15,
		second: 0
	})
	const form = ref({
		payType: '7'
	});
	onLoad((options)=>{
		money.value = options.money
		orderId.value = options.orderId
		if(options.surplus){
			surplus.value = options.surplus
			countdown.value = {
				start: true,
				minute: Number(surplus.value.split(',')[0]),
				second: Number(surplus.value.split(',')[1])
			}
		} else {
			init()
		}
	})	
function init(){
	countdown.value = {
		start: true,
		minute: 15,
		second: 0
	}
}
	function payChange(evt) {
		form.value.payType = evt.detail.value
	}
	function timeup() {
		if (countdown.value.start) {
			// 自动取消订单
			uni.showModal({
				title: '提示',
				content: '订单支付已超时',
				showCancel: false,
				success: function(res) {
					if (res.confirm) {
						uni.navigateBack()
					}
				}
			})
		}
	}

function submit(){
	alertDialog.value.open()
}
	function dialogConfirm() {
		// console.log(isClick.value)
		if(isClick.value == true){
			return
		} else {
			isClick.value = true
			uni.showLoading({
				title: '支付中...'
			});
			goPayForOrder()
		}
	}
	function goPayForOrder(){
		hotel.payForOrder(orderId.value).then(res=>{
			isClick.value = false
			if (res.data.weixinData) {
				wePay(res.data.weixinData)
			} else {
				uni.hideLoading()
				uni.showModal({
					title: '提示',
					content: '暂时无法支付，请稍后重试',
					// content: '支付成功',
					showCancel: false,
					success: function (res) {
						// uni.navigateBack()
						let path = `/pages_hotel/hotel/billDetail?orderType='all'&trainId=${b.trainId}&status=${b.status}`;
						uni.navigateTo({
							url: path
						});
					}
				});
			}
		})
	}
	
	function wePay(configdata){
		uni.requestPayment({
			"provider": "wxpay",
			"appId": configdata.appId,
			"nonceStr": configdata.nonceStr,
			"package": configdata.packageValue, // 随机字符串
			"timeStamp": configdata.timeStamp, // 时间戳（单位：秒）
			"signType": configdata.signType, // 签名，这里用的 MD5/RSA 签名
			"paySign": configdata.paySign,
			success(res) {
				alertPayOk.value.open()
				uni.hideLoading()
				// subscribe()
			},
			fail(e) {
				uni.showToast({
					title: '支付取消',
					icon: 'none',
					duration: 2000
				})
		
			}
		})
	}
function popChoose() {
	popup.value.open();
}
function dialogClose() {
	alertDialog.value.close()
	lockPay.value = false
}
function changeRoomNum(e){
	console.log(e)
	rzUserArr.value.length = e
	money.value = (roomInfo.value.roomPrice*form.value.roomNum).toFixed(2)
}	
function goBillDetail(){
	let path = `/pages_hotel/hotel/myBills`;
	uni.redirectTo({
		url: path
	});
}
function goBack(){
	uni.navigateBack()
}
</script>

<style lang="scss" scoped>
	.countdown{text-align: center;font-size: 28rpx; color: #999;margin: 20rpx 0;}
	.bigmoney{text-align: center;
		font-size: 30rpx;
		text{font-size: 70rpx;margin: 0 10rpx;}
	}
	.whiteItem{		width: 700rpx;
		box-sizing: border-box;
		margin: 26rpx auto 26rpx;
		padding: 26rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 27rpx 0rpx #DEDEDE;
		border-radius: 15rpx;}

	.bbfix {
		background: #fff;
		height: 200rpx;
		position: fixed;
		z-index: 89;
		width: 100%;
		bottom: 0;    padding: 30rpx 0 0;
		align-items: baseline;
		border-top: 1rpx solid #dcdcdc;

		.price {
			padding-left: 20rpx;

			text {
				font-weight: bold;
				font-size: 45rpx;
				color: #ff8124;
			}
		}
		.subBtn {
			font-size: 36rpx;
			color: #ffffff;
			background: #ff8124;
			height: 100rpx;
			line-height: 100rpx;
			padding: 0 30rpx;width: 80%;
    margin: auto;
    text-align: center;
		}
	}
	
	.uni-list-cell::after {
		display: none;
	}
	
	.littleimgBox {
		display: flex;
		align-items: center;
	}
	
	.littleimg {
		width: 50rpx;
		height: 50rpx;
		margin-right: 15rpx;
	}
</style>