<template>
  <view class="top-five-card">
    <text class="card-title">历史藏品收益 TOP 5</text>
    <view v-if="!items || items.length === 0" class="empty-row">
      <text class="empty-text">暂无数据</text>
    </view>
    <view v-else class="top-five-row">
      <view
        v-for="item in items"
        :key="item.asset_id"
        class="top-cell"
      >
        <view class="top-thumb" :class="`top-grad-${item.rank}`">
          <text class="top-emoji">🏆</text>
        </view>
        <view class="top-badge" :class="`top-badge-${item.rank}`">
          <text class="top-badge-text">TOP {{ item.rank }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  items: { type: Array, default: () => [] }, // TopAssetItem[]
})
</script>

<style lang="scss" scoped>
.top-five-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 17rpx;
  padding: 20rpx;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
}

.card-title {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 16rpx;
}

.top-five-row {
  display: flex;
  justify-content: space-between;
  gap: 8rpx;
}

.top-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top-thumb {
  width: 100rpx;
  height: 100rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
  box-shadow: 0 0 12px rgba(255, 200, 100, 0.3);
}

.top-grad-1 { background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); }
.top-grad-2 { background: linear-gradient(135deg, #C0C0C0 0%, #808080 100%); }
.top-grad-3 { background: linear-gradient(135deg, #CD7F32 0%, #8B4513 100%); }
.top-grad-4 { background: linear-gradient(135deg, #B17BFF 0%, #FF8FE6 100%); }
.top-grad-5 { background: linear-gradient(135deg, #5EDFFF 0%, #6FA9FF 100%); }

.top-emoji {
  font-size: 48rpx;
}

.top-badge {
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  opacity: 0.85;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.top-badge-1 { background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%); }
.top-badge-2 { background: linear-gradient(90deg, #C0C0C0 0%, #808080 100%); }
.top-badge-3 { background: linear-gradient(90deg, #CD7F32 0%, #8B4513 100%); }
.top-badge-4 { background: linear-gradient(90deg, #B17BFF 0%, #FF8FE6 100%); }
.top-badge-5 { background: linear-gradient(90deg, #5EDFFF 0%, #6FA9FF 100%); }

.top-badge-text {
  font-size: 18rpx;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.empty-row {
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-text {
  color: rgba(255, 255, 255, 0.5);
  font-size: 24rpx;
}
</style>
