<template>
	<view class="ri" :class="cardClass">
		<view class="ri-scan"></view>
		<view class="ri-topline">
			<view class="ri-rank">
				<text>#{{item.rankNo}}</text>
			</view>
			<text class="ri-self" v-if="item.self">ME</text>
		</view>
		<view class="ri-avatar-wrap">
			<image class="ri-avatar" :src="item.avatar || defaultAvatar" mode="aspectFill"></image>
			<view class="ri-ring"></view>
		</view>
		<view class="ri-mid">
			<view class="ri-name">{{item.nickname || '神秘同学'}}</view>
			<view class="ri-bounty">{{item.ticketCount}} 张星球券</view>
			<view class="ri-tags">
				<text class="ri-danger">{{item.dangerLevelName || '校园玩家'}}</text>
				<text class="ri-keep" v-if="item.rankKeepDays > 0">霸榜 {{item.rankKeepDays}} 天</text>
			</view>
			<view class="ri-action"
				:class="{disabled: item.self || item.shielded}"
				@tap.stop="onHunt">
				<text v-if="item.shielded">防护中</text>
				<text v-else-if="item.self">榜上有我</text>
				<text v-else>发起追捕</text>
			</view>
			<view class="ri-extra" v-if="item.bountyTickets > 0 && !item.self">额外悬赏+{{item.bountyTickets}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: () => ({})
			},
			index: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				defaultAvatar: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/41cfb56caff4419b94b69d0f2303b602.png'
			}
		},
		computed: {
			cardClass() {
				return 'lv-' + (this.item.dangerLevel || 'C').toLowerCase() + (this.index < 3 ? ' top' : '')
			}
		},
		methods: {
			onHunt() {
				this.$emit('hunt', this.item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ri {
		position: relative;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		width: 252rpx;
		min-height: 386rpx;
		box-sizing: border-box;
		padding: 22rpx 20rpx 20rpx;
		border-radius: 42rpx;
		margin-right: 22rpx;
		background: linear-gradient(155deg, rgba(255,255,255,0.88), rgba(245,255,250,0.68));
		border: 2rpx solid rgba(255,255,255,0.92);
		overflow: hidden;
		vertical-align: top;
		white-space: normal;
		box-shadow: 0 22rpx 52rpx rgba(53,214,166,0.12);
	}

	.ri.top {
		width: 286rpx;
		min-height: 416rpx;
		background: linear-gradient(155deg, rgba(255,255,255,0.94), rgba(255,246,219,0.74));
	}

	.ri.lv-s, .ri.lv-sss {
		border-color: rgba(255,122,89,0.48);
		box-shadow: 0 24rpx 58rpx rgba(255,122,89,0.14);
	}

	.ri.lv-a {
		border-color: rgba(255,184,77,0.52);
	}

	.ri-scan {
		position: absolute;
		top: 0;
		left: -60%;
		width: 60%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255,255,255,0.62), transparent);
		animation: scan 4.2s linear infinite;
	}

	@keyframes scan {
		0% { left: -60%; }
		100% { left: 120%; }
	}

	.ri-topline {
		position: relative;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ri-rank {
		height: 42rpx;
		line-height: 42rpx;
		padding: 0 16rpx;
		border-radius: 999rpx;
		background: rgba(255,255,255,0.82);
		color: #22B889;
		border: 1rpx solid rgba(255,255,255,0.96);
		box-shadow: 0 8rpx 18rpx rgba(53,214,166,0.1);
		font-size: 22rpx;
		font-weight: 900;
	}

	.ri-self {
		background: linear-gradient(135deg, #35D6A6, #4FB7FF);
		color: #FFFFFF;
		font-size: 18rpx;
		font-weight: 900;
		padding: 4rpx 12rpx;
		border-radius: 999rpx;
	}

	.ri-avatar-wrap {
		position: relative;
		margin-top: 26rpx;
		width: 132rpx;
		height: 132rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ri-ring {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		border-radius: 50%;
		border: 3rpx dashed rgba(53,214,166,0.42);
		animation: ringRotate 10s linear infinite;
	}

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

	.ri-avatar {
		width: 106rpx;
		height: 106rpx;
		border-radius: 34rpx;
		border: 5rpx solid rgba(255,255,255,0.92);
		box-shadow: 0 16rpx 34rpx rgba(18,52,47,0.14);
	}

	.ri-mid {
		position: relative;
		width: 100%;
		margin-top: 18rpx;
		text-align: center;
		overflow: hidden;
	}

	.ri-name {
		color: #12342F;
		font-size: 28rpx;
		font-weight: 900;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.ri-bounty {
		margin-top: 8rpx;
		color: #22B889;
		font-size: 24rpx;
		font-weight: 900;
		font-family: DIN, Arial, sans-serif;
	}

	.ri-tags {
		margin-top: 14rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}

	.ri-danger {
		color: #FF7A59;
		font-size: 20rpx;
		font-weight: 800;
		border: 1rpx solid rgba(255,122,89,0.32);
		padding: 4rpx 12rpx;
		border-radius: 999rpx;
		background: rgba(255,122,89,0.08);
	}

	.ri-keep {
		color: #7E9691;
		font-size: 20rpx;
		margin-top: 8rpx;
	}

	.ri-action {
		margin: 18rpx auto 0;
		height: 58rpx;
		line-height: 58rpx;
		border-radius: 999rpx;
		background: linear-gradient(135deg, #FF7A59, #FFB84D);
		color: #fff;
		font-size: 23rpx;
		font-weight: 900;
		box-shadow: 0 14rpx 28rpx rgba(255,122,89,0.22);
	}

	.ri-action.disabled {
		background: rgba(18,52,47,0.08);
		color: #9AA9A5;
		box-shadow: none;
	}

	.ri-extra {
		margin-top: 8rpx;
		color: #FFB84D;
		font-size: 20rpx;
		font-weight: 800;
		text-align: center;
	}
</style>
