<template>
	<scroll-view class="content" scroll-y>
		<image src="../../static/image/bg_new.png" mode="widthFix" style="width: 100%;display: block;"></image>
		<uni-popup ref="popupRef" type="center" :is-mask-click="false" :mask-click="false">
			<view class="popup-content" style="background-image:url('../../static/image/popup_new.png');height:560rpx">
				<view class="tips">恭喜您提现成功</view>
				<view class="number">{{ num }}<text>元</text></view>
				<view class="btn" @click="closePopup">
					<image src="../../static/image/know_btn.png"></image>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupNullRef" type="center" :is-mask-click="false" :mask-click="false">
			<view class="popup-null" style="background-image:url('../../static/image/null.png');height:260rpx">
				<view class="tips_null">暂无可领取的红包！</view>
			</view>
		</uni-popup>
	</scroll-view>
</template>

<script setup>
	import { ref,onMounted } from 'vue';
	import {getQueryString} from '../../utils/utils'
	import { checkTradeNo,getAccessPage,sendPacket } from '../../api'
	const popupRef = ref(null)
	const popupNullRef = ref(null)
	//红包金额
	const num = ref(0);
	//有code就代表是授权回调回来的
	const isRedirect = () => {
		return !!getQueryString('code')
	}
	onMounted(() => {
		const isRedir = isRedirect()
		if(!isRedir){
			const orderInfo = {
				tid:getQueryString('tid'),
				timeStamp:getQueryString('timeStamp'),
				sign:getQueryString('sign'),
				tradeNo:getQueryString('tradeNo'),
			};
			uni.setStorageSync('orderInfo',JSON.stringify(orderInfo));
			checkEvent()
			//改界面看效果调试专用
			// num.value = 94 / 100
			// popupRef.value.open()
		}else{
			sendEvent()	
		}
	})
	//检查是否存在可领取红包
	const checkEvent = () => {
		const params = {tradeNo:getQueryString('tradeNo')}
		checkTradeNo({params}).then(res => {
			if(res.status === true){
				recieveEvent()
			}else{
				popupNullRef.value.open()
			}
		}).catch(() => {
			popupNullRef.value.open()
		})
	}
	//发送红包的事件
	const sendEvent = () => {
		const orderInfo = JSON.parse(uni.getStorageSync('orderInfo'))
		const {tid,timeStamp,sign,tradeNo} = orderInfo
		const params = {
			tid:Number(tid),
			code:getQueryString('code'),
			timeStamp,
			sign,
			tradeNo,
		}
		sendPacket({params}).then(res => {
			//金额以分为单位，需要转换
			num.value = res.amount / 100
			popupRef.value.open()
		}).catch((err) => {
			console.log(err)
		})
	}
	//领取红包事件
	const recieveEvent = () => {
		const orderInfo = JSON.parse(uni.getStorageSync('orderInfo'))
		const {tid,timeStamp,sign,tradeNo} = orderInfo
		const url = `https://lsxdwx.access.86698.cn/?tid=${tid}&tradeNo=${tradeNo}`
		console.log(url);
		window.location.href = url;
	}
	
	const closePopup = () => {
		popupRef.value.close()
	}
</script>

<style lang='scss'>
	.content {
		width: 100vw;
		height: 100vh;
		overflow-y: auto;
		background-color: #d6adff;
	}
	.popup-null{
		width:610rpx;
		background-repeat:no-repeat;
		background-size:cover;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		position: relative;
		.tips_null{
			color:#666;
			font-size:30rpx;
			opacity: 0.6;
			font-size:28rpx;
			font-weight:400;
			position: absolute;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);
		}
	}
	.popup-content{
		width:518rpx;
		//width:610rpx;
		background-repeat:no-repeat;
		background-size:cover;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		position: relative;
		.number{
			color:#A000FF;
			font-size:82rpx;
			margin-bottom:10rpx;
			font-weight:600;
			> text{
				font-size:36rpx;
				margin-left:2rpx;
				display: inline-block;
				font-weight:400;
			}
		}
		.tips{
			color:#602BAA;
			font-size:32rpx;
			margin-bottom:10rpx;
			margin-top:120rpx;
			font-weight:500;
		}
		.btn{
			position: absolute;
			bottom:32rpx;
		}
		.btn > image{
			width:320rpx;
			height:88rpx;
		}
	}
</style>
