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

    <!-- 导航栏占位（如果有自定义导航栏需求） -->
    <!-- <view class="nav-bar-placeholder"></view> -->

    <!-- 主要内容区域 -->
    <scroll-view class="main-scroll" scroll-y>
      
      <!-- 头部信息卡片 -->
      <view class="header-card animate-enter">
        <image class="header-cover" :src="coverUrl" mode="aspectFill" />
        <view class="header-info">
          <view class="header-title">{{ detail.name || detail.title || '一番赏活动' }}</view>
          <view class="header-price-row">
            <text class="price-symbol">¥</text>
            <text class="price-num">{{ (Number(detail.price_draw || 0) / 100).toFixed(2) }}</text>
            <text class="price-unit">/发</text>
          </view>
          <view class="header-time-row" v-if="scheduledTimeText">
            <text class="time-label">本期结束</text>
            <text class="time-value">{{ scheduledTimeText }}</text>
          </view>
          <view class="header-tags">
            <view class="tag-item">公开透明</view>
            <view class="tag-item">拒绝套路</view>
          </view>
        </view>
        <view class="header-actions">
           <view class="action-btn" @tap="showRules">
             <text class="icon">📋</text>
             <text>规则</text>
           </view>
           <view class="action-btn" @tap="goCabinet">
             <text class="icon">📦</text>
             <text>盒柜</text>
           </view>
        </view>
      </view>

      <!-- 赏品概览 -->
      <view class="section-container animate-enter stagger-1" v-if="currentIssueRewards.length > 0">
        <view class="section-header">
          <text class="section-title">赏品一览</text>
          <text class="section-more" @tap="openRewardsPopup">查看全部</text>
        </view>
        <scroll-view class="preview-scroll" scroll-x>
          <view class="preview-item" v-for="(item, idx) in currentIssueRewards" :key="idx">
            <view class="prize-tag" :class="{ 'tag-boss': item.boss }">{{ item.boss ? 'BOSS' : (item.grade || '赏') }}</view>
            <image class="preview-img" :src="item.image" mode="aspectFill" />
            <view class="preview-name">{{ item.title }}</view>
          </view>
        </scroll-view>
      </view>

      <!-- 选号区域 -->
      <view class="section-container selector-container animate-enter stagger-2">
        <!-- 期号切换 -->
        <view class="issue-header">
           <view class="issue-switch-btn" @click="prevIssue">
             <text class="arrow">◀</text>
           </view>
           <view class="issue-info-center">
             <text class="issue-current-text">{{ currentIssueTitle }}</text>
             <text class="issue-status-badge">进行中</text>
           </view>
           <view class="issue-switch-btn" @click="nextIssue">
             <text class="arrow">▶</text>
           </view>
        </view>
        
        <view class="issue-block-tip" v-if="!isOrderAllowed">
          <text class="issue-block-text">{{ orderBlockedReason }}</text>
        </view>

        <!-- 选号组件 -->
        <view class="selector-body" v-if="activityId && currentIssueId">
          <YifanSelector 
            :activity-id="activityId" 
            :issue-id="currentIssueId" 
            :price-per-draw="Number(detail.price_draw || 0) / 100"
            :disabled="!isOrderAllowed"
            :disabled-text="orderBlockedReason"
            @payment-success="onPaymentSuccess"
          />
        </view>
      </view>

      <!-- 底部垫高 -->
      <view style="height: 180rpx;"></view>
    </scroll-view>

  </view>
  
  <!-- 翻牌弹窗 -->
  <view v-if="showFlip" class="flip-overlay" @touchmove.stop.prevent>
    <view class="flip-mask" @tap="closeFlip"></view>
    <view class="flip-content" @tap.stop>
      <FlipGrid ref="flipRef" :rewards="currentIssueRewards" :controls="false" />
      <button class="overlay-close" @tap="closeFlip">关闭</button>
    </view>
  </view>

  <view v-if="rewardsVisible" class="rewards-overlay" @touchmove.stop.prevent>
    <view class="rewards-mask" @tap="closeRewardsPopup"></view>
    <view class="rewards-panel" @tap.stop>
      <view class="rewards-header">
        <text class="rewards-title">{{ currentIssueTitle }} · 奖品与概率</text>
        <text class="rewards-close" @tap="closeRewardsPopup">×</text>
      </view>
      <scroll-view scroll-y class="rewards-list">
        <view v-for="(item, idx) in rewardsForPopup" :key="item.id || idx" class="rewards-item">
          <image class="rewards-thumb" :src="item.image" mode="aspectFill" />
          <view class="rewards-info">
            <view class="rewards-name-row">
              <text class="rewards-name">{{ item.title || '-' }}</text>
              <view class="rewards-tag" v-if="item.boss">BOSS</view>
            </view>
            <text class="rewards-percent">概率 {{ formatPercent(item.percent) }}</text>
          </view>
        </view>
        <view v-if="!rewardsForPopup.length" class="rewards-empty">暂无奖品数据</view>
      </scroll-view>
    </view>
  </view>
  
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import FlipGrid from '../../../components/FlipGrid.vue'
import YifanSelector from '@/components/YifanSelector.vue'
import { getActivityDetail, getActivityIssues, getActivityIssueRewards, getActivityWinRecords } from '../../../api/appUser'

const detail = ref({})
const issues = ref([])
const rewardsMap = ref({})
const currentIssueId = ref('')
const selectedIssueIndex = ref(0)
const showIssues = computed(() => (detail.value && detail.value.status !== 2))
const activityId = ref('')
const tabActive = ref('pool')
const winRecords = ref([])
const drawLoading = ref(false)
const points = ref(0)
const flipRef = ref(null)
const showFlip = ref(false)
const rewardsVisible = ref(false)
const currentIssueRewards = computed(() => (currentIssueId.value && rewardsMap.value[currentIssueId.value]) ? rewardsMap.value[currentIssueId.value] : [])
const currentIssueTitle = computed(() => {
  const arr = issues.value || []
  const cur = arr[selectedIssueIndex.value]
  const t = (cur && (cur.title || ('第' + (cur.no || '-') + '期'))) || '-'
  return t
})
// 当前期剩余数量
const currentIssueRemain = computed(() => {
  const arr = issues.value || []
  const cur = arr[selectedIssueIndex.value]
  return cur && cur.remain !== undefined ? cur.remain : ''
})

function formatDateTime(v) {
  const s = String(v || '').trim()
  if (!s) return ''
  const d = new Date(s)
  if (Number.isNaN(d.getTime())) return s
  const y = d.getFullYear()
  const m = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  const hh = String(d.getHours()).padStart(2, '0')
  const mm = String(d.getMinutes()).padStart(2, '0')
  const ss = String(d.getSeconds()).padStart(2, '0')
  return `${y}-${m}-${day} ${hh}:${mm}:${ss}`
}

const scheduledTimeText = computed(() => formatDateTime(detail.value && (detail.value.scheduled_time || detail.value.scheduledTime)))

function parseTimeMs(v) {
  if (v === undefined || v === null || v === '') return null
  if (typeof v === 'number') {
    if (!Number.isFinite(v)) return null
    return v < 1e12 ? v * 1000 : v
  }
  const s = String(v).trim()
  if (!s) return null
  const asNum = Number(s)
  if (Number.isFinite(asNum)) return asNum < 1e12 ? asNum * 1000 : asNum
  const d = new Date(s)
  if (Number.isNaN(d.getTime())) return null
  return d.getTime()
}

const nowMs = ref(Date.now())
let nowTimer = null
function startNowTicker() {
  stopNowTicker()
  nowMs.value = Date.now()
  nowTimer = setInterval(() => { nowMs.value = Date.now() }, 1000)
}
function stopNowTicker() {
  if (nowTimer) {
    clearInterval(nowTimer)
    nowTimer = null
  }
}

const scheduledTimeMs = computed(() => parseTimeMs(detail.value && (detail.value.scheduled_time || detail.value.scheduledTime)))
const remainMs = computed(() => {
  const end = scheduledTimeMs.value
  if (!end) return null
  return end - nowMs.value
})
const isOrderAllowed = computed(() => {
  const ms = remainMs.value
  if (ms === null) return true
  return ms > 25000
})
const orderBlockedReason = computed(() => {
  const ms = remainMs.value
  if (ms === null) return ''
  if (ms <= 0) return '本期已结束，暂不可下单'
  if (ms <= 25000) return '距本期结束不足25秒，暂不可下单'
  return ''
})

const rewardsForPopup = computed(() => {
  const arr = currentIssueRewards.value || []
  return Array.isArray(arr) ? arr : []
})

function formatPercent(v) {
  const n = Number(v)
  if (!Number.isFinite(n)) return '0%'
  return `${n}%`
}

function openRewardsPopup() {
  rewardsVisible.value = true
}
function closeRewardsPopup() {
  rewardsVisible.value = false
}

// 显示规则
function showRules() {
  uni.showModal({
    title: '活动规则',
    content: detail.value.rules || '1. 选择号码进行抽选\n2. 每个号码对应一个奖品\n3. 已售号码不可再选\n4.未满足开赏条件，将自动为所有参与用户退款，款项将原路返回',
    showCancel: false
  })
}

// 跳转盒柜
function goCabinet() {
  uni.navigateTo({ url: '/pages/cabinet/index' })
}

function statusToText(s) {
  if (s === 1) return '进行中'
  if (s === 0) return '未开始'
  if (s === 2) return '已结束'
  return String(s || '')
}

const statusText = ref('')

async function fetchDetail(id) {
  const data = await getActivityDetail(id)
  detail.value = data || {}
  statusText.value = statusToText(detail.value.status)
  const title = String(detail.value.name || detail.value.title || '一番赏')
  try { uni.setNavigationBarTitle({ title }) } catch (_) {}
}

function unwrap(list) {
  if (Array.isArray(list)) return list
  const obj = list || {}
  const data = obj.data || {}
  const arr = obj.list || obj.items || data.list || data.items || data
  return Array.isArray(arr) ? arr : []
}

function normalizeIssues(list) {
  const arr = unwrap(list)
  return arr.map((i, idx) => ({
    id: i.id ?? String(idx),
    title: i.title ?? i.name ?? '',
    no: i.no ?? i.index ?? i.issue_no ?? i.issue_number ?? null,
    status_text: i.status_text ?? (i.status === 1 ? '进行中' : i.status === 0 ? '未开始' : i.status === 2 ? '已结束' : '')
  }))
}
function cleanUrl(u) {
  const s = String(u || '').trim()
  const m = s.match(/https?:\/\/[^\s'"`]+/)
  if (m && m[0]) return m[0]
  return s.replace(/[`'\"]/g, '').trim()
}

const coverUrl = computed(() => cleanUrl(detail.value && (detail.value.image || detail.value.banner || '')))
function truthy(v) {
  if (typeof v === 'boolean') return v
  const s = String(v || '').trim().toLowerCase()
  if (!s) return false
  return s === '1' || s === 'true' || s === 'yes' || s === 'y' || s === '是' || s === 'boss是真的' || s === 'boss' || s === '大boss'
}
function detectBoss(i) {
  return truthy(i.is_boss) || truthy(i.boss) || truthy(i.isBoss) || truthy(i.boss_true) || truthy(i.boss_is_true) || truthy(i.bossText) || truthy(i.tag)
}
function normalizeRewards(list) {
  const arr = unwrap(list)
  const items = arr.map((i, idx) => ({
    id: i.product_id ?? i.id ?? String(idx),
    title: i.name ?? i.title ?? '',
    image: cleanUrl(i.product_image ?? i.image ?? i.img ?? i.pic ?? i.banner ?? ''),
    weight: Number(i.weight) || 0,
    boss: detectBoss(i)
  }))
  const total = items.reduce((acc, it) => acc + (it.weight > 0 ? it.weight : 0), 0)
  const enriched = items.map(it => ({
    ...it,
    percent: total > 0 ? Math.round((it.weight / total) * 1000) / 10 : 0
  }))
  enriched.sort((a, b) => (b.percent - a.percent))
  return enriched
}
function normalizeWinRecords(list) {
  const arr = unwrap(list)
  return arr.map((i, idx) => ({
    id: i.id ?? i.record_id ?? i.product_id ?? String(idx),
    title: i.title ?? i.name ?? i.product_name ?? '',
    image: cleanUrl(i.image ?? i.img ?? i.pic ?? i.product_image ?? ''),
    count: Number(i.count ?? i.total ?? i.qty ?? 1) || 1,
    percent: i.percent !== undefined ? Math.round(Number(i.percent) * 10) / 10 : undefined
  }))
}
function isFresh(ts) {
  const now = Date.now()
  const v = Number(ts || 0)
  return now - v < 24 * 60 * 60 * 1000
}
function getRewardCache() {
  const obj = uni.getStorageSync('reward_cache_v1') || {}
  return typeof obj === 'object' && obj ? obj : {}
}
async function fetchRewardsForIssues(activityId) {
  const list = issues.value || []
  const cache = getRewardCache()
  const act = cache[activityId] || {}
  const toFetch = []
  list.forEach(it => {
    const c = act[it.id]
    if (c && isFresh(c.ts) && Array.isArray(c.value)) {
      rewardsMap.value = { ...(rewardsMap.value || {}), [it.id]: c.value }
    } else {
      toFetch.push(it)
    }
  })
  if (!toFetch.length) return
  const promises = toFetch.map(it => getActivityIssueRewards(activityId, it.id))
  const results = await Promise.allSettled(promises)
  const nextAct = { ...act }
  results.forEach((res, i) => {
    const issueId = toFetch[i] && toFetch[i].id
    if (!issueId) return
    const value = res.status === 'fulfilled' ? normalizeRewards(res.value) : []
    rewardsMap.value = { ...(rewardsMap.value || {}), [issueId]: value }
    nextAct[issueId] = { value, ts: Date.now() }
  })
  cache[activityId] = nextAct
  uni.setStorageSync('reward_cache_v1', cache)
}

async function fetchIssues(id) {
  const data = await getActivityIssues(id)
  issues.value = normalizeIssues(data)
  const latestId = pickLatestIssueId(issues.value)
  setSelectedById(latestId)
  await fetchRewardsForIssues(id)
}

async function fetchWinRecords(activityId) {
  try {
    const data = await getActivityWinRecords(activityId, 1, 50)
    winRecords.value = normalizeWinRecords(data)
  } catch (e) {
    winRecords.value = []
  }
}

function pickLatestIssueId(list) {
  const arr = Array.isArray(list) ? list : []
  let latest = arr[arr.length - 1] && arr[arr.length - 1].id
  let maxNo = -Infinity
  arr.forEach(i => {
    const n = Number(i.no)
    if (!Number.isNaN(n) && Number.isFinite(n) && n > maxNo) {
      maxNo = n
      latest = i.id
    }
  })
  return latest || (arr[0] && arr[0].id) || ''
}
function setSelectedById(id) {
  const arr = issues.value || []
  const idx = Math.max(0, arr.findIndex(x => x && x.id === id))
  selectedIssueIndex.value = idx
  const cur = arr[idx]
  currentIssueId.value = (cur && cur.id) || ''
}
function onIssueChange(e) {
  // deprecated picker
}
function prevIssue() {
  const arr = issues.value || []
  const idx = Math.max(0, Math.min(arr.length - 1, selectedIssueIndex.value - 1))
  selectedIssueIndex.value = idx
  const cur = arr[idx]
  currentIssueId.value = (cur && cur.id) || ''
}
function nextIssue() {
  const arr = issues.value || []
  const idx = Math.max(0, Math.min(arr.length - 1, selectedIssueIndex.value + 1))
  selectedIssueIndex.value = idx
  const cur = arr[idx]
  currentIssueId.value = (cur && cur.id) || ''
}



function onPreviewBanner() {
  const url = coverUrl.value || ''
  if (url) uni.previewImage({ urls: [url], current: url })
}


function onPaymentSuccess(payload) {
  console.log('Payment Success:', payload)
  
  const result = payload.result
  let wonItems = []
  
  // 尝试解析返回结果中的奖励列表
  if (Array.isArray(result)) {
      wonItems = result
  } else if (result && Array.isArray(result.list)) {
      wonItems = result.list
  } else if (result && Array.isArray(result.data)) {
      wonItems = result.data
  } else if (result && Array.isArray(result.rewards)) {
      wonItems = result.rewards
  } else {
      // 兜底：如果是单对象或无法识别，尝试作为单个物品处理
      wonItems = result ? [result] : []
  }

  const items = wonItems.map(data => {
      const title = String((data && (data.title || data.name || data.product_name || data.reward_name)) || '未知奖励')
      const image = String((data && (data.image || data.img || data.pic || data.product_image || data.reward_image)) || '')
      return { title, image }
  })

  showFlip.value = true
  try { if (flipRef.value && flipRef.value.reset) flipRef.value.reset() } catch (_) {}
  
  setTimeout(() => {
    if (flipRef.value && flipRef.value.revealResults) flipRef.value.revealResults(items)
  }, 100)
}

onLoad((opts) => {
  startNowTicker()
  const id = (opts && opts.id) || ''
  if (id) {
    activityId.value = id
    fetchDetail(id)
    fetchIssues(id)
    fetchWinRecords(id)
  }
})

function closeFlip() { showFlip.value = false }

onUnload(() => {
  stopNowTicker()
})
</script>

<style lang="scss" scoped>
/* ============================================
   一番赏页面 - 高级设计重构 (SCSS Integration)
   ============================================ */

.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(80px);
  opacity: 0.6;
}

.orb-1 {
  width: 600rpx;
  height: 600rpx;
  background: radial-gradient(circle, rgba($brand-primary, 0.2), transparent 70%);
  top: -200rpx;
  left: -200rpx;
  animation: float 10s ease-in-out infinite;
}

.orb-2 {
  width: 500rpx;
  height: 500rpx;
  background: radial-gradient(circle, rgba($accent-gold, 0.2), transparent 70%);
  bottom: 20%;
  right: -100rpx;
  animation: float 12s ease-in-out infinite reverse;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30rpx, 50rpx); }
}

/* 顶部背景 */
.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;
}

/* 头部卡片 */
.header-card {
  margin: $spacing-xl $spacing-lg;
  background: rgba($bg-card, 0.85);
  backdrop-filter: blur(24rpx);
  border-radius: $radius-xl;
  padding: $spacing-lg;
  display: flex;
  align-items: center;
  box-shadow: $shadow-card;
  border: 1rpx solid rgba(255, 255, 255, 0.6);
  position: relative;
  overflow: hidden;
  
  /* 光泽效果 */
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2rpx;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  }
}
.header-cover {
  width: 180rpx;
  height: 180rpx;
  border-radius: $radius-md;
  margin-right: $spacing-lg;
  background: $bg-secondary;
  box-shadow: $shadow-md;
  flex-shrink: 0;
}
.header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 180rpx;
  padding: 6rpx 0;
}
.header-title {
  font-size: $font-xl;
  font-weight: 800;
  color: $text-main;
  margin-bottom: $spacing-xs;
  line-height: 1.3;
  @include text-ellipsis(2);
}
.header-price-row {
  display: flex;
  align-items: baseline;
  color: $brand-primary;
  margin-bottom: $spacing-sm;
  text-shadow: 0 2rpx 4rpx rgba($brand-primary, 0.1);
}
.price-symbol { font-size: $font-md; font-weight: 700; }
.price-num { font-size: $font-xxl; font-weight: 900; margin: 0 4rpx; font-family: 'DIN Alternate', sans-serif; }
.price-unit { font-size: $font-sm; color: $text-sub; margin-left: 4rpx; }

.header-time-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: $spacing-sm;
}
.time-label {
  font-size: $font-xs;
  color: $text-tertiary;
  font-weight: 600;
}
.time-value {
  font-size: $font-sm;
  color: $text-sub;
  font-weight: 600;
}

.header-tags {
  display: flex;
  gap: $spacing-xs;
  flex-wrap: wrap;
}
.tag-item {
  font-size: $font-xs;
  color: $brand-primary-dark;
  background: rgba($brand-primary, 0.08);
  padding: 4rpx $spacing-sm;
  border-radius: $radius-sm;
  font-weight: 600;
  border: 1rpx solid rgba($brand-primary, 0.1);
}

.header-actions {
  display: flex;
  flex-direction: column;
  gap: $spacing-lg;
  margin-left: 20rpx;
  padding-left: $spacing-lg;
  border-left: 1rpx solid rgba(0,0,0,0.06);
  justify-content: center;
  height: 140rpx;
}
.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: $font-xs;
  color: $text-sub;
  transition: all 0.2s;
  
  &:active {
    transform: scale(0.9);
    color: $text-main;
  }
}
.action-btn .icon {
  font-size: $font-xl;
  margin-bottom: 6rpx;
  filter: grayscale(0.2);
}

/* 通用板块容器 */
.section-container {
  margin: 0 $spacing-lg $spacing-lg;
  background: rgba(255, 255, 255, 0.9); /* 略微透明 */
  border-radius: $radius-xl;
  padding: $spacing-lg;
  box-shadow: $shadow-sm;
  backdrop-filter: blur(10rpx);
}

/* 板块标题 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  padding: 0 4rpx;
}
.section-title {
  font-size: $font-lg;
  font-weight: 800;
  color: $text-main;
  position: relative;
  padding-left: $spacing-lg;
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8rpx;
    height: 28rpx;
    background: $gradient-brand;
    border-radius: 4rpx;
  }
}
.section-more {
  font-size: $font-sm;
  color: $text-tertiary;
  display: flex;
  align-items: center;
  
  &::after {
    content: '>';
    font-family: monospace;
    margin-left: 6rpx;
    font-weight: 700;
  }
}

/* 奖品概览 */
.preview-scroll {
  white-space: nowrap;
  margin: 0 -$spacing-lg; /* 负边距抵消padding */
  padding: 0 $spacing-lg;
  width: calc(100% + 40rpx);
}
.preview-item {
  display: inline-block;
  width: 200rpx;
  margin-right: $spacing-lg;
  vertical-align: top;
  position: relative;
  transition: transform 0.2s;
  
  &:active {
    transform: scale(0.96);
  }
  
  &:last-child {
    margin-right: 40rpx;
  }
}
.preview-img {
  width: 200rpx;
  height: 200rpx;
  border-radius: $radius-lg;
  background: $bg-secondary;
  margin-bottom: $spacing-md;
  box-shadow: $shadow-sm;
  border: 1rpx solid rgba(0,0,0,0.03);
}
.preview-name {
  font-size: $font-sm;
  color: $text-secondary;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-weight: 500;
}
.prize-tag {
  position: absolute;
  top: 10rpx;
  left: 10rpx;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: $font-xs;
  padding: 4rpx $spacing-sm;
  border-radius: $radius-sm;
  z-index: 10;
  font-weight: 700;
  backdrop-filter: blur(4rpx);
  transform: scale(0.9);
  transform-origin: top left;
}
.prize-tag.tag-boss {
  background: $gradient-brand;
  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.4);
}

/* 选号区容器 */
.selector-container {
  min-height: 800rpx;
  display: flex;
  flex-direction: column;
  background: rgba($bg-card, 0.95);
  backdrop-filter: blur(20rpx);
}

/* 期号头部 */
.issue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
  background: $bg-grey;
  border-radius: $radius-round; /* 胶囊形 */
  padding: 10rpx;
  border: 1rpx solid $border-color-light;
}
.issue-switch-btn {
  width: 72rpx;
  height: 72rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $bg-card;
  border-radius: 50%;
  box-shadow: $shadow-sm;
  transition: all 0.2s;
  color: $text-secondary;
  
  &:active {
    transform: scale(0.9);
    background: $bg-secondary;
    color: $brand-primary;
  }
}
.arrow {
  font-size: $font-sm;
  font-weight: 800;
}
.issue-info-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.issue-current-text {
  font-size: $font-lg;
  font-weight: 700;
  color: $text-main;
}
.issue-status-badge {
  font-size: $font-xs;
  color: $uni-color-success;
  background: rgba($uni-color-success, 0.1);
  padding: 2rpx $spacing-md;
  border-radius: $radius-round;
  margin-top: 4rpx;
  font-weight: 600;
}

.issue-block-tip {
  margin: -10rpx 0 20rpx;
  padding: 16rpx 20rpx;
  border-radius: $radius-md;
  background: rgba($uni-color-warning, 0.08);
  border: 1rpx solid rgba($uni-color-warning, 0.25);
}
.issue-block-text {
  color: $uni-color-warning;
  font-size: $font-sm;
  font-weight: 600;
}

.selector-body {
  flex: 1;
}

/* 翻牌弹窗 */
.flip-overlay { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 10000; }
.flip-mask { 
  position: absolute; left: 0; right: 0; top: 0; bottom: 0; 
  background: rgba(0,0,0,0.75); 
  backdrop-filter: blur(10rpx);
  z-index: 1; 
  animation: fadeIn 0.3s ease-out;
}
.flip-content { 
  position: relative; display: flex; flex-direction: column; height: 100%; padding: 40rpx; z-index: 2;
  animation: scaleIn 0.3s ease-out; 
}
.overlay-close { 
  background: rgba(255,255,255,0.2) !important; 
  color: #FFFFFF !important; 
  border-radius: 999rpx; 
  align-self: center; 
  margin-top: 40rpx;
  font-weight: 600; 
  border: 1rpx solid rgba(255,255,255,0.3);
  padding: 10rpx 60rpx;
  font-size: 30rpx;
  backdrop-filter: blur(10rpx);
  
  &:active {
    background: rgba(255,255,255,0.3) !important; 
  }
}

/* 动画定义 */
.animate-enter {
  animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.rewards-overlay { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 9000; }
.rewards-mask {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10rpx);
}
.rewards-panel {
  position: absolute;
  left: $spacing-lg;
  right: $spacing-lg;
  bottom: calc(env(safe-area-inset-bottom) + 24rpx);
  max-height: 70vh;
  background: rgba($bg-card, 0.95);
  border-radius: $radius-xl;
  box-shadow: $shadow-card;
  border: 1rpx solid rgba(255,255,255,0.5);
  overflow: hidden;
  animation: slideUp 0.25s ease-out;
}
.rewards-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $spacing-lg;
  border-bottom: 1rpx solid rgba(0,0,0,0.06);
}
.rewards-title {
  font-size: $font-md;
  font-weight: 800;
  color: $text-main;
}
.rewards-close {
  font-size: 48rpx;
  line-height: 1;
  color: $text-tertiary;
  padding: 0 10rpx;
}
.rewards-list {
  max-height: 60vh;
  padding: $spacing-lg;
}
.rewards-item {
  display: flex;
  align-items: center;
  padding: $spacing-md;
  border-radius: $radius-lg;
  background: rgba(255,255,255,0.75);
  border: 1rpx solid rgba(0,0,0,0.03);
  box-shadow: $shadow-xs;
  margin-bottom: $spacing-md;
}
.rewards-thumb {
  width: 96rpx;
  height: 96rpx;
  border-radius: $radius-md;
  background: $bg-secondary;
  flex-shrink: 0;
  margin-right: $spacing-md;
}
.rewards-info { flex: 1; min-width: 0; }
.rewards-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: $spacing-sm;
  margin-bottom: 8rpx;
}
.rewards-name {
  font-size: $font-md;
  font-weight: 700;
  color: $text-main;
  @include text-ellipsis(1);
}
.rewards-tag {
  font-size: $font-xs;
  font-weight: 800;
  color: #fff;
  background: $gradient-brand;
  border-radius: $radius-sm;
  padding: 4rpx 10rpx;
  flex-shrink: 0;
}
.rewards-percent {
  font-size: $font-sm;
  color: $text-sub;
  font-weight: 600;
}
.rewards-empty {
  padding: 60rpx 0 20rpx;
  text-align: center;
  color: $text-tertiary;
  font-size: $font-sm;
}
</style>
