<template>
	<view class="pr">
		<view class="pr-game">
			<view class="pr-radar">
				<view class="pr-radar-line"></view>
				<view class="pr-radar-dot"></view>
			</view>
			<view class="pr-game-copy">
				<text class="pr-kicker">SCHOOL RICH LIST</text>
				<text class="pr-title">全校首富雷达</text>
				<text class="pr-sub">锁定券王，发起追捕，抢回今日补给权</text>
			</view>
			<view class="pr-remain">
				<text>{{remainHunt}}</text>
				<text>次追捕</text>
			</view>
		</view>

		<scroll-view v-if="list && list.length" scroll-x class="pr-scroll" show-scrollbar="false">
			<view class="pr-list">
				<rank-item
					v-for="(item, i) in list"
					:key="i"
					:item="item"
					:index="i"
					@hunt="onHunt">
				</rank-item>
			</view>
		</scroll-view>
		<view v-else class="pr-empty">
			<text>暂无上榜居民，攒券登顶成为今日主角</text>
		</view>
	</view>
</template>

<script>
	import rankItem from './rank-item.vue'
	export default {
		components: {
			rankItem
		},
		props: {
			list: {
				type: Array,
				default: () => []
			},
			remainHunt: {
				type: Number,
				default: 0
			}
		},
		methods: {
			onHunt(item) {
				this.$emit('hunt', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pr {
		margin-top: 38rpx;
	}

	.pr-game {
		position: relative;
		display: flex;
		align-items: center;
		min-height: 190rpx;
		box-sizing: border-box;
		padding: 28rpx 24rpx;
		margin-bottom: 24rpx;
		border-radius: 46rpx;
		background:
			radial-gradient(circle at 18% 50%, rgba(255,122,89,0.14), transparent 34%),
			linear-gradient(135deg, rgba(255,255,255,0.86), rgba(255,246,219,0.66));
		border: 2rpx solid rgba(255,255,255,0.92);
		box-shadow: 0 24rpx 58rpx rgba(255,122,89,0.12);
		overflow: hidden;
	}

	.pr-radar {
		position: relative;
		width: 126rpx;
		height: 126rpx;
		border-radius: 50%;
		border: 2rpx solid rgba(255,122,89,0.22);
		background: radial-gradient(circle, rgba(255,122,89,0.12), rgba(255,255,255,0.44));
		flex-shrink: 0;
		overflow: hidden;
	}

	.pr-radar:before,
	.pr-radar:after {
		content: '';
		position: absolute;
		border-radius: 50%;
		border: 1rpx solid rgba(255,122,89,0.2);
	}

	.pr-radar:before {
		left: 24rpx;
		top: 24rpx;
		width: 76rpx;
		height: 76rpx;
	}

	.pr-radar:after {
		left: 44rpx;
		top: 44rpx;
		width: 36rpx;
		height: 36rpx;
	}

	.pr-radar-line {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 58rpx;
		height: 4rpx;
		border-radius: 999rpx;
		transform-origin: left center;
		background: linear-gradient(90deg, rgba(255,122,89,0.72), rgba(255,122,89,0));
	}

	@keyframes radarSpin {
		0% { transform: rotate(0deg) translateX(0); }
		100% { transform: rotate(360deg) translateX(0); }
	}

	.pr-radar-dot {
		position: absolute;
		right: 30rpx;
		top: 36rpx;
		width: 14rpx;
		height: 14rpx;
		border-radius: 50%;
		background: #FF7A59;
		box-shadow: 0 0 18rpx rgba(255,122,89,0.55);
	}

	.pr-game-copy {
		flex: 1;
		margin-left: 22rpx;
		min-width: 0;
	}

	.pr-kicker {
		display: block;
		color: #FF7A59;
		font-size: 18rpx;
		font-weight: 900;
		letter-spacing: 3rpx;
		margin-bottom: 4rpx;
	}

	.pr-title {
		display: block;
		color: #12342F;
		font-size: 38rpx;
		font-weight: 900;
		letter-spacing: -1rpx;
	}

	.pr-sub {
		display: block;
		color: #7E9691;
		font-size: 22rpx;
		margin-top: 6rpx;
		font-weight: 600;
	}

	.pr-remain {
		color: #FFFFFF;
		width: 112rpx;
		height: 112rpx;
		background: linear-gradient(135deg, #FF7A59, #FFB84D);
		border-radius: 34rpx;
		box-shadow: 0 12rpx 26rpx rgba(255,122,89,0.18);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		transform: rotate(4deg);
	}

	.pr-remain text:first-child {
		font-size: 40rpx;
		font-weight: 900;
		line-height: 42rpx;
		font-family: DIN, Arial, sans-serif;
	}

	.pr-remain text:last-child {
		font-size: 19rpx;
		font-weight: 800;
		margin-top: 4rpx;
	}

	.pr-scroll {
		width: 100%;
		white-space: nowrap;
	}

	.pr-list {
		display: inline-flex;
		padding: 4rpx 0 12rpx;
	}

	.pr-empty {
		padding: 60rpx 0;
		text-align: center;
		color: #7E9691;
		font-size: 24rpx;
	}
</style>
