<template>
	<view class="ph">
		<view class="ph-story">
			<text class="ph-kicker">BANJINLI ORBIT</text>
			<text class="ph-title">今天，登陆白嫖星球</text>
			<text class="ph-sub">攒券、追捕、开盲盒，全校一起瓜分补给池</text>
		</view>

		<view class="ph-meteor ph-meteor-a"></view>
		<view class="ph-meteor ph-meteor-b"></view>
		<view class="ph-station">
			<view class="ph-station-core"></view>
			<view class="ph-station-wing ph-station-wing-left"></view>
			<view class="ph-station-wing ph-station-wing-right"></view>
		</view>
		<view class="ph-asteroid ph-asteroid-a"></view>
		<view class="ph-asteroid ph-asteroid-b"></view>
		<view class="ph-floating-box">
			<view class="ph-floating-box-lid"></view>
			<text>?</text>
		</view>

		<view class="ph-orbit ph-orbit-a"></view>
		<view class="ph-orbit ph-orbit-b"></view>
		<view class="ph-orbit ph-orbit-c"></view>

		<view class="ph-planet-wrap">
			<view class="ph-planet-glow"></view>
			<view class="ph-planet">
				<view class="ph-planet-map ph-planet-map-a"></view>
				<view class="ph-planet-map ph-planet-map-b"></view>
				<view class="ph-planet-map ph-planet-map-c"></view>
				<view class="ph-shine ph-shine-a"></view>
				<view class="ph-shine ph-shine-b"></view>
				<view class="ph-atmosphere"></view>
			</view>
			<view class="ph-planet-core">
				<view class="ph-core-label">今日补给池</view>
				<view class="ph-pool">
					<text class="ph-pool-symbol">￥</text>
					<text class="ph-pool-num">{{poolText}}</text>
				</view>
				<view class="ph-pool-label">星球券越多，瓜分权重越高</view>
			</view>
		</view>

		<view class="ph-squirrel">
			<image class="ph-squirrel-img" src="/static/images/img/loading.gif" mode="aspectFit"></image>
			<view class="ph-squirrel-tag">IP</view>
		</view>

		<view class="ph-satellite ph-satellite-left">
			<text class="ph-satellite-num">{{data.joinCount || 0}}</text>
			<text class="ph-satellite-label">全校登陆</text>
		</view>
		<view class="ph-satellite ph-satellite-right">
			<text class="ph-satellite-num">{{rankText}}</text>
			<text class="ph-satellite-label">财富坐标</text>
		</view>
		<view class="ph-ticket-pill">我的星球券 {{data.myTicketCount || 0}} 张</view>

		<view class="ph-count">
			<view class="ph-period">第 {{data.periodNo || '--'}} 期</view>
			<view class="ph-count-unit">
				<text>{{cd.h}}</text>
				<text>H</text>
			</view>
			<view class="ph-count-unit">
				<text>{{cd.m}}</text>
				<text>M</text>
			</view>
			<view class="ph-count-unit">
				<text>{{cd.s}}</text>
				<text>S</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				remain: 0,
				timer: null
			}
		},
		computed: {
			poolText() {
				const v = Number(this.data.poolAmount || 0)
				return v.toFixed(2)
			},
			rankText() {
				const r = this.data.myRankNo || 0
				return r > 0 ? ('No.' + r) : '未上榜'
			},
			cd() {
				let s = Math.floor(this.remain / 1000)
				const h = Math.floor(s / 3600)
				s -= h * 3600
				const m = Math.floor(s / 60)
				s -= m * 60
				return {
					h: this.pad(h),
					m: this.pad(m),
					s: this.pad(s)
				}
			}
		},
		watch: {
			'data.countdownMillis'(val) {
				this.remain = val || 0
				this.startTimer()
			}
		},
		mounted() {
			this.remain = this.data.countdownMillis || 0
			this.startTimer()
		},
		beforeDestroy() {
			if (this.timer) clearInterval(this.timer)
		},
		methods: {
			pad(n) {
				return n < 10 ? ('0' + n) : ('' + n)
			},
			startTimer() {
				if (this.timer) clearInterval(this.timer)
				this.timer = setInterval(() => {
					if (this.remain <= 1000) {
						this.remain = 0
						clearInterval(this.timer)
						return
					}
					this.remain -= 1000
				}, 1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ph {
		position: relative;
		margin-top: 6rpx;
		height: 820rpx;
		overflow: visible;
	}

	.ph-story {
		position: absolute;
		left: 8rpx;
		top: 12rpx;
		z-index: 6;
		display: flex;
		flex-direction: column;
	}

	.ph-kicker {
		color: #35D6A6;
		font-size: 18rpx;
		font-weight: 900;
		letter-spacing: 4rpx;
	}

	.ph-title {
		margin-top: 10rpx;
		color: #12342F;
		font-size: 44rpx;
		font-weight: 900;
		letter-spacing: -1rpx;
	}

	.ph-sub {
		margin-top: 10rpx;
		color: #42635E;
		font-size: 24rpx;
		font-weight: 600;
	}

	.ph-meteor {
		position: absolute;
		width: 180rpx;
		height: 3rpx;
		border-radius: 999rpx;
		background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.95), rgba(79,183,255,0.4));
		transform: rotate(-28deg);
		animation: meteorFly 4.8s linear infinite;
		z-index: 2;
	}

	.ph-meteor-a {
		top: 132rpx;
		right: -120rpx;
	}

	.ph-meteor-b {
		top: 370rpx;
		left: 40rpx;
		width: 120rpx;
		animation-delay: -2.2s;
		opacity: 0.72;
	}

	@keyframes meteorFly {
		0% { transform: translate3d(180rpx, -70rpx, 0) rotate(-28deg); opacity: 0; }
		12% { opacity: 1; }
		70% { opacity: 1; }
		100% { transform: translate3d(-760rpx, 260rpx, 0) rotate(-28deg); opacity: 0; }
	}

	.ph-station {
		position: absolute;
		right: 26rpx;
		top: 150rpx;
		width: 170rpx;
		height: 78rpx;
		z-index: 4;
		animation: stationFloat 5.6s ease-in-out infinite;
	}

	@keyframes stationFloat {
		0%, 100% { transform: translateY(0) rotate(4deg); }
		50% { transform: translateY(-16rpx) rotate(-2deg); }
	}

	.ph-station-core {
		position: absolute;
		left: 58rpx;
		top: 20rpx;
		width: 56rpx;
		height: 38rpx;
		border-radius: 18rpx;
		background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(224,247,255,0.88));
		border: 2rpx solid rgba(79,183,255,0.28);
		box-shadow: 0 14rpx 28rpx rgba(79,183,255,0.18);
	}

	.ph-station-wing {
		position: absolute;
		top: 30rpx;
		width: 58rpx;
		height: 18rpx;
		border-radius: 999rpx;
		background: linear-gradient(90deg, rgba(143,124,255,0.76), rgba(79,183,255,0.72));
	}

	.ph-station-wing-left { left: 0; }
	.ph-station-wing-right { right: 0; }

	.ph-asteroid {
		position: absolute;
		border-radius: 46% 54% 44% 56%;
		background: linear-gradient(145deg, #FFE6A6, #FFB7D1);
		box-shadow: inset -10rpx -10rpx 20rpx rgba(150,93,48,0.12), 0 12rpx 30rpx rgba(255,184,77,0.18);
		z-index: 3;
		animation: asteroidFloat 6.2s ease-in-out infinite;
	}

	.ph-asteroid-a {
		left: 18rpx;
		top: 260rpx;
		width: 62rpx;
		height: 48rpx;
	}

	.ph-asteroid-b {
		right: 86rpx;
		top: 514rpx;
		width: 42rpx;
		height: 34rpx;
		animation-delay: -2s;
	}

	@keyframes asteroidFloat {
		0%, 100% { transform: translateY(0) rotate(0deg); }
		50% { transform: translateY(18rpx) rotate(12deg); }
	}

	.ph-floating-box {
		position: absolute;
		left: 34rpx;
		top: 525rpx;
		width: 88rpx;
		height: 86rpx;
		border-radius: 22rpx;
		background: linear-gradient(145deg, #FF8B6A, #FFCF7A);
		box-shadow: inset -8rpx -10rpx 18rpx rgba(146,75,26,0.18), 0 18rpx 36rpx rgba(255,122,89,0.22);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 900;
		z-index: 5;
		animation: treasureFloat 4.4s ease-in-out infinite;
	}

	.ph-floating-box-lid {
		position: absolute;
		left: -7rpx;
		top: -16rpx;
		width: 102rpx;
		height: 32rpx;
		border-radius: 18rpx;
		background: linear-gradient(135deg, #FFFFFF, #FFD38C);
		transform: rotate(-5deg);
	}

	@keyframes treasureFloat {
		0%, 100% { transform: translateY(0) rotate(-7deg); }
		50% { transform: translateY(-18rpx) rotate(5deg); }
	}

	.ph-orbit {
		position: absolute;
		left: 50%;
		border: 2rpx solid rgba(255,255,255,0.72);
		border-radius: 50%;
		transform: translateX(-50%) rotate(-16deg);
		z-index: 2;
	}

	.ph-orbit-a {
		top: 196rpx;
		width: 720rpx;
		height: 330rpx;
		opacity: 0.76;
	}

	.ph-orbit-b {
		top: 250rpx;
		width: 610rpx;
		height: 260rpx;
		opacity: 0.46;
	}

	.ph-orbit-c {
		top: 312rpx;
		width: 760rpx;
		height: 220rpx;
		opacity: 0.36;
		transform: translateX(-50%) rotate(12deg);
	}

	.ph-planet-wrap {
		position: absolute;
		top: 142rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 610rpx;
		height: 610rpx;
		z-index: 3;
		animation: planetBreath 4.4s ease-in-out infinite;
	}

	.ph-planet-glow {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 680rpx;
		height: 680rpx;
		border-radius: 50%;
		transform: translate(-50%, -50%);
		background: radial-gradient(circle, rgba(53,214,166,0.26), rgba(79,183,255,0.12) 42%, rgba(255,255,255,0) 68%);
		filter: blur(8rpx);
	}

	.ph-planet {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 570rpx;
		height: 570rpx;
		border-radius: 50%;
		background:
			radial-gradient(circle at 28% 22%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.72) 15%, transparent 28%),
			radial-gradient(circle at 72% 74%, rgba(143,124,255,0.34), transparent 38%),
			linear-gradient(145deg, rgba(201,255,225,0.82) 0%, rgba(166,242,255,0.78) 46%, rgba(232,223,255,0.82) 100%);
		box-shadow:
			inset -54rpx -66rpx 90rpx rgba(18,52,47,0.12),
			inset 36rpx 42rpx 78rpx rgba(255,255,255,0.68),
			0 42rpx 96rpx rgba(53,214,166,0.28);
		border: 2rpx solid rgba(255,255,255,0.72);
		overflow: hidden;
	}

	@keyframes planetBreath {
		0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
		50% { transform: translateX(-50%) translateY(-14rpx) scale(1.02); }
	}

	.ph-planet-map {
		position: absolute;
		background: rgba(53,214,166,0.16);
		filter: blur(1rpx);
	}

	.ph-planet-map-a {
		left: 96rpx;
		top: 172rpx;
		width: 172rpx;
		height: 82rpx;
		border-radius: 56% 44% 60% 40%;
		transform: rotate(-16deg);
	}

	.ph-planet-map-b {
		right: 96rpx;
		top: 298rpx;
		width: 188rpx;
		height: 92rpx;
		border-radius: 44% 56% 42% 58%;
		background: rgba(79,183,255,0.14);
		transform: rotate(20deg);
	}

	.ph-planet-map-c {
		left: 214rpx;
		bottom: 92rpx;
		width: 138rpx;
		height: 62rpx;
		border-radius: 50%;
		background: rgba(143,124,255,0.12);
	}

	.ph-shine {
		position: absolute;
		border-radius: 50%;
		background: rgba(255,255,255,0.72);
		filter: blur(2rpx);
	}

	.ph-shine-a {
		left: 94rpx;
		top: 80rpx;
		width: 140rpx;
		height: 74rpx;
		transform: rotate(-22deg);
	}

	.ph-shine-b {
		right: 96rpx;
		top: 98rpx;
		width: 66rpx;
		height: 34rpx;
		opacity: 0.58;
	}

	.ph-atmosphere {
		position: absolute;
		left: 28rpx;
		right: 28rpx;
		top: 38rpx;
		height: 150rpx;
		border-top: 3rpx solid rgba(255,255,255,0.5);
		border-radius: 50%;
		transform: rotate(-12deg);
	}

	.ph-planet-core {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 390rpx;
		min-height: 220rpx;
		border-radius: 56rpx;
		background: rgba(255,255,255,0.34);
		border: 1rpx solid rgba(255,255,255,0.72);
		backdrop-filter: blur(14px);
		box-shadow: inset 0 0 0 1rpx rgba(255,255,255,0.36), 0 18rpx 44rpx rgba(53,214,166,0.12);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 5;
	}

	.ph-core-label {
		color: #42635E;
		font-size: 24rpx;
		font-weight: 800;
		letter-spacing: 2rpx;
	}

	.ph-period {
		position: relative;
		text-align: center;
		color: #7E9691;
		font-size: 22rpx;
		font-weight: 700;
		margin-right: 12rpx;
	}

	.ph-pool {
		position: relative;
		text-align: center;
		margin-top: 8rpx;
		color: #16A779;
	}

	.ph-pool-symbol {
		font-size: 38rpx;
		font-weight: 900;
	}

	.ph-pool-num {
		font-size: 92rpx;
		font-weight: 900;
		font-family: DIN, sans-serif;
		letter-spacing: -2rpx;
	}

	.ph-pool-label {
		position: relative;
		text-align: center;
		color: #42635E;
		font-size: 24rpx;
		margin-top: 2rpx;
	}

	.ph-ticket-pill {
		position: absolute;
		left: 30rpx;
		bottom: 86rpx;
		z-index: 6;
		padding: 12rpx 22rpx;
		border-radius: 999rpx;
		background: rgba(18,52,47,0.86);
		border: 1rpx solid rgba(255,255,255,0.9);
		color: #FFFFFF;
		font-size: 23rpx;
		font-weight: 900;
		box-shadow: 0 16rpx 34rpx rgba(18,52,47,0.18);
	}

	.ph-count {
		position: absolute;
		left: 50%;
		bottom: 18rpx;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12rpx 16rpx;
		border-radius: 999rpx;
		background: rgba(255,255,255,0.72);
		border: 1rpx solid rgba(255,255,255,0.92);
		box-shadow: 0 18rpx 42rpx rgba(79,183,255,0.14);
		backdrop-filter: blur(8px);
		z-index: 6;
	}

	.ph-count-label {
		color: #42635E;
		font-size: 24rpx;
		font-weight: 700;
		margin-right: 12rpx;
	}

	.ph-count-unit {
		width: 64rpx;
		height: 64rpx;
		margin-left: 8rpx;
		border-radius: 22rpx;
		background: linear-gradient(145deg, #F8FFFB, #E1F8FF);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: inset 0 0 0 1rpx rgba(255,255,255,0.72);
	}

	.ph-count-unit text:first-child {
		color: #12342F;
		font-size: 28rpx;
		font-weight: 900;
		line-height: 30rpx;
		font-family: DIN, Arial, sans-serif;
	}

	.ph-count-unit text:last-child {
		color: #7E9691;
		font-size: 16rpx;
		font-weight: 700;
		line-height: 20rpx;
	}

	.ph-satellite {
		position: absolute;
		z-index: 6;
		min-width: 132rpx;
		padding: 14rpx 18rpx;
		border-radius: 28rpx;
		background: rgba(255,255,255,0.74);
		border: 1rpx solid rgba(255,255,255,0.92);
		box-shadow: 0 18rpx 38rpx rgba(53,214,166,0.12);
		display: flex;
		flex-direction: column;
		align-items: center;
		animation: orbitFloat 4s ease-in-out infinite;
	}

	.ph-satellite-left {
		left: 0;
		top: 350rpx;
		transform: rotate(-6deg);
	}

	.ph-satellite-right {
		right: 0;
		top: 428rpx;
		transform: rotate(7deg);
		animation-delay: -1.5s;
	}

	@keyframes orbitFloat {
		0%, 100% { margin-top: 0; }
		50% { margin-top: -12rpx; }
	}

	.ph-satellite-num {
		color: #12342F;
		font-size: 30rpx;
		font-weight: 900;
		max-width: 150rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.ph-satellite-label {
		margin-top: 2rpx;
		color: #7E9691;
		font-size: 20rpx;
		font-weight: 600;
	}

	.ph-squirrel {
		position: absolute;
		right: 18rpx;
		top: 585rpx;
		width: 142rpx;
		height: 164rpx;
		z-index: 7;
		animation: squirrelFloat 4.6s ease-in-out infinite;
	}

	@keyframes squirrelFloat {
		0%, 100% { transform: translateY(0) rotate(6deg); }
		50% { transform: translateY(-18rpx) rotate(-4deg); }
	}

	.ph-squirrel-img {
		position: absolute;
		left: 0;
		top: 0;
		width: 142rpx;
		height: 142rpx;
		border-radius: 50%;
		background: rgba(255,255,255,0.5);
		border: 3rpx solid rgba(255,255,255,0.9);
		box-shadow: 0 16rpx 34rpx rgba(79,183,255,0.18);
	}

	.ph-squirrel-tag {
		position: absolute;
		left: 38rpx;
		bottom: 0;
		width: 68rpx;
		height: 38rpx;
		line-height: 38rpx;
		text-align: center;
		border-radius: 999rpx;
		background: rgba(255,255,255,0.82);
		color: #35D6A6;
		font-size: 19rpx;
		font-weight: 900;
		border: 1rpx solid rgba(255,255,255,0.92);
		box-shadow: 0 10rpx 22rpx rgba(53,214,166,0.12);
	}
</style>
