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

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

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

const resolveOssUrl = async (fileName, type) => {
	if (!fileName) return '';
	// 直接使用后端返回的图片URL
	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 = items.map(item => {
				return { ...item, cover_url: item.cover_url || '', avatar_url: item.avatar_url || '' };
			});
			emit('dataLoaded', resolved);
		}
	} catch (e) {
		console.error('[BannerTop3] 加载失败', e?.message ?? e);
	}
};

// const onBannerTap = () => {
// 	uni.navigateTo({ url: '/pages/profile/hisWorks?userId=1&nickname=用户' });
// };

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>
