<template>
	<!-- 只渲染背景图，卡片由父组件 BannerCarousel 渲染在 swiper 外层 -->
	<view class="banner-top3-bg" @tap="onBannerTap">
		<image class="banner-bg" src="/static/square/paihangbang.png" mode="aspectFill" />
	</view>
</template>

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

const emit = defineEmits(['dataLoaded']);

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 () => {
	try {
		const res = await getHotRankingApi('total', null, 1, 3);
		if (res.code === 200 && res.data?.items) {
			const items = res.data.items.slice(0, 3);
			const resolved = 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 };
			}));
			emit('dataLoaded', resolved);
		}
	} catch (e) {
		console.error('[BannerTop3] 加载失败', e?.message ?? e);
	}
};

const onBannerTap = () => {
	uni.navigateTo({ url: '/pages/rank/rank' });
};

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

<style scoped>
.banner-top3-bg {
	width: 100%;
	height: 360rpx;
	position: relative;
	overflow: hidden;
	border-radius: 24rpx;
}

.banner-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
</style>
