<template>
  <view class="podium-card" :class="['podium-' + rank]" @click="handleClick">
    <!-- 藏品主图（不规则圆角） -->
    <view class="cover-wrap">
      <!-- 相框（最底层） -->
      <image
        class="podium-frame"
        :src="`/static/square/galaxy/LV${rank - 3}.png`"
        mode="aspectFit"
      />
      <image
        class="cover-image"
        :src="item.cover_url || item.cover_image || ''"
        mode="aspectFill"
      />
    </view>

    <!-- TOP N 标签（cover 下方居中） -->
    <view class="top-label">TOP {{ rank - 3 }}</view>
  </view>
</template>

<script setup>
const props = defineProps({
  item: { type: Object, required: true },
  rank: { type: Number, required: true, validator: (v) => v >= 4 && v <= 6 },
});

const emit = defineEmits(["cardClick"]);

function handleClick() {
  emit("cardClick", props.item);
}
</script>

<style scoped>
.podium-card {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* TOP 1: 中央大卡（最大） */
.podium-4 {
  top: 400rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 240rpx;
  height: 260rpx;
}

/* TOP 2: 左上 */
.podium-5 {
  top: 120rpx;
  left: 60rpx;
  width: 200rpx;
  height: 200rpx;
}

/* TOP 3: 右上 */
.podium-6 {
  top: 150rpx;
  right: 60rpx;
  width: 192rpx;
  height: 192rpx;
}

/* TOP N 标签（按 rank 区分样式） */
.podium-4 .top-label {
  width: 96rpx;
  height: 22rpx;
  font-size: 13rpx;
  background: radial-gradient(ellipse, #ffd700, #fff6a8 30%, #daa520 100%);
}
.podium-5 .top-label,
.podium-6 .top-label {
  width: 78rpx;
  height: 18rpx;
  font-size: 11rpx;
}
.podium-5 .top-label {
  background: radial-gradient(ellipse, #c0c0c0, #e8e8e8 50%, #7a7a7a);
}
.podium-6 .top-label {
  background: radial-gradient(ellipse, #cd7f32, #e8a45c 50%, #a0522d);
}

.podium-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.cover-wrap {
  position: absolute;
  inset: 10rpx;
  overflow: hidden;
  z-index: 2;
}

.cover-image {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.top-label {
  position: absolute;
  bottom: -4rpx;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 11rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.5);
  box-shadow: 0 6rpx 16rpx rgba(255, 140, 0, 0.5);
  z-index: 7;
  letter-spacing: 1rpx;
}
</style>
