<template>
	<view class="ranking-list-item">
		<!-- 排名编号 -->
		<view class="rank-number">
			<text class="rank-text">{{ rank }}</text>
		</view>
		
		<!-- 左侧：图片区域（作品图片 + 头像 + 昵称） -->
		<view :class="['left-section', { 'no-artwork': !artworkImage }]">
			<!-- 图片容器 -->
			<view class="image-container" :class="{ 'no-artwork': !artworkImage }">
				<!-- 作品图片（可选） - 使用原生懒加载 -->
				<image 
					v-if="artworkImage"
					:src="artworkImage"
					mode="aspectFill"
					class="artwork-image"
					lazy-load
					@error="handleArtworkError"
					@tap="handleArtworkClick"
				/>
				
			</view>
			
			<view class="user-box" :class="{ 'avatar-standalone': !artworkImage }">
				<!-- 头像 - 叠加在作品图片右下角，或单独显示 - 使用原生懒加载 -->
				<image 
					:class="['user-avatar', { 'avatar-standalone': !artworkImage }]" 
					:src="avatar || '/static/avatar/1.jpeg'"
					mode="aspectFill"
					lazy-load
					@error="handleAvatarError"
					@tap="handleAvatarClick"
				/>
			<!-- 昵称 - 在头像下方（有作品时）或右下角（无作品时） -->
			<text :class="['user-nickname', { 'nickname-overlay': !artworkImage }]">
			{{'用户 :'}}<text class="user-nickname-name">{{ nickname || '未知用户' }}</text>
			</text>
			</view>
		</view>
		
		<!-- 右侧：人气值和拜访按钮 -->
		<view class="right-section">
			<!-- 人气值 -->
			<view class="popularity-container">
				<image class="fire-icon" src="/static/rank/spark.png" mode="aspectFit" lazy-load></image>
				<text class="popularity-score">{{ formattedScore }}</text>
			</view>
			
			<!-- 拜访按钮 -->
			<view 
				v-if="showVisitButton" 
				class="visit-button"
				@tap="handleVisit"
			>
				<image 
					class="visit-icon" 
					src="/static/square/dianjibaifang.png" 
					mode="aspectFit"
					lazy-load
				></image>
				<text class="visit-text">点击拜访</text>
			</view>
		</view>
		
		<!-- 操作菜单 -->
		<view v-if="showActionMenu" class="action-menu-overlay" @tap="closeActionMenu">
			<view class="action-menu" @tap.stop>
				<view 
					v-if="!isCurrentUser"
					class="menu-item" 
					@tap="handleMenuVisit"
				>
					<image class="menu-icon" src="/static/square/dianjibaifang.png" mode="aspectFit" lazy-load></image>
					<text class="menu-text">点击拜访</text>
				</view>
				<view class="menu-item" @tap="handleMenuViewProfile">
					<image class="menu-icon" src="/static/icon/character.png" mode="aspectFit" lazy-load></image>
					<text class="menu-text">查看个人信息</text>
				</view>
			</view>
		</view>

		 <view class="rank-decoration"></view> 
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
	rank: {
		type: Number,
		required: true
	},
	userId: {
		type: String,
		required: true
	},
	avatar: {
		type: String,
		required: true
	},
	nickname: {
		type: String,
		required: true
	},
	popularityScore: {
		type: Number,
		required: true
	},
	artworkImage: {
		type: String,
		default: ''
	},
	artworkId: {
		type: String,
		default: ''
	},
	showVisitButton: {
		type: Boolean,
		default: true
	},
	isCurrentUser: {
		type: Boolean,
		default: false
	}
});

const emit = defineEmits(['visit', 'avatar-click', 'artwork-click', 'view-profile']);

// 操作菜单显示状态
const showActionMenu = ref(false);

// 格式化人气值（超过百万显示为 M，超过千显示为 K）
const formattedScore = computed(() => {
	const score = props.popularityScore;
	// 处理无效数据
	if (typeof score !== 'number' || isNaN(score) || score < 0) {
		return '0';
	}
	
	if (score >= 1000000) {
		return (score / 1000000).toFixed(1) + 'M';
	} else if (score >= 1000) {
		return (score / 1000).toFixed(1) + 'K';
	}
	return score.toString();
});

// 处理拜访按钮点击
const handleVisit = () => {
	emit('visit');
};

// 处理头像点击 - 显示操作菜单
const handleAvatarClick = () => {
	showActionMenu.value = true;
	emit('avatar-click', {
		userId: props.userId,
		isCurrentUser: props.isCurrentUser
	});
};

// 关闭操作菜单
const closeActionMenu = () => {
	showActionMenu.value = false;
};

// 处理菜单中的拜访选项
const handleMenuVisit = () => {
	closeActionMenu();
	emit('visit');
};

// 处理菜单中的查看个人信息选项
const handleMenuViewProfile = () => {
	closeActionMenu();
	emit('view-profile', props.userId);
};

// 处理作品图片点击
const handleArtworkClick = () => {
	if (props.artworkId && props.artworkImage) {
		emit('artwork-click', {
			artworkId: props.artworkId,
			userId: props.userId
		});
	}
};

// 处理头像加载失败
const handleAvatarError = (e) => {
	// 设置默认头像 - 使用现有的头像作为备用
	e.target.src = '/static/avatar/1.jpeg';
};

// 处理作品图片加载失败
const handleArtworkError = (e) => {
	// 设置默认占位图
	e.target.src = '/static/nft/collection.png';
};
</script>

<style scoped>
.ranking-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24rpx;
	gap: 20rpx;
	position:relative;
}

.rank-decoration {
    position: absolute;
    bottom: -8rpx;
    left: 32rpx;
    width: 92%;
    height: 8rpx;
    background: linear-gradient(90deg, #ff9a9e 0%, #fecfef 50%, #ff9a9e 100%);
    border-radius: 4rpx;
    pointer-events: none; /* 防止遮挡点击事件 */
}

/* 排名编号 */
.rank-number {
	min-width: 64rpx;
	display: flex;
	align-items: center;
	padding: 8rpx;
}

.rank-text {
	font-size: 32rpx;
	font-weight: bold;
	color: #FFFFFF;
	text-shadow: 
		0 3rpx 6rpx rgba(0, 0, 0, 0.4),
		0 1rpx 3rpx rgba(0, 0, 0, 0.3);
	font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
}

/* 左侧区域 - 图片和昵称 */
.left-section {
	display: flex;
	align-items: center;
	gap: 8rpx;
	flex-shrink: 0;
}

/* 当没有作品时，左侧区域改为横向布局 */
.left-section.no-artwork {
	flex-direction: row;
	align-items: center;
	gap: 12rpx;
}

/* 图片容器 - 作品图片和头像叠加 */
.image-container {
	position: relative;
	width: 120rpx;
	height: 120rpx;
	flex-shrink: 0;
}
.image-container.no-artwork{
	display:none;
}

/* 作品图片 */
.artwork-image {
	width: 80rpx;
	height: 104rpx;
	border-radius: 16rpx;
	border: 3rpx solid rgba(255, 255, 255, 0.6);
	/* 优化：2层阴影简化为1层 */
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.25);
	/* 优化：只动画 transform，避免 transition: all */
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
}

.artwork-image:active {
	transform: scale(0.95);
}

.user-box{
	display: flex;
	/* gap: 16rpx; */
	flex-direction: column;
}
.user-box.avatar-standalone{
	flex-direction: row;
	align-items: flex-end;
}

/* 头像 - 叠加在作品图片右下角 */
.user-avatar {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	border: 3rpx solid rgba(255, 255, 255, 0.9);
	/* 优化：2层阴影简化为1层 */
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
	/* 优化：只动画 transform，避免 transition: all */
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	background: #FFFFFF;
	margin-top: 8rpx;
}

.user-avatar:active {
	transform: scale(0.95);
}

/* 当没有作品图片时，头像单独显示并居中 */
.user-avatar.avatar-standalone {
	width: 120rpx;
	height: 120rpx;
}

.user-nickname {
		font-size: 14rpx;
		margin-top: 16rpx;
		color: #FFFFFF;
		text-align: center;
		max-width: 100%;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-shadow:
			0 3rpx 6rpx rgba(0, 0, 0, 0.4),
			0 1rpx 3rpx rgba(0, 0, 0, 0.3);
		font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
	}

	.user-nickname-name{
		  font-size: 14rpx;
    margin-left: 0.5em; /* 缩进2格 */
    color: #FFA500; /* 橙色，接近图中 LISA 的颜色 */
    text-shadow:
        0 3rpx 6rpx rgba(0, 0, 0, 0.4),
        0 1rpx 3rpx rgba(0, 0, 0, 0.3);
    font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
	}

.user-nickname.nickname-overlay{
	margin-bottom:16rpx
}

/* 右侧区域 - 人气值和拜访按钮 */
.right-section {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4rpx;
	min-width: 0;
	margin-right: 32rpx;
}

.popularity-container {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20rpx;
	padding: 8rpx;
	/* 优化：5色渐变简化为2色 */
	background: linear-gradient(135deg, #FF6B9D 0%, #FFB199 100%);
	border-radius: 16rpx;
	/* 优化：3层阴影简化为1层 */
	box-shadow: 0 -4rpx 16rpx rgba(255, 107, 157, 0.35);
	border: 2rpx solid rgba(255, 255, 255, 0.3);
	/* 优化：移除 backdrop-filter，GPU 密集型操作 */
}

.fire-icon {
	width: 64rpx;
	height: 72rpx;
	position: absolute;
    left: -32rpx;
    top: -32rpx;
}

.popularity-score {
	font-size: 24rpx;
	padding: 0 16rpx 0 32rpx;
	color: #FFFFFF;
	text-shadow: 
		0 2rpx 4rpx rgba(0, 0, 0, 0.4),
		0 1rpx 2rpx rgba(0, 0, 0, 0.3);
	font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
}

/* 拜访按钮 - 只显示图标 */
.visit-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80rpx;
	height: 80rpx;
	padding: 8rpx;
	flex-direction: column;
}


.visit-icon {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 8rpx;
	/* transform: scale(1.2); */
}
.visit-text{
	color: #FFFFFF;
	font-size:16rpx;
}

/* 操作菜单 */
.action-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	/* 优化：移除 backdrop-filter，GPU 密集型操作 */
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.action-menu {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
	/* 优化：移除 backdrop-filter，GPU 密集型操作 */
	border-radius: 24rpx;
	padding: 20rpx;
	min-width: 400rpx;
	/* 优化：2层阴影简化为1层 */
	box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.3);
	border: 2rpx solid rgba(255, 255, 255, 0.8);
	animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.9) translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.menu-item {
	display: flex;
	align-items: center;
	gap: 20rpx;
	padding: 28rpx 32rpx;
	border-radius: 16rpx;
	background: rgba(255, 255, 255, 0.5);
	margin-bottom: 12rpx;
	/* 优化：只动画必要属性，避免 transition: all */
	transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	border: 1rpx solid rgba(123, 104, 238, 0.2);
}

.menu-item:last-child {
	margin-bottom: 0;
}

.menu-item:active {
	background: linear-gradient(135deg, rgba(123, 104, 238, 0.3) 0%, rgba(123, 104, 238, 0.2) 100%);
	transform: scale(0.98);
	box-shadow: 0 2rpx 8rpx rgba(123, 104, 238, 0.3);
}

.menu-icon {
	width: 40rpx;
	height: 40rpx;
	filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
}

.menu-text {
	font-size: 32rpx;
	font-weight: 600;
	color: #333333;
	font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
}
</style>
