<template>
	<view>
		<cu-custom :isBack="true" style="border-bottom: #EEEEEE 1rpx solid;background-color: #FFFFFF;">
			<block slot="content">
				支付
			</block>
		</cu-custom>
		<view class="" v-if="showLoading"
			style="width: 100vw;height: 100vh;opacity: 0.3;position: fixed;top: 0;left: 0;right: 0;background-color: #000000;z-index: 999;">
			<u-loading mode="flower" size="150" style="position: fixed;top:calc(50% - 75rpx);left: calc(50% - 75rpx) ">
			</u-loading>
		</view>

		<view style="text-align: center;margin-top: 56rpx;">
			<text style="font-size: 28rpx;font-weight: 500;color: #111">支付剩余时间</text>
			<u-count-down :timestamp="timestamp" :show-hours="false" font-size="32" color="#F07940"
				style="margin-left: 30rpx;font-weight: bold;" bg-color="transparent"></u-count-down>
			<!-- <text style="margin-left: 30rpx;font-size: 32rpx;font-weight: bold;color: #F07940;">14:26</text> -->
		</view>

		<view style="text-align: center;margin-top: 52rpx;">
			<text style="font-size: 32rpx;font-weight: 500;color: #111111;">¥</text>
			<text
				style="font-size: 60rpx;font-weight: 500;color: #111111;margin-left: 2rpx;">{{payObject.totalAmount}}</text>
		</view>

		<view
			style="margin-top: 80rpx;border-radius: 15rpx;background-color: #FFFFFF;padding: 36rpx 50rpx 49rpx 40rpx; margin-left: 20rpx;margin-right: 20rpx;">
			<view style="font-size: 28rpx;color: #999999;font-weight: 500;">请选择支付方式</view>
			<view style="height: 1rpx;width: 100%;background-color: #EEEEEE;margin-top: 28rpx;"></view>

			<view class="flex align-center justify-between" style="margin-top: 39rpx;">
				<view class="flex align-center">
					<view>
						<image src="../../static/wechatpay.png" style="height: 60rpx;width: 60rpx;"></image>
					</view>
					<view style="font-weight: bold;color: #111;font-size: 28rpx;margin-left: 28rpx;">
						微信
					</view>
				</view>
				<view @click="selectedPaymentStyle(0)">
					<image v-if="paymentStyle==0" src="../../static/selected_icon.png"
						style="width: 46rpx;height: 46rpx;" mode=""></image>
					<image v-if="paymentStyle==1" src="../../static/unselected_icon.png"
						style="width: 46rpx;height: 46rpx;" mode=""></image>
				</view>
			</view>

			<view class="flex align-center justify-between" style="margin-top: 49rpx;">
				<view class="flex align-center">
					<view>
						<image src="../../static/alipay.png" style="height: 60rpx;width: 60rpx;"></image>
					</view>
					<view style="font-weight: bold;color: #111;font-size: 28rpx;margin-left: 28rpx;">
						支付宝
					</view>
				</view>
				<view @click="selectedPaymentStyle(1)">
					<image v-if="paymentStyle==1" src="../../static/selected_icon.png"
						style="width: 46rpx;height: 46rpx;" mode=""></image>
					<image v-if="paymentStyle==0" src="../../static/unselected_icon.png"
						style="width: 46rpx;height: 46rpx;" mode=""></image>
				</view>
			</view>

		</view>

		<view @click="gotoPayment" class="pay_button">支付</view>

		<u-modal v-model="showQuitModel" :content="modelContent" title="确认要退出支付吗？" confirm-color="#FC6035"
			confirmText='继续支付' cancel-text="确认退出" :showCancelButton="true" @cancel="quitPaymentClick"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timestamp: 15 * 60,
				paymentStyle: 0,
				showQuitModel: false,
				payObject: {},
				modelContent: '订单还未完成支付，请尽快支付',
				showLoading: false,
			}
		},
		onLoad(val) {
			// url:'../index/payment?orderId='+data.orderId+'&totalAmount='+data.totalAmount+'&orderIndex='+data.orderIndex
			this.payObject.orderId = val.orderId
			this.payObject.totalAmount = val.totalAmount
			this.payObject.orderIndex = val.orderIndex

			this.timestamp = (new Date(val.timestamp).getTime() + 15 * 60 * 1000 - new Date().getTime()) / 1000


			// this.timeOut = setTimeout(() => {
			// 	this.getOrderState(val.orderId)
			// }, 3000)
		},
		onShow() {

		},
		onBackPress(e) {
			this.showQuitModel = true
			// console.log("监听返回按钮事件",e);

			//  uni.showModal({
			//  	title:'确认要退出支付吗？',
			// content:'订单还未完成支付，请尽快支付'

			//  })

			// uni.switchTab({
			// 	url:'../order/order'
			// })

			// 此处一定姚要return为true，否则页面不会返回到指定路径
			return true;
		},

		methods: {
			selectedPaymentStyle(index) {
				this.paymentStyle = index
			},
			quitPaymentClick() {
				this.showQuitModel = false
				uni.switchTab({
					url: '../order/order'
				})
			},
			setTimer() {
				setInterval(() => {
					this.getOrderState(val.orderId)
				}, 3000)
			},
			gotoPayment() {

				// uni.navigateTo({
				// 	url:'./waitPayResutlPage?orderId='+ this.payObject.orderId
				// })

				const that = this

				console.log(this.paymentStyle)
				if (this.paymentStyle === 0) {
					homeServerWechatPay.postMessage(JSON.stringify(this.payObject))
					window.homeWechatPayResult = function(res) {
						that.setTimer()
						that.showLoading = true


						// uni.navigateTo({
						// 	url: './waitPayResutlPage?orderId=' + that.payObject.orderId
						// })
					}
				} else {

					// 	var param = {
					// 		// "memberId":uni.getStorageSync('userInfo').memberId,
					// 		orderId:  this.payObject.orderId,
					// 		payWay: '002',
					// 		totalAmount: this.payObject.totalAmount,
					// 		"payType": "SDK"
					// 	}
					// 	console.log(param)
					// 	var that = this


					// 	this.$u.api.orderList(param).then(res => {
					// 		console.log(res)
					// 		if (res.code == 200) {
					// 			uni.navigateTo({
					// 				url:'../order/webView?url'+res.data.payInfo
					// 			})
					// 		}
					// 	}).catch(error => {

					// 	})


					homeServerAlipay.postMessage(JSON.stringify(this.payObject))
					window.homeAliPaySuccessResult = function(res) {
						that.$forceUpdate()
						// uni.navigateTo({
						// 	url:'./waitPayResutlPage?orderId='+ that.payObject.orderId
						// })
					}
					widow.homeAliPayFailResult = function(res) {

					}
				}

			}


		},
		getOrderState(orderId) {
			const that = this
			this.$u.api.payState({
				orderId: orderId
			}).then(res => {
				console.log(res)
				if (res.code == 200) {
					that.showLoading = false
					clearInterval(that.setTimer())
					uni.redirectTo({
						url: '../order/orderDetails?orderId=' + that.payObject.orderId
					})
				}
			}).catch(error => {
				console.log(error)
			})
		}



	}
</script>

<style scoped lang="scss">
	.pay_button {
		margin: 146rpx 75rpx 0rpx 75rpx;
		text-align: center;
		padding-top: 29rpx;
		padding-bottom: 29rpx;
		background-color: #FC6035;
		color: #FFFFFF;
		font-size: 34rpx;
		font-weight: 500;
		border-radius: 100rpx;
	}

	/deep/ .u-model__footer__button {
		border: 1rpx solid #ccc;
		border-radius: 70rpx;
		margin: 20rpx;
		color: #111;
		font-weight: bold;
		// padding: 20rpx;
		height: 74rpx;
		line-height: 70rpx;
	}

	/deep/ .hairline-left {
		border: 1rpx solid #FC6035;
	}

	/deep/ .u-model__footer {
		margin: 20rpx;
	}
</style>
