<!-- payPage.vue -->

<template>
	<view>
		<!-- 气泡 -->
		<!-- <view class="container">
	      <view class="bubble" v-for="bubble in bubbles" :key="bubble.id"></view>
	    </view> -->
		<!-- <view></view> -->

		<!-- 光线 -->
		<!-- <view class="light-container">
	       <view class="light" v-for="(light, index) in lights" :key="index" :style="getLightStyle(index)"></view>
	    </view> -->


		<!-- 按钮 -->

		<!-- <view class="container">
    <view class="btn" @click="handleClick">
      <text class="btn-text">立即开盒</text>
    </view>
  </view> -->
		<!-- <div class="sss">
      <div 
        class="your-div-class" 
        v-for="(item, index) in items" 
        :key="index"
        :style="{
          animationDelay: item.delay + 's',
          left: item.startX + 'px'
        }"
      ></div>
    </div> -->
		<!-- <div class="sss">
			<div class="your-div-class" v-for="(item, index) in items" :key="index" :style="{
	        animationDelay: item.delay + 's',
	        left: item.startX + 'px'
	      }"></div>
		</div> -->
		<!-- <view class="container">
    <button class="centered-arrow-button">
      <span class="arrow top-arrow"></span>
      <span class="text">点击我</span>
      <span class="arrow bottom-arrow"></span>
    </button>
  </view> -->

		<!-- 礼花 -->
		<!-- <view class="particle-container" @click="triggerFirework">
    <view class="firework" v-if="showFirework">
      <view class="particle" v-for="(particle, index) in particles" :key="index" :style="getParticleStyle(index)"></view>
    </view>
  </view> -->
		<!-- <view class="particle-container">
	      <view class="firework">
	        <view class="particle" v-for="(particle, index) in particles" :key="index" :style="getParticleStyle(index)"></view>
	      </view>
	    </view> -->

		<!-- <iframe :src="url" frameborder="0"></iframe> -->
		<!-- <web-view :src="url" @message="handleMessage"></web-view> -->
		<!-- <view @click="payBack" style="z-index: 99999;position: fixed;bottom: 20rpx;text-align: center;color: #fff;width: 100%;">返回查看订单</view> -->
		<!-- 退出登录弹框 -->
		<!-- <popup-view v-model="logOutvisible" mode="center" border-radius="15" zIndex="9999">
		<view class="log-out">
			<view class="log-out-tip">是否支付成功？</view>
			<view class="log-out-footer">
				<view class="cancel" @click="closeLogOut">未完成支付</view>
				<view class="shu"></view>
				<view class="log-out-submit" @click="submitLogOut">已完成支付</view>
			</view>
		</view>
	</popup-view> -->
		<!-- <div id="player-container" style="width: 640px; height: 480px;"></div> -->

		<!-- <view class="player-container">
	    <div id="player-container"></div>
	  </view> -->
	  
		
		<!-- <view class="list">
			<view v-for="(item,index) in list" :key="index" :style="getBlockStyle(index)" class="list-item"></view>
		</view> -->
		<view style="border: 1px solid red;width: 100rpx;height: 100rpx;pointer-events: none;z-index: 100;">
			<SpineCom skelUrl="/static/spine/guan_yu/guan_yu.skel" atlasUrl="/static/spine/guan_yu/guan_yu.atlas" />
		</view>
	</view>

</template>

<script>
	// import 'https://unpkg.com/@esotericsoftware/spine-player@4.1.*/dist/iife/spine-player.min.js'
	// import "https://unpkg.com/@esotericsoftware/spine-player@4.1.*/dist/spine-player.min.css"
	import {
		timers
	} from 'jquery';
	import {

		coinPaidApi
	} from '@/API/user.js'
	import SpineCom from '@/pages/components/spine.vue'
	export default {
		data() {
			return {
				url: '', // 支付页面的URL
				no: '',
				timer: null,
				settlement: 0,
				coin: 0,
				gift: 0,
				logOutvisible: false,
				// 气泡
				bubbles: Array.from({
					length: 5
				}, (_, id) => ({
					id
				})),
				// 光线
				lights: Array(10).fill(''),
				// 礼花
				particles: Array(50).fill(''), // 生成50个粒子
				showFirework: false,

				timeSec: 0,
				// items: Array.from({ length: 10 }).map(() => ({
				//      delay: Math.random() * 5,
				//      startX: Math.random() * 450,  // Assuming the container width is 500px and element width is 50px
				//    }))
				items: Array.from({
					length: 6
				}).map(() => ({
					delay: Math.random() * 5,
					startX: Math.random() *
						250, // Assuming the container width is 500px and element width is 50px
				})),
				
				
				list:[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
				
			};
		},
		components:{SpineCom},
		onLoad(query) {
			this.url = decodeURIComponent(query.url);
			document.write(this.url)
			this.no = query.no
			this.settlement = query.settlement
			this.coin = query.coin
			this.gift = query.gift

			this.previousUrl = this.$route.fullPath;



			// new spine.SpinePlayer("player-container", {
			//       skeleton: "/files/spineboy/export/spineboy-pro.json",
			//       atlas: "/files/spineboy/export/spineboy.atlas",
			// });
			// this.loadSpinePlayer();
		},
		watch: {
			timeSec() {
				if (this.timeSec == 30) {
					clearInterval(this.timer)
					this.timer = null
					this.logOutvisible = false
					this.$api.msg('未查询到支付结果')
				}
			}
		},
		methods: {
			getBlockStyle(index){
				const cols = 3;
				const windowWidth = window.innerWidth;
				const elWidth = 150;
				const elHeight = 150;
				
				const spaceX = (windowWidth - (elWidth * cols))  / (cols+1);
				
				const startX = spaceX;
				const startY = 0;
				
				const rowList =  [
					0,0,0,
					1,
					2,
					3,3,3,
					4,
					5,
				]
				const offset = Math.floor(index / rowList.length ) * 6;
				const row =rowList[index % rowList.length] + offset;
				
				const colList = [
					0,1,2,
					2,
					2,
					2,1,0,
					0,
					0,
				]
				const col = colList[index % colList.length]
				
				let left = (col * elWidth) + (col * spaceX);
				let top = startY + (elHeight * row);
				
				
				return {
					left:left+"px",
					top:top+"px"
				}
			},
			loadSpinePlayer() {
				// 动态加载 CSS
				const link = document.createElement('link');
				link.rel = 'stylesheet';
				link.href = 'https://unpkg.com/@esotericsoftware/spine-player@4.2.56/dist/spine-player.min.css';
				document.head.appendChild(link);
				// 
				// 动态加载 JS
				const script = document.createElement('script');
				// script.src = 'https://unpkg.com/@esotericsoftware/spine-player@4.2.56/dist/iife/spine-player.min.js';
				script.src = '/static/spine-player.js';
				script.onload = this.initializeSpinePlayer;
				document.body.appendChild(script);
			},
			initializeSpinePlayer() {

				new spine.SpinePlayer("player-container", {
					skelUrl: "/static/spine/guan_yu/guan_yu.skel",
					atlasUrl: "/static/spine/guan_yu/guan_yu.atlas",
					// animation: "run",
					premultipliedAlpha: false,
					backgroundColor: "#00000000",
					// viewport: {
					// 	debugRender: true,
					// },
					// showControls: true,
					alpha: true, // 可选：是否透明
				});
				//     const player = new spine.SpinePlayer('player-container', {
				//       binaryUrl: '/static/spine/ai_ren/ai_ren.skel',
				//       atlasUrl: '/static/spine/ai_ren/ai_ren.atlas',
				//       // json: 'static/spine_ui_zuqiu/spine_ui_zuqiu.json',
				//       // atlas: 'static/spine_ui_zuqiu/spine_ui_zuqiu.atlas.txt',
				// // skeleton: "https://esotericsoftware.com/files/examples/4.2/spineboy/export/spineboy-pro.skel",
				//       // animation: 'animation', // 可选：默认动画
				//       // backgroundColor: '##00000000', // 可选：背景颜色
				//       // alpha: true, // 可选：是否透明
				//     });
			},




			// 光线
			getLightStyle(index) {
				const delay = Math.random() * 2; // 随机延迟时间 0 到 2 秒
				const leftPosition = Math.random() * 100; // 随机水平位置 0% 到 100%
				return {
					animationDelay: `${delay}s`,
					left: `${leftPosition}%`
				};
			},
			// 礼花
			getParticleStyle(index) {
				const angle = (index / this.particles.length) * 360; // 每个粒子的角度
				const color = `hsl(${Math.random() * 360}, 100%, 50%)`; // 随机颜色
				const delay = Math.random() * 0.5; // 随机延迟时间 0 到 0.5 秒
				return {
					backgroundColor: color,
					transform: `rotate(${angle}deg) translate(0, -50px)`,
					animationDelay: `${delay}s`
				};
			},
			triggerFirework() {
				this.showFirework = true;
				setTimeout(() => {
					this.showFirework = false;
				}, 1500); // 动画结束后隐藏礼花
			},
			closeLogOut() {
				this.logOutvisible = false
			},
			submitLogOut() {
				this.getOrderPaid(this.no)
				this.timer = setInterval(() => {
					this.timeSec += 3
					this.logOutvisible = false
					this.getOrderPaid(this.no)
				}, 3000);
			},
			payBack() {
				uni.redirectTo({
					url: `/pages/mine/topUp?price=${this.settlement}&coin=${this.coin}&gift=${this.gift}&no=${this.no}`
				})
			},
			getOrderPaid(no) {
				uni.showLoading({

				})
				coinPaidApi({
					no
				}).then(payResult => {
					this.logOutvisible = false
					if (payResult.data) {
						clearInterval(this.timer); // 清除定时器
						this.timer = null;
						this.$api.msg('支付成功')
						uni.hideLoading()
						// uni.redirectTo({
						// 	url: `/pages/mine/topUpSuc?price=${this.settlement}&coin=${this.coin}&gift=${this.gift}`
						// })
						uni.redirectTo({
							url: `/pages/mine/topUpSuc?price=${this.settlement}&coin=${this.coin}&gift=${this.gift}`
						})
						// uni.redirectTo({
						// 	url: `/pages/mine/topUp?price=${this.settlement}&coin=${this.coin}&gift=${this.gift}&no=${this.no}`
						// })
					}
				}).catch(err => {
					clearInterval(this.timer); // 清除定时器
					this.timer = null;
					uni.hideLoading()
				})
			},
		},
		onHide() {
			this.logOutvisible = true
		},
		onUnload() {
			// 在页面离开时清除定时器
			clearInterval(this.timer);
		}
	};
</script>
<style lang="scss" scoped>
	// 气泡
	.container {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #0e0b16;
	}

	.bubble {
		position: absolute;
		bottom: -100px;
		width: 40px;
		height: 40px;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		animation: rise 6s infinite ease-in, float 3s infinite ease-in-out;
	}

	.bubble:nth-child(1) {
		left: 20%;
		width: 60px;
		height: 60px;
		animation-duration: 8s, 4s;
		animation-delay: 0s, 0s;
	}

	.bubble:nth-child(2) {
		left: 40%;
		width: 40px;
		height: 40px;
		animation-duration: 7s, 3.5s;
		animation-delay: 1s, 1s;
	}

	.bubble:nth-child(3) {
		left: 60%;
		width: 80px;
		height: 80px;
		animation-duration: 9s, 4.5s;
		animation-delay: 2s, 2s;
	}

	.bubble:nth-child(4) {
		left: 80%;
		width: 50px;
		height: 50px;
		animation-duration: 8s, 4s;
		animation-delay: 3s, 1.5s;
	}

	.bubble:nth-child(5) {
		left: 50%;
		width: 70px;
		height: 70px;
		animation-duration: 7.5s, 3.75s;
		animation-delay: 2.5s, 1.25s;
	}

	@keyframes rise {
		0% {
			bottom: -100px;
		}

		100% {
			bottom: 100vh;
		}
	}

	@keyframes float {

		0%,
		100% {
			transform: translateX(0);
		}

		50% {
			transform: translateX(50px);
		}
	}

	.log-out {
		width: 590rpx;
		height: 300rpx;
		background: #FFFFFF;
		border-radius: 16rpx;

		.log-out-tip {
			height: 200rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: rgba(0, 0, 0, 0.85);
			line-height: 200rpx;
			text-align: center;
		}

		.log-out-footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 2rpx solid rgba(0, 0, 0, 0.06);
			height: 100rpx;

			.cancel {
				width: 294rpx;
				height: 100rpx;
				line-height: 100rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				text-align: center;
				border-right: 1px solid rgba(0, 0, 0, 0.06);
			}

			.log-out-submit {
				width: 294rpx;
				height: 100rpx;
				line-height: 100rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #E55353;
				text-align: center;
			}
		}
	}



	// 光线
	.light-container {
		position: relative;
		width: 100%;
		height: 100vh;
		background-color: #000;
		overflow: hidden;
	}

	.light {
		position: absolute;
		bottom: -300px;
		/* 确保初始位置在视口外 */
		width: 2px;
		height: 150px;
		/* 增加高度，使光线更加明显 */
		background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%);
		animation: moveLight 4s linear infinite;
		opacity: 0.7;
	}

	@keyframes moveLight {
		0% {
			bottom: -100px;
			opacity: 0;
		}

		25% {
			opacity: 1;
		}

		75% {
			opacity: 1;
		}

		100% {
			bottom: 100vh;
			opacity: 0;
		}
	}

	.particle-container {
		position: relative;
		width: 100%;
		height: 100vh;
		background-color: #000;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}

	.firework {
		position: absolute;
		width: 0;
		height: 0;
	}

	.particle {
		position: absolute;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		transform-origin: center;
		animation: explode 1s ease-out forwards;
		opacity: 0;
	}

	@keyframes explode {
		0% {
			transform: translate(0, 0);
			opacity: 1;
		}

		100% {
			transform: translate(0, -200px);
			opacity: 0;
		}
	}


	// .shine-button {
	//   display: inline-block;
	//   padding: 10px 20px;
	//   border-radius: 4px;
	//   background-color: #409EFF;
	//   color: #fff;
	//   border: none;
	//   cursor: pointer;
	//   position: relative;
	//   overflow: hidden;
	// }
	// .shine-button::before {
	//   content: "";
	//   position: absolute;
	//   top: 0;
	//   left: -100%;
	//   width: 100%;
	//   height: 100%;
	//   background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
	//   animation: shine 2s linear infinite;
	// }

	// @keyframes shine {
	//   0% {
	//     left: -100%;
	//   }
	//   50%, 100% {
	//     left: 100%;
	//   }
	// }
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}

	.centered-arrow-button {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10px 20px;
		border: none;
		background-color: #4CAF50;
		color: white;
		cursor: pointer;
		overflow: hidden;
	}

	.text {
		z-index: 2;
		/* 确保文本在箭头上方 */
	}

	.arrow {
		position: absolute;
		width: 20px;
		/* 箭头宽度 */
		height: 10px;
		/* 箭头高度 */
		background: currentColor;
		/* 使用父元素的文字颜色 */
		clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
		/* 创建一个向上的箭头 */
		animation: moveArrow 2s linear infinite;
	}

	.top-arrow {
		top: 0;
		transform: translateY(-100%);
		/* 初始位置在按钮上方 */
	}

	.bottom-arrow {
		bottom: 0;
		transform: translateY(100%);
		/* 初始位置在按钮下方 */
		clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
		/* 创建一个向下的箭头 */
	}

	@keyframes moveArrow {
		0% {
			transform: translateY(-100%) scaleX(1);
			/* 向上箭头从上方开始，向下箭头从下方开始 */
		}

		50% {
			transform: translateY(0) scaleX(1.2);
			/* 箭头在中间时稍微放大 */
		}

		100% {
			transform: translateY(100%) scaleX(1);
			/* 向上箭头移动到下方，向下箭头移动到上方 */
		}
	}






	@keyframes fadeInUp {
		0% {
			transform: translateY(100%);
			/* 从底部开始，移动到其原始位置下方 */
			opacity: 0;
			/* 初始时完全透明 */
		}

		50% {
			transform: translateY(0);
			/* 移动到其原始位置 */
			opacity: 1;
			/* 完全不透明 */
		}

		100% {
			transform: translateY(0);
			/* 移动到其原始位置 */
			opacity: 0;
			/* 完全不透明 */
		}
	}

	// .sss {
	//   height: 500px; /* 容器高度为500px */
	//   position: relative; /* 设置为相对定位，以便子元素可以使用绝对定位 */
	//   overflow: hidden; /* 隐藏超出容器的内容，如果需要的话 */
	// }

	// .sss {
	//     width: 500px;
	//     height: 500px;
	//     position: relative;
	//     background-color: lightgray;
	//     overflow: hidden; /* 确保元素不会超出容器 */
	//   }

	//   .your-div-class {
	//     width: 50px;
	//     height: 50px; /* 假设高度为50px，可以根据需要调整 */
	// 	border-radius: 50%;
	//     position: absolute;
	//     bottom: 0;
	//     background-color: blue;
	//     animation: moveToTop 5s ease-in-out infinite; /* 3s是动画持续时间，可以根据需要调整 */
	//   }

	//   @keyframes moveToTop {
	//       0% {
	//         bottom: -50px; /* 初始位置在容器底部以下 */
	//         opacity: 0;
	//       }
	//       10% {
	//         opacity: 1; /* 进入容器后变为不透明 */
	//       }
	//       90% {
	//         opacity: 0; /* 在离开容器前保持不透明 */
	//       }
	//       100% {
	//         bottom: 100%; /* 结束位置在容器顶部以上 */
	//         opacity: 0; /* 离开容器后变为透明 */
	//       }
	//     }
	// .sss {
	//             position: relative;
	//             width: 100%;
	//             height: 500rpx;
	//             background-color: #f0f0f0;
	//         }

	//         .your-div-class {
	//             position: absolute;
	//             bottom: 0;
	//             width: 50rpx;
	//             height: 50rpx;
	//             background-color: #007BFF;
	//             animation: moveUp 5s infinite linear;
	//         }

	//         @keyframes moveUp {
	//             0% {
	//                 left: 0;
	//                 bottom: 0;
	//             }
	//             50% {
	//                 left: calc(100% - 350rpx); /* Assuming the width of .your-div-class is 50px */
	//                 bottom: 50%;
	//             }
	//             100% {
	//                 left: 0;
	//                 bottom: 100%;
	//             }
	//         }

	.sss {
		width: 100%;
		height: 500rpx;
		position: relative;
		overflow: hidden;
		// background-color: red;
	}

	.your-div-class {
		width: 100rpx;
		/* 自定义宽度 */
		height: 100rpx;
		/* 自定义高度 */
		position: absolute;
		bottom: -110rpx;
		background-color: #3498db;
		/* 蓝色 */
		border-radius: 50%;
		/* 圆形 */
		animation: moveUp 4s linear infinite, moveHorizontal 4s ease-in-out infinite alternate;
		transform: translateX(0);
		/* 初始位置 */
	}

	@keyframes moveUp {
		0% {
			bottom: 0;
			opacity: 0;
			transform: translateY(0);
			/* 初始位置 */
		}

		50% {
			opacity: 1;
		}

		100% {
			bottom: 100%;
			opacity: 0;
			transform: translateY(-100%);
			/* 终止位置 */
		}
	}

	@keyframes moveHorizontal {

		0%,
		100% {
			transform: translateX(0);
		}

		50% {
			transform: translateX(100rpx);
			/* 随机范围内的最大水平移动距离 */
		}
	}

	// .sss {
	//   width: 500px;
	//   height: 500px;
	//   position: relative;
	//   overflow: hidden;
	// }

	// .your-div-class {
	//   width: 50px; /* 自定义宽度 */
	//   height: 50px; /* 自定义高度 */
	//   position: absolute;
	//   bottom: 0;
	//   background-color: #3498db; /* 蓝色 */
	//   border-radius: 50%; /* 圆形 */
	//   animation: moveUp 4s linear infinite, moveHorizontal 2s ease-in-out infinite alternate;
	// }

	// @keyframes moveUp {
	//   0% {
	//     bottom: 0;
	//     opacity: 0;
	//   }
	//   50% {
	//     opacity: 1;
	//   }
	//   100% {
	//     bottom: 100%;
	//     opacity: 0;
	//   }
	// }

	// @keyframes moveHorizontal {
	//   0%, 100% {
	//     transform: translateX(0);
	//   }
	//   50% {
	//     transform: translateX(100px); /* 随机范围内的最大水平移动距离 */
	//   }
	// }


	.player-container {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: url('@/static/new/bg.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	#player-container {
		width: 100%;
		height: 100%;
	}
	.list{
		
		.list-item{
			position: absolute;
			width: 200rpx;
			height: 200rpx;
			border: 1px solid red;
			background-color: red;
		}
	}
</style>