<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">
          <image
            v-if="item.asset_thumb"
            class="top-thumb-img"
            :src="item.asset_thumb"
            mode="aspectFill"
          />
          <text v-else class="top-emoji">🏆</text>
        </view>
        <view class="top-badge">
          <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: linear-gradient(
    106.77deg,
    rgba(255, 223, 119, 0.24) -9.76%,
    rgba(185, 132, 255, 0.24) 44.65%,
    rgba(255, 129, 131, 0.24) 117.82%
  );
  box-shadow: 0px 4px 4px 0px rgba(189, 50, 50, 0.25);

  border-radius: 14px;
  padding: 20rpx;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);

  position: relative;
  z-index: 2;
  backdrop-filter: blur(3.5px);
  // backdrop-filter: blur(1px);
}

.card-title {
  display: block;
  font-size: 24rpx;
  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: 80rpx;
  height: 100rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24rpx;
  box-shadow: 0px 4px 5.8px 0px rgba(226, 51, 51, 0.53);
  transform: rotate(-10deg);
  overflow: hidden; // 裁切 image 贴合圆角
}

// 藏品缩略图：填满 .top-thumb 容器
.top-thumb-img {
  width: 100%;
  height: 100%;
  display: block;
}

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

.top-badge {
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  opacity: 0.85;
  background: linear-gradient(
    93.1deg,
    rgba(224, 180, 247, 0.71) -12.06%,
    rgba(178, 246, 204, 0.71) 52.09%,
    rgba(98, 178, 244, 0.71) 163.5%
  );
  backdrop-filter: blur(11.699999809265137px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-badge-text {
  font-size: 18rpx;
  font-family: C800;
  font-weight: 600;
  color: #fffabd;
  text-shadow: -1px 1px 4px #ce0909d6;
}

.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>
