<template>
  <view class="theme-banner">
    <!-- 背景图 - 使用懒加载 -->
    <image 
      v-if="bannerImage" 
      :src="bannerImage" 
      class="banner-bg" 
      mode="aspectFill"
      :lazy-load="true"
    />
    
    <!-- 内容层 -->
    <view class="banner-content">
      
      <!-- 上半部分：标题区域 -->
      <view class="title-section">
        
        <view class="subtitle-row">
          <text class="subtitle-text">{{'「'+ title +'」' }}</text>
          
          <!-- 如果确实需要过时数据警告，可以保留，否则可隐藏 -->
          <view v-if="isStaleData" class="stale-indicator">
            <text class="stale-icon">⚠</text>
            <text class="stale-text">数据可能已过时</text>
          </view>
        </view>
      </view>

      <!-- 下半部分：右下角数字 -->
      <view class="footer-section">
        <text class="progress-text">{{ formattedCurrent }} / {{ formattedTarget }}</text>
      </view>
      
    </view>
  </view>
</template>

<script setup>
import { computed, ref, watch } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: 'TOPFANS'
  },
  bannerImage: {
    type: String,
    default: ''
  },
  current: {
    type: Number,
    default: 19901123
  },
  target: {
    type: Number,
    default: 19911005
  },
  isStaleData: {
    type: Boolean,
    default: false
  }
})

// 使用 ref 缓存格式化结果，手动控制更新频率
const formattedCurrent = ref(props.current.toLocaleString())
const formattedTarget = ref(props.target.toLocaleString())

// 使用 watch 手动控制更新，避免频繁调用 toLocaleString
watch(() => props.current, (newVal) => {
  formattedCurrent.value = newVal.toLocaleString()
}, { immediate: false })

watch(() => props.target, (newVal) => {
  formattedTarget.value = newVal.toLocaleString()
}, { immediate: false })

const progressPercent = computed(() => {
  if (props.target === 0) return 0
  return Math.min((props.current / props.target) * 100, 100)
})
</script>

<style scoped>
.theme-banner {
  width: 98%;
  height: 328rpx;
  position: relative;
  top: 240rpx;
  overflow: hidden;
  /* 性能优化：启用硬件加速 */
  transform: translateZ(0);
  will-change: transform;
}

.banner-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 32rpx;
  /* 性能优化：图片渲染优化 */
  image-rendering: -webkit-optimize-contrast;
}

.banner-content {
  position: relative;
  z-index: 1;
  padding: 8rpx 16rpx 16rpx 8rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  box-sizing: border-box;
}

.title-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.main-title {
  font-size: 64rpx;
  font-weight: 900;
  color: #fff;
  text-shadow: 
    0 0 10rpx rgba(255, 255, 255, 0.8),
    0 4rpx 8rpx rgba(0, 0, 0, 0.5);
  line-height: 1.2;
  margin-bottom: 10rpx;
  letter-spacing: 2rpx;
}

.subtitle-row {
  display: flex;
  align-items: center;
}

.subtitle-text {
  font-size: 32rpx;
  color: #fff;
  margin-left: 32rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
  font-family: 'ZaoZiGongFangJianHei-1';
}

.stale-indicator {
  display: flex;
  align-items: center;
  background: rgba(255, 152, 0, 0.9);
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  margin-left: 20rpx;
  transform: scale(0.8);
}

.stale-icon {
  font-size: 20rpx;
  color: #fff;
  margin-right: 4rpx;
}

.stale-text {
  font-size: 18rpx;
  color: #fff;
  white-space: nowrap;
}

.footer-section {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.progress-text {
  font-size: 32rpx;
  color: #fff;
  text-shadow: 0 0 8rpx rgba(255, 255, 255, 0.6);
  font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
}

.progress-bar {
  display: none;
}
</style>