<template>
  <view
    class="podium-card"
    :class="['podium-' + rank]"
    :style="[cardStyle, internalPosition]"
    @click="handleClick"
  >
    <!-- 相框（最底层） -->
    <image class="podium-frame" :src="frameSrc" mode="aspectFit" />

    <!-- 藏品主图（不规则圆角） -->
    <view class="cover-wrap">
      <image
        class="cover-image"
        :src="item.cover_url || item.cover_image || ''"
        mode="aspectFill"
      />
    </view>

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

<script setup>
import { computed } from "vue";

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

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

// 颁奖台 3 个位置的尺寸和位置（与 ScatteredRanks 的 rpx 单位对齐）
const PODIUM_SIZES = {
  4: { width: 240, height: 260 }, // TOP 1
  5: { width: 200, height: 200 }, // TOP 2
  6: { width: 192, height: 192 }, // TOP 3
};
const PODIUM_POSITIONS = {
  4: {
    position: "absolute",
    top: "400rpx",
    left: "50%",
    transform: "translateX(-50%)",
  },
  5: { position: "absolute", top: "120rpx", left: "60rpx" },
  6: { position: "absolute", top: "150rpx", right: "60rpx" },
};

const internalSize = computed(() => PODIUM_SIZES[props.rank]);
const internalPosition = computed(() => PODIUM_POSITIONS[props.rank]);

// 内部 rank 4/5/6 对外显示 1/2/3（颁奖台：TOP 1/2/3）
const displayRank = computed(() => props.rank - 3);

// 相框图片源：rank 4 → LV1, rank 5 → LV2, rank 6 → LV3
const frameSrc = computed(() => {
  const lvNumber = props.rank - 3;
  return `/static/square/galaxy/LV${lvNumber}.png`;
});

// 不同 rank 的标签渐变
const labelGradients = {
  4: "radial-gradient(ellipse, #FFD700, #FFF6A8 30%, #DAA520 100%)", // 金
  5: "radial-gradient(ellipse, #C0C0C0, #E8E8E8 50%, #7A7A7A)", // 银
  6: "radial-gradient(ellipse, #CD7F32, #E8A45C 50%, #A0522D)", // 铜
};

const labelSizes = {
  4: { w: 96, h: 22, font: 13 },
  5: { w: 78, h: 18, font: 11 },
  6: { w: 78, h: 18, font: 11 },
};

const cardStyle = computed(() => ({
  width: internalSize.value.width + "rpx",
  height: internalSize.value.height + "rpx",
}));

const labelStyle = {
  width: labelSizes[props.rank].w + "rpx",
  height: labelSizes[props.rank].h + "rpx",
  fontSize: labelSizes[props.rank].font + "rpx",
  background: labelGradients[props.rank],
};

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

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

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