<template>
  <view class="page-wrapper">
    <!-- 背景装饰 - 与原始设计一致 -->
    <view class="bg-decoration">
      <view class="orb orb-1"></view>
      <view class="orb orb-2"></view>
    </view>

    <!-- 顶部背景图（模糊处理） -->
    <view class="page-bg">
      <image class="bg-image" :src="coverUrl" mode="aspectFill" />
      <view class="bg-mask"></view>
    </view>

    <!-- 主要内容区域 -->
    <scroll-view class="main-scroll" scroll-y>
      <!-- 头部插槽 -->
      <slot name="header"></slot>

      <!-- 主内容插槽 -->
      <slot name="content"></slot>
      <slot></slot>

      <!-- 底部垫高 -->
      <view :style="{ height: bottomPadding }"></view>
    </scroll-view>

    <!-- 底部操作栏插槽 -->
    <slot name="footer"></slot>

    <!-- 弹窗插槽 -->
    <slot name="modals"></slot>
  </view>
</template>

<script setup>
defineProps({
  coverUrl: {
    type: String,
    default: ''
  },
  bottomPadding: {
    type: String,
    default: '180rpx'
  }
})
</script>

<style lang="scss" scoped>
/* ============================================
   页面框架 - 与原始设计完全一致
   ============================================ */

.page-wrapper {
  min-height: 100vh;
  background: $bg-page;
  position: relative;
  overflow: hidden;
}

/* 背景装饰 */
.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80rpx);
  opacity: 0.6;
}

.orb-1 {
  width: 500rpx;
  height: 500rpx;
  background: radial-gradient(circle, rgba($brand-primary, 0.2) 0%, transparent 70%);
  top: -100rpx;
  left: -100rpx;
}

.orb-2 {
  width: 600rpx;
  height: 600rpx;
  background: radial-gradient(circle, rgba($accent-gold, 0.15) 0%, transparent 70%);
  bottom: -100rpx;
  right: -100rpx;
}

/* 顶部背景 */
.page-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 700rpx;
  z-index: 1;
}

.bg-image {
  width: 100%;
  height: 100%;
  filter: blur(30rpx) brightness(0.9);
  transform: scale(1.1);
}

.bg-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba($bg-page, 0.2) 0%, $bg-page 90%, $bg-page 100%);
}

.main-scroll {
  position: relative;
  z-index: 2;
  height: 100vh;
}
</style>
