<template>
	<view class="content">
		<view v-if="pay_state==1" class="top-content">
			<view class="result-logo"></view>
			<view class="title">
				<text>支付成功</text>
			</view>
			<view class="text">
				<text>返回美团可查看订单详情</text>
			</view>
		</view>
		<view v-else class="top-content">
			<view class="result-logo-fail"></view>
			<view class="title">
				<text>支付失败</text>
			</view>
			<view class="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 class="buttons">
			<view v-if="pay_state==2" class="button-repay" @click="()=>{payOrder()}">重新支付</view>
			<view class="button" @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 {
				// order_state:1,
				pay_state:1,
				overdueDialog:false,
				modalContent:"未获取到订单号，请重试"
			}
		},
		methods: {
			getOrderInfo(){
				api.payInfo({
					order_no:this.order_no,
				}).then((res)=>{
					if(res.data.code == 200){
						if(res.data.code == 1){
							payState.setIsPay(true)
						}
						if(res.data.state == 2){
							this.order_state = 2
						}
					}else{
						this.modalContent = "未查询到订单信息，请联系客服"
						// this.overdueDialog = true
					}
				})
			},
			getPayInfo(){
				api.payQuery({
					order_no:this.order_no,
				}).then((payres)=>{
					if(payres.data.code == 200){
						console.log(payres.data.data)
						this.pay_state = payres.data.data.state
					}else{
						this.modalContent = "网络波动，请重试"
						this.overdueDialog = true
					}
				})
			},
			payOrder(){
				
			},
			goBack(){
				window.history.back();
			},
			onLoad() {
				payState.setIsPay(true)
				this.order_no = this.$route.query.order_no
				if(this.order_no){
					// this.getOrderInfo()
					this.getPayInfo()
				}else{
					this.modalContent = "未获取到订单号，请重试"
					this.overdueDialog = true
				}
			}
		}
	}
</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;
		padding-top: 240rpx;
	}
	
	.result-logo {
		height: 240rpx;
		width: 240rpx;
		/* margin-top: 22rpx; */
		background-image: url('@/static/images/success.png');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}
	
	.result-logo-fail {
		height: 240rpx;
		width: 240rpx;
		/* margin-top: 22rpx; */
		background-image: url('@/static/images/fail.png');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}
	
	.title{
		font-size: 48rpx;
		font-weight: bold;
		margin-top: 36rpx;
	}
	
	.text{
		margin-top: 36rpx;
		color: #A4ADB3;
	}
	
	.buttons{
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		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-repay{
		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>
