<template>
	<view>
		<view class="vertical results">
			<block v-if="loding">
				<u-loading-icon mode="circle" size="58" color="#34CE98"></u-loading-icon>
				<view class="circle-toast">
					<view class="sub-title">已等待{{time}}秒</view>
					<view class="sub-title">查询支付结果中，请耐心等待...</view>
				</view>
			</block>
			<block v-else>
				<view v-if="success">
					<uni-icons type="checkbox-filled" size="88" color="#34CE98"></uni-icons>
					<view class="title">支付成功</view>
					<view class="sub-title">{{remove}}</view>
					<button class="results-button" type="default" size="default" @click="navBack">返回</button>
				</view>
				<view v-else>
					<uni-icons type="info-circle-fill" size="88" color="#34CE98"></uni-icons>
					<view class="title">{{code === 0 ? '查询失败' : '订单不存在'}}</view>
					<view class="sub-title">{{code === 0 ? '暂未查询到您的支付信息，如支付成功未到账请联系管理员': '暂未查询到您的订单信息'}}</view>
					<button class="results-button" type="default" size="default" @click="navBack">返回</button>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import { hmState } from '@/apis/interfaces/pay.js'
	var outTime;
	export default {
		data() {
			return {
				type	: 'recharge',
				hash	: '',
				time	: 0,
				loding	: false,
				success : false,
				code	: 0,
				remove  : '充值成功，预计10秒内到账，可在账户交易记录中查询，以实际到账时间为准，如充值失败金额将原路退还'
			};
		},
		created() {
			this.type = this.$Route.query.type
			if(this.type === 'vip') this.remove = '恭喜您成功开通共力生态会员'
			if(this.type === 'buy') this.remove = '订单支出成功，可在个人中心中订单中查询您购物的订单'
			this.queryState()
		},
		methods:{
			queryState(){
				this.loding = true
				let outTimeN = 0
				outTime = setInterval(() => {
					hmState(this.type, this.$Route.query.orderId).then(res => {
						outTimeN += 1
						this.time 		= outTimeN
						if(res.code === 1){
							clearInterval(outTime)
							this.success	= true
							this.loding		= false
						}
						if(res.code === 0 && outTimeN >= 10){
							clearInterval(outTime)
							this.code		= 0
							this.loding		= false
						}
						if(res.code === 2){
							clearInterval(outTime)
							this.code		= 2
							this.loding		= false
						}
					}).catch(err => {
						uni.showToast({
							title: err.message,
							icon : 'none'
						})
					})
				}, 1000)
			},
			navBack(){
				uni.navigateBack()
			}
		},
		onUnload() {
			clearInterval(outTime)
		}
	}
</script>

<style lang="scss" scoped>
	.results{
		height: 100vh;
		box-sizing: border-box;
		text-align: center;
		padding-left: $padding * 3;
		padding-right: $padding * 3;
		padding-bottom: 20vh;
		.title{
			font-size: $title-size + 8;
			color: $text-color;
			font-weight: bold;
			line-height: 80rpx;
			padding: $padding 0;
		}
		.sub-title{
			color: $text-gray;
			line-height: 40rpx;
		}
		.hash{
			background-color: white;
			padding: $padding * 2;
			border-radius: $radius-lg;
			margin-top: $margin * 2;
			font-size: $title-size;
			color: $text-color;
			.hash-title{
				padding-bottom: $padding;
			}
			.hash-text{
				word-break:break-all;
			}
		}
		.results-button{
			width: 100%;
			margin-top: $margin * 3;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 45rpx;
			background-color: $main-color;
			color: white;
			font-size: $title-size;
			font-weight: bold;
			&::after{
				display: none;
			}
		}
		.circle-toast{
			padding-top: 60rpx;
			.sub-title{
				line-height: 60rpx;
			}
		}
	}
</style>
