<template>
	<view class="banner-top3">
		<image class="banner-bg" src="/static/rank/rank-bg.png" mode="aspectFill" />
		<image class="banner-bg banner-mask" src="/static/rank/bg-text.png" mode="aspectFill" />
		<view
			v-for="(item, index) in top3"
			:key="item.asset_id || index"
			class="top3-card"
		>
			<view class="artwork-container">
				<image class="artwork-image" :src="item.cover_url || '/static/avatar/1.jpeg'" mode="aspectFill" />

				<!-- 人气值 -->
				<!--<view class="popularity-overlay">
					<image class="fire-icon" src="/static/rank/spark.png" mode="aspectFit" />
					<text class="popularity-score">{{ formatScore(item.like_count) }}</text>
				</view>-->

				<!-- 排名徽章 -->
				<view class="rank-badge-bottom">
					<image class="rank-icon" :src="`/static/rank/charm-rank-icon${index + 1}.png`" mode="aspectFit" />
				</view>
				<view class="rank-badge-bottom rank-badge-bottom2">
					<image class="rank-icon" :src="`/static/rank/rank-icon${index + 1}.png`" mode="aspectFit" />
				</view>
			</view>

			<!-- 用户信息 -->
			<view class="user-info-with-artwork">
				<image
					class="user-avatar-small"
					:src="item.avatar_url || '/static/avatar/1.jpeg'"
					mode="aspectFit"
				/>
				<text class="user-nickname">用户 :
					<text class="user-nickname-name">{{ item.owner_nickname || '未知用户' }}</text>
				</text>
			</view>
		</view>

		<!-- 骨架屏 -->
		<view v-if="loading" class="skeleton-wrap">
			<view v-for="i in 3" :key="i" class="skeleton-card" />
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getHotRankingApi, getOssPresignedUrlApi } from '@/utils/api.js';

const top3 = ref([]);
const loading = ref(true);

const formatScore = (score) => {
	if (typeof score !== 'number' || isNaN(score) || score < 0) return '0';
	if (score >= 1000000) return (score / 1000000).toFixed(1) + 'M';
	if (score >= 1000) return (score / 1000).toFixed(1) + 'K';
	return score.toString();
};

// 获取 OSS 预签名 URL，失败时降级返回原值
const resolveOssUrl = async (fileName, type) => {
	if (!fileName) return '';
	try {
		const res = await getOssPresignedUrlApi(fileName, 3600, type);
		if (res?.code === 200 && res.data?.url) return res.data.url;
	} catch (e) {
		console.warn('[BannerTop3] OSS URL 获取失败', fileName, e?.message);
	}
	return fileName;
};

const loadTop3 = async () => {
	loading.value = true;
	try {
		const res = await getHotRankingApi('total', null, 1, 3);
		if (res.code === 200 && res.data?.items) {
			const items = res.data.items.slice(0, 3);
			// 并发解析所有封面图和头像的 OSS 预签名 URL
			top3.value = await Promise.all(items.map(async (item) => {
				const [coverUrl, avatarUrl] = await Promise.all([
					resolveOssUrl(item.cover_url || '', 'asset'),
					resolveOssUrl(item.avatar_url || '', 'avatar'),
				]);
				return { ...item, cover_url: coverUrl, avatar_url: avatarUrl };
			}));
		}
	} catch (e) {
		console.error('[BannerTop3] 加载失败', e?.message ?? e);
	} finally {
		loading.value = false;
	}
};

onMounted(loadTop3);
defineExpose({ reload: loadTop3 });
</script>

<style scoped>
.banner-top3 {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-around;
	padding: 0 16rpx;
	box-sizing: border-box;
	min-height: 200rpx;
	position: relative;
	overflow: hidden;
	border-radius: 24rpx;
}

.banner-bg {
	position: absolute;
	top: 0;
	width: 105%;
	height: 100%;
	z-index: 0;
}

/* ===== 复用 TOP3Card 样式 ===== */
.top3-card {
	width: 25%;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* gap: 32rpx; */
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 16rpx;
}

.rank-icon {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.3));
}

/* 有作品布局 */
.artwork-container {
	width: 90%;
	height: 208rpx;
	margin-top: 16rpx;
	margin-bottom: 32rpx;
	background-image: url('/static/rank/frames/frame1.png');
	background-size: 130% 115%;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
}

.artwork-image {
	width: calc(100% - 16rpx);
	height: calc(100% - 24rpx);
	top:16rpx;
    left:8rpx;
	border-radius: 12rpx;
}

.popularity-overlay {
	position: absolute;
	top: 24rpx;
	left: 0;
	display: flex;
	gap: 4rpx;
	align-items: center;
	padding: 6rpx 12rpx;
	border-radius: 12rpx;
	z-index: 2;
}

.popularity-overlay .fire-icon {
	width: 32rpx;
	height: 40rpx;
}

.popularity-overlay .popularity-score {
	font-size: 24rpx;
	font-weight: bold;
	color: #FFFFFF;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5), 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
	font-family: 'ZaoZiGongFangJianHei-1', sans-serif;
}

.rank-badge-bottom {
	position: absolute;
	bottom: -40rpx;
	left: 50%;
	transform: translateX(-50%) scale(1.5);
	z-index: 10;
	width: 80rpx;
	height: 80rpx;
	pointer-events: none;
}

.rank-badge-bottom2 {
	bottom: -50rpx;
	transform: translateX(-50%) scale(2);
}

.user-info-with-artwork {
	display: flex;
	flex-direction: row;
	align-items: center;
	/* gap: 8rpx; */
	width: 100%;
	justify-content: flex-start;
	padding: 0 12rpx;
}

.user-avatar-small {
	width: 32rpx;
	height: 32rpx;
	border-radius: 50%;
	border: 3rpx solid rgba(255, 255, 255, 0.7);
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
	flex-shrink: 0;
}

.user-nickname {
	font-size: 14rpx;
	margin-left: 8rpx;
	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: 'ZaoZiGongFangJianHei-1', sans-serif;
}

.user-nickname-name {
	font-size: 14rpx;
	color: #FFA500;
	text-shadow: 0 3rpx 6rpx rgba(0, 0, 0, 0.4), 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
	font-family: 'ZaoZiGongFangJianHei-1', sans-serif;
}

/* 骨架屏 */
.skeleton-wrap {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 0 16rpx;
	box-sizing: border-box;
}

.skeleton-card {
	width: 25%;
	height: 180rpx;
	border-radius: 16rpx;
	background: linear-gradient(90deg,
		rgba(255,255,255,0.06) 25%,
		rgba(255,255,255,0.14) 50%,
		rgba(255,255,255,0.06) 75%);
	background-size: 200% 100%;
	animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
</style>
