<template>
	<view class="matching-page">
		<view class="back" @tap="back">‹</view>
		<view class="space">
			<view class="radio-ring ring-a"></view>
			<view class="radio-ring ring-b"></view>
			<view class="particle p1"></view>
			<view class="particle p2"></view>
			<view class="particle p3"></view>
			<view class="tag tag-a">慢热</view>
			<view class="tag tag-b">失眠</view>
			<view class="tag tag-c">想散步</view>
			<view class="flash-word word-a">靠近</view>
			<view class="flash-word word-b">同频</view>
			<view class="user-dot">{{ mode }}</view>
			<view class="other-dot"></view>
		</view>
		<view class="title">校园电波正在接近</view>
		<view class="desc">{{ copyList[currentCopy] }}</view>
		<view class="skip" @tap="goCard">跳过动画</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mode: 'i',
				mood: 'quiet',
				matchQuery: '',
				currentCopy: 0,
				copyList: ['模糊人格标签正在漂浮', '两个光点正在靠近', '情绪文字短暂闪了一下']
			}
		},
		onLoad(options) {
			this.mode = options.mode || 'i'
			this.mood = options.mood || 'quiet'
			this.matchQuery = Object.keys(options || {}).map(key => key + '=' + encodeURIComponent(options[key])).join('&')
			this.timer = setInterval(() => {
				this.currentCopy = (this.currentCopy + 1) % this.copyList.length
			}, 700)
			setTimeout(() => {
				this.goCard()
			}, 1800)
		},
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			back() {
				clearInterval(this.timer)
				uni.redirectTo({ url: '/package1/ieBrowser/index' })
			},
			goCard() {
				clearInterval(this.timer)
				uni.redirectTo({ url: '/package1/ieBrowser/companion?' + this.matchQuery })
			}
		}
	}
</script>

<style lang="scss" scoped>
	page { background: #0b1024; }
	.matching-page {
		min-height: 100vh;
		padding: 0 32rpx;
		box-sizing: border-box;
		color: #f7f4ff;
		text-align: center;
		background:
			radial-gradient(circle at 50% 42%, rgba(169, 255, 231, .2), transparent 380rpx),
			radial-gradient(circle at 78% 16%, rgba(255, 184, 209, .18), transparent 320rpx),
			radial-gradient(circle at 12% 20%, rgba(139, 124, 255, .28), transparent 360rpx),
			linear-gradient(145deg, #0b1024, #151a31 56%, #101729);
		overflow: hidden;
	}
	.back { position: fixed; left: 32rpx; top: 72rpx; z-index: 2; width: 70rpx; height: 70rpx; color: rgba(247,244,255,.62); font-size: 56rpx; line-height: 64rpx; text-align: left; }
	.space { position: relative; height: 620rpx; }
	.user-dot, .other-dot, .particle { position: absolute; border-radius: 50%; }
	.user-dot { left: 150rpx; top: 320rpx; width: 116rpx; height: 116rpx; line-height: 116rpx; background: linear-gradient(145deg, #ffffff, #a9ffe7); color: #11162a; font-size: 52rpx; font-weight: 800; box-shadow: 0 22rpx 80rpx rgba(169,255,231,.32); animation: moveUser 1.8s ease-in-out forwards; }
	.other-dot { right: 150rpx; top: 320rpx; width: 100rpx; height: 100rpx; background: linear-gradient(145deg, #8b7cff, #ffb8d1); box-shadow: 0 18rpx 70rpx rgba(139,124,255,.3); animation: moveOther 1.8s ease-in-out forwards; }
	.particle { width: 14rpx; height: 14rpx; background: rgba(169,255,231,.58); animation: drift 3s ease-in-out infinite; }
	.p1 { left: 90rpx; top: 210rpx; }
	.p2 { right: 110rpx; top: 180rpx; animation-delay: .4s; }
	.p3 { left: 360rpx; top: 460rpx; animation-delay: .8s; }
	.title { font-size: 42rpx; font-weight: 800; }
	.desc { margin-top: 18rpx; color: rgba(247,244,255,.48); font-size: 25rpx; }
	.skip { position: fixed; left: 50%; bottom: 70rpx; transform: translateX(-50%); color: rgba(247,244,255,.4); font-size: 23rpx; }
	.radio-ring { position: absolute; left: 50%; top: 360rpx; border-radius: 50%; border: 1rpx solid rgba(255,255,255,.1); transform: translate(-50%, -50%); }
	.ring-a { width: 520rpx; height: 260rpx; animation: ringPulse 2.4s ease-in-out infinite; }
	.ring-b { width: 360rpx; height: 360rpx; border-color: rgba(169,255,231,.15); animation: ringRotate 14s linear infinite; }
	.tag, .flash-word { position: absolute; padding: 12rpx 20rpx; border-radius: 999rpx; background: rgba(255,255,255,.08); border: 1rpx solid rgba(255,255,255,.12); backdrop-filter: blur(18rpx); color: rgba(247,244,255,.66); font-size: 22rpx; }
	.tag-a { left: 90rpx; top: 250rpx; animation: drift 3.6s ease-in-out infinite; }
	.tag-b { right: 86rpx; top: 248rpx; animation: drift 3.4s ease-in-out infinite .6s; }
	.tag-c { left: 260rpx; top: 470rpx; animation: drift 3.8s ease-in-out infinite 1s; }
	.flash-word { color: rgba(169,255,231,.9); opacity: 0; }
	.word-a { left: 170rpx; top: 170rpx; animation: flashWord 1.8s ease-in-out infinite .2s; }
	.word-b { right: 170rpx; top: 430rpx; animation: flashWord 1.8s ease-in-out infinite .8s; }
	@keyframes moveUser { to { left: 300rpx; transform: scale(1.12); } }
	@keyframes moveOther { to { right: 300rpx; transform: scale(1.12); } }
	@keyframes drift { 0%, 100% { transform: translateY(0); opacity: .3; } 50% { transform: translateY(-30rpx); opacity: 1; } }
	@keyframes ringPulse { 0%, 100% { transform: translate(-50%, -50%) scale(.9) rotate(-10deg); opacity: .35; } 50% { transform: translate(-50%, -50%) scale(1.08) rotate(-4deg); opacity: .9; } }
	@keyframes ringRotate { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
	@keyframes flashWord { 0%, 100% { opacity: 0; transform: translateY(12rpx); } 45%, 60% { opacity: 1; transform: translateY(0); } }
</style>
