<template>
	<view class="container">
		<image class="title" src="../../static/xyyk/bg-title.png" mode="widthFix"></image>
		<view class="tips">
			支付享立减1元
		</view>
		<view class="tickets" @click="toTickets">
			我的券包
		</view>
		<view class="bottom-banner">
			<view class="banner-title">
				兑换商品列表
			</view>
			<view class="banner-tips">
				<view>兴业优酷半价购送周卡</view>
				<view><text class="line"></text>支付享立减1元<text class="line"></text></view>
			</view>
			<scroll-view class="banner-content" scroll-y>
				<view class="banner-container">
					<view v-for="(item,index) in products" :key="item.id">
						<ProductItem :detail="item" @buy-event="handleBuy"/>
					</view>
				</view>
			</scroll-view>
		</view>
		<uni-popup ref="popupRef" type="center" :is-mask-click="false" :mask-click="false">
			<view class="popup-content">
				<view class="popup-title">购买{{payResult ? '成功' : '失败'}}</view>
				<view class="popup-tips" v-if="payResult">恭喜购买成功，请稍后查看结果</view>
				<view class="popup-tips" v-else>支付失败了</view>
				<view class="btn" @click="closePopup">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { onMounted, ref } from 'vue';
	import ProductItem from './components/product-item';
	import {getQueryString} from '../../utils/utils';
	import {login,getProduceList,goBuy,queryOrder} from '../../api/xyyk';
	const popupRef = ref(null);
	const products = ref([]);
	const payResult = ref(false);
	const orderNo = "SN202406131136518803"
	const code = 'MDQ4MDM2ZWYwNzUxYmMwYmM3YTk4ZjdmNjEzZWNmOGNjZDk0OGQ5ZjM0NjY1NjY1NDMyYjY2MzVmNjkwZTE5MjU1MTdhOTc1MDkzOGVhMWJhNDE5YWVlMjQ5NGMwZjFmMTg4NzgyZDBiN2UyOGYwZDFjNzIzOGIzOTQ1ZGRiMWU0M2FiNjhjOTRlZjEyODE1MmM5NjIyMTQzZTBhYmQzZGFiOTRjM2ZhNTNlYTVlYTRiOGY0ZTIxZjFkN2I4ZjFlYzBmODQ1NzlmYTY2MDJmMmViZDIxMzc4ZDMwMmM1OGExZTZiMTQ1N2Y0MjY5NWJlNDRhZWU5YzE5OTViMmQ1MjAxNWY5NWM4ZTQ0OGI2NGEyZDI5MTkyNWNkZjA0YWIwZjFlZGE3MGJmZjk3YzViZTYwNTYzZDgxMjk2YmE5MWE4ZDQ0ZDZiZGY3MmJlMzdmN2NmMjI3YjU5NmQwNmMwYWM4MmZkYjc5MTk0MmRlNzE0NWU3ZmYxMGNkNjhmN2RhODMwMzU3NGUzMTM0ZGU3OTc1NWIwNDM0ODBmMjdlMzliZDEwZjViNWI4OTE1N2RhN2EzNmU5ZGNmZjQ3NzhiYjBhOGFmOTNlNTM2M2NiNmIzY2UwODJjZDU5NzFjMTVmZGI2ZA=='
	
	onMounted(()=>{
		//页面连接中带code代表第一次进入页面,带订单号代表支付回调回来进入页面
		const code = getQueryString('code');
		const orderNo = getQueryString('order_no');
		// if(code){
		// 	getProductConfig()
		// }else if(orderNo){
		// 	queryOrderStatus()
		// }
		getProductConfig()
	})
	
	const getProductConfig = async () => {
		const params = {data:code}
		const resData = await login({params})
		uni.setStorageSync('token',resData.token);
		const productConfig = await getProduceList();
		const {name,description,product} = productConfig;
		products.value = product;
	}
	
	const queryOrderStatus = () => {
		const params = {
			order_no:orderNo
		}
		queryOrder({params}).then(res => {
			const {state} = res
			payResult.value = state == '2' ? true : false;
			popupRef.value.open()
		})
	}
	
	const handleBuy = (item) => {
		const {id} = item;
		const params = {product_id:id}
		goBuy({params}).then(res => {
			const {payToken,payOrderId,mchtOrderId} = res;
			window.location.href = payToken;
		})
	}
	
	const toTickets = () => {
		uni.navigateTo({url:'/pages/xyyk/tickets'})
	}
	
	const closePopup = () => {
		popupRef.value.close()
	}
</script>

<style scoped lang="scss">
.container{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width:100vw;
	height:100vh;
	background: url('../../static/xyyk/bg.png') no-repeat;
	background-size: 100% 100%;
	.title{
		width:640rpx;
		margin: 32rpx auto 0;
	}
	.tips{
		width: 215rpx;
		height: 42rpx;
		background: linear-gradient( 90deg, #E5F5FF 0%, #FFFEFF 100%);
		border-radius: 21rpx;
		margin-top:16rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #00A5EB;
		text-align: center;
		line-height: 42rpx;
	}
	.tickets{
		position: fixed;
		right:0;
		top:150rpx;
		width: 102rpx;
		height: 32rpx;
		background: linear-gradient( 90deg, #E7F6FF 0%, #FEFEFF 100%);
		border-radius: 52rpx 0px 0px 52rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #00A5EB;
		line-height: 28rpx;
		text-align: center;
		line-height: 28rpx;
	}
	.bottom-banner{
		position: absolute;
		bottom:10rpx;
		width:730rpx;
		height:620rpx;
		background: url('../../static/xyyk/bg-banner.png') no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		.banner-title{
			width:350rpx;
			height:78rpx;
			text-align: center;
			line-height: 78rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			margin:0 auto;
			padding-left:50rpx;
		}
		.banner-tips{
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top:30rpx;
			.line{
				display: block;
				width: 40rpx;
				height: 0;
				border: 1rpx solid #3F85BC;
				&:first-child{
					margin-right:14rpx;
				}
				&:last-child{
					margin-left:14rpx;
				}
			}
			> :first-child{
				font-weight: 600;
				font-size: 32rpx;
				color: #135BC3;
			}
			> :last-child{
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 28rpx;
				color: #3F85BC;
			}
		}
		.banner-content{
			box-sizing: border-box;
			padding:0 60rpx 40rpx;
			flex:1;
			overflow: auto;
			.banner-container{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
			}
			
		}
	}
	.popup-content{
		width:578rpx;
		height:700rpx;
		background: url("../../static/xyyk/bg-popup.png") no-repeat;
		background-size:100% 700rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		padding-top:290rpx;
		.popup-title{
			font-weight:700;
			color:#111B1F;
			font-size:60rpx;
			margin-top:24rpx;
		}
		.popup-tips{
			font-weight: 400;
			font-size: 28rpx;
			color: #00A5EB;
			margin-top:34rpx;
			opacity: .6;
		}
		.btn{
			width: 236rpx;
			height: 72rpx;
			background: linear-gradient( 180deg, #57C3FB 7%, #2D98F7 100%);
			border-radius: 36rpx;
			text-align: center;
			line-height: 72rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-top:100rpx;
		}
	}
}
</style>