<!-- payPage.vue -->

<template>
  <view>
	  <!-- <view></view> -->
	  <!-- <iframe :src="url" frameborder="0"></iframe> -->
    <web-view :src="url" @message="handleMessage"></web-view>
	<!-- <view @click="payBack" style="z-index: 99999;position: fixed;bottom: 20rpx;text-align: center;color: #fff;width: 100%;">返回查看订单</view> -->
	<!-- 退出登录弹框 -->
	<popup-view v-model="logOutvisible" mode="center" border-radius="15" zIndex="9999">
		<view class="log-out">
			<view class="log-out-tip">是否支付成功？</view>
			<view class="log-out-footer">
				<view class="cancel" @click="closeLogOut">未完成支付</view>
				<view class="shu"></view>
				<view class="log-out-submit" @click="submitLogOut">已完成支付</view>
			</view>
		</view>
	</popup-view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/index/paySuc"></page-popup>
  </view>
</template>

<script>
	import {
		
		coinPaidApi
	} from '@/API/user.js'
export default {
  data() {
    return {
      url: '' ,// 支付页面的URL
	  no:'',
	  rookieTimer:null,
	  boxId:0,
	  type:0,
	  boxOrderNo:'',
	  logOutvisible:false,
	  timeSec:0
    };
  },
  onLoad(query) {
    this.url = decodeURIComponent(query.url);
	this.boxOrderNo = query.boxOrderNo
	this.no = query.no
	this.boxId = query.boxId
	this.type = query.type
  },
  watch:{
	  timeSec(){
		  if(this.timeSec == 30){
			  clearInterval(this.rookieTimer)
			  this.rookieTimer = null
			  this.logOutvisible = false
			  this.$api.msg('未查询到支付结果')
		  }
	  },
  },
  methods:{
	  closeLogOut(){
		  this.logOutvisible = false
	  },
	  submitLogOut(){
		  this.getCoinPaid(this.no)
		  this.rookieTimer = setInterval(() => {
			this.timeSec += 3
			this.logOutvisible = false
		  	this.getCoinPaid(this.no)
		  }, 3000);
	  },
	  payBack(){
		 // uni.redirectTo({
		 // 	url: `/pages/mine/topUp?price=${this.settlement}&coin=${this.coin}&gift=${this.gift}&no=${this.no}`
		 // })
	  },
	  getCoinPaid(no) {
		  this.logOutvisible = false
		  uni.showLoading({
		  	
		  })
	  	coinPaidApi({
	  		no
	  	}).then(payResult => {
	  		if (payResult.data) {
	  			clearInterval(this.rookieTimer); // 清除定时器
	  			this.rookieTimer = null;
	  			this.$emit('isOk')
	  			this.$api.msg('支付成功')
	  			uni.navigateTo({
	  				url: `/pages/index/draw?no=${this.boxOrderNo}&boxId=${this.boxId}&type=1`
	  			})
	  			// uni.redirectTo({
	  			// 	url: `/pages/index/boxPaySuccess?no=${this.boxOrderNo}&boxId=${this.previewData.boxId}&name=${this.previewData.name}&type=${this.previewData.type}&sale=${this.previewData.amount.sale}`
	  			// })
	  			uni.hideLoading()
	  		}
	  	}).catch(err => {
	  		clearInterval(this.rookieTimer); // 清除定时器
	  		this.rookieTimer = null;
	  		uni.hideLoading()
	  	})
	  },
  },
  onHide() {
	 this.logOutvisible = true
  },
  onUnload() {
  	// 在页面离开时清除定时器
  	clearInterval(this.rookieTimer);
  }
};
</script>
<style lang="scss" scoped>
	.log-out{
		width: 590rpx;
		height: 300rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		.log-out-tip{
			height: 200rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: rgba(0,0,0,0.85);
			line-height: 200rpx;
			text-align: center;
		}
		.log-out-footer{
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 2rpx solid rgba(0,0,0,0.06);
			height: 100rpx;
			.cancel{
				width: 294rpx;
				height: 100rpx;
				line-height: 100rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				text-align: center;
				border-right: 1px solid rgba(0,0,0,0.06);
			}
			.log-out-submit{
				width: 294rpx;
				height: 100rpx;
				line-height: 100rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #E55353;
				text-align: center;
			}
		}
	}
</style>