<template>
  <view class="collection-matrix">
    <text class="section-title">藏品矩阵</text>
    <image
      class="chart-bg"
      src="/static/dashboard/image-bj.png"
      mode="scaleToFill"
    />
    <!-- TOP 5 -->
    <TopFiveAssets :items="topFive || []" class="top-five-assets" />

    <!-- 等级分布 -->
    <LevelDistribution :items="levels" />

    <!-- 即将升级 + 最近升级 (双列) -->
    <view class="upgrades-two-col">
      <UpcomingUpgrades :items="upgrades?.upcoming || []" />
      <RecentUpgrades :items="upgrades?.recent || []" />
    </view>
  </view>
</template>

<script setup>
import TopFiveAssets from "./TopFiveAssets.vue";
import LevelDistribution from "./LevelDistribution.vue";
import UpcomingUpgrades from "./UpcomingUpgrades.vue";
import RecentUpgrades from "./RecentUpgrades.vue";

defineProps({
  topFive: { type: Array, default: () => [] },
  levels: { type: Array, default: () => [] },
  upgrades: { type: Object, default: () => ({ upcoming: [], recent: [] }) },
});
</script>

<style lang="scss" scoped>
.collection-matrix {
  background:
    linear-gradient(
      106.77deg,
      rgba(255, 223, 119, 0.13) -9.76%,
      rgba(132, 255, 210, 0.13) 44.65%,
      rgba(255, 129, 131, 0.13) 117.82%
    ),
    linear-gradient(0deg, rgba(255, 159, 16, 0.2), rgba(255, 159, 16, 0.2));
  border-radius: 22rpx;
  padding: 12rpx;
  margin: 12rpx 0;
  box-shadow: 0px 4px 4px 0px rgba(189, 50, 50, 0.25);
  position: relative;
  overflow: hidden;
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/static/dashboard/bj.png") center / cover no-repeat;
    opacity: 0.2; // ⬅ 调这个数控制图片透明度（0=完全透明，1=完全不透明）
    pointer-events: none;
    z-index: 0;
  }
}

.section-title {
  display: block;
  font-size: 36rpx;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 34rpx;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 2; // 在 ::before 之上
}

.chart-bg {
  position: absolute;
  top: -64rpx;
  left: -56rpx;
  width: 312rpx;
  height: 312rpx;
  z-index: 1; // 在 ::before(z:0) 之上，在标题(z:2) 和内容(z:1) 之间
  pointer-events: none; // 不拦截 tap，事件穿透到 canvas
  opacity: 0.5;
  transform: rotate(-15deg);
}

.upgrades-two-col {
  display: flex;
  gap: 12rpx;
  margin-top: 16rpx;

  > * {
    flex: 1;
  }
}
</style>
