<template>
	<view class="content">
		<view class="top-content">
			<view class="price">
				<text>¥{{order.price}}</text>
			</view>
			<view class="time">
				<text>支付剩余时间: <text class="countdown">{{countdown}}</text></text>
			</view>
			<view class="block">
				<view class="text-line">
					<text>
						订单编号
					</text>
					<text class="order-code">
						{{order.order_no}}
					</text>
				</view>
				<view class="text-line">
					<text>
						支付方式
					</text>
					<text>
						北部湾支付
					</text>
				</view>
			</view>
			<u-modal color="#f56c6c" :show="overdueDialog"  :showConfirmButton="false"
			width="560rpx">
				<view class="slot-confirmButton">
					<view class="modal">
						<text>
							{{modalContent}}
						</text>
						<view class="button-modal" @click="goBack">返回</view>
					</view>
				</view>
			</u-modal>
		</view>

		
		
		<view class="buttons">
			<view class="button" @click="()=>{payOrder()}">确认支付</view>
			<view class="button-return" @click="goBack">返回</view>
		</view>
		
	</view>
</template>

<script>
	import api from '@/api/api.js'
	import {authState} from '@/util/auth.js'
	import {payState} from '@/util/pay.js'
	export default {
		data() {
			return {
				content:"sdfsdf",
				order_no:"",
				order:{
					order_no:"",
					product_name:"",
					price:"",
					state:1,
					count_time:180
				},
				countdownInterval:undefined,
				seconds:180,
				overdueDialog:false,
				modalContent:"订单已失效,请重新下单"
			}
		},
		methods: {
			getOrderInfo(){
				api.payInfo({
					order_no:this.order_no,
				}).then((res)=>{
					if(res.data.code == 200){
						this.seconds = 60
						this.order = res.data.data.order
						this.seconds = this.order.count_time
						if(this.order.state == 1 || this.order.state == 4 || tihs.order.state == 9){
							// uni.navigateTo({
							// 	url:"/pages/mt/result"
							// })
						}else{
							this.modalContent = "订单已失效，请重试"
							this.overdueDialog = true
						}
					}else{
						this.modalContent = "未查询到订单信息，请重新下单"
						this.overdueDialog = true
					}
				})
			},
			payOrder(){
				
			},
			goBack(){
				window.history.back();
			},
			updateCountdown() {
				this.seconds = this.seconds - 1;
				if (this.seconds < 0) {
					clearInterval(this.countdownInterval);
					this.seconds = 0;
					this.overdueDialog = true
				}
			}
		},
		computed:{
			countdown:{
				get(){
					let minutes =  Math.floor(this.seconds / 60).toString()
					if(minutes.length < 2)minutes = "0"+minutes
					let seconds =  (this.seconds % 60).toString()
					if(seconds.length < 2)seconds = "0"+seconds
					return minutes+":"+seconds
				}
			}
		},
		onLoad() {
			this.order_no = this.$route.query.order_no
			if(this.order_no){
				this.getOrderInfo()
				this.countdownInterval = setInterval(this.updateCountdown, 1000);
			}else{
				this.modalContent = "未获取到订单号，请重试"
				this.overdueDialog = true
			}
		},
		onShow(){
			if(payState.getIsPay()){
				payState.setIsPay(false)
				this.goBack()
			}
		},
	}
</script>

<style>
	.content { 
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		background-color: #F8F8F8;
		height: 100%;
	}
	
	.top-content{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: start;
	}
	
	.price{
		font-size: 72rpx;
		font-weight: bold;
		margin-top: 128rpx;
	}
	
	.time{
		margin-top: 36rpx;
	}
	
	.countdown{
		margin-left: 18rpx;
		color: red;
	}
	
	.block{
		background-color: #fff;
		border-radius: 36rpx;
		width: 640rpx;
		height: 200rpx;
		margin-top: 36rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 36rpx;
	}
	
	.text-line{
		padding-left: 36rpx;
		padding-right: 36rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.order-code{
		color: #A4ADB3;
	}
	
	.buttons{
		display: flex;
		flex-direction: column;
		gap: 40rpx;
		margin-bottom: 128rpx;
	}
	
	.button{
		width: 640rpx;
		height: 72rpx;
		background-color: #FFCE00;
		border-radius: 36rpx;
		
		font-weight: normal;
		font-size: 36rpx;
		color: #000000;
		line-height: 64rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.button-return{
		width: 640rpx;
		height: 72rpx;
		background-color: #000000;
		border-radius: 36rpx;
		
		font-weight: normal;
		font-size: 36rpx;
		color: #fff;
		line-height: 64rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.button-modal{
		width: 360rpx;
		height: 72rpx;
		background-color: #FFCE00;
		border-radius: 36rpx;
		
		font-weight: normal;
		font-size: 36rpx;
		color: #000000;
		line-height: 64rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.modal{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		height: 180rpx;
		padding-top: 48rpx;
	}
</style>
