<!-- perf-progress-bar 组件
  Props:
    filledPct       : number   进度条填充百分比 0~100
    clampedSparkPct : number   火星位置 0~100，夹紧在进度末端
    currentTier     : number   当前档位 0~5，控制刻度高亮
    ticks           : Array<{value: number, label: string, left: string}> 刻度数组（接口传入）
    shineRunning    : boolean  高光单次播放触发
    sparkRunning    : boolean  火花单次播放触发
    shineDurMs      : number   高光动画时长（毫秒）
    sparkDurMs      : number   火花动画时长（毫秒）
-->
<view class="ppb-wrap">
  <!-- 进度条轨道 -->
  <view class="ppb-track">
    <!-- 底轨背景 -->
    <view class="ppb-track-bg"></view>

    <!-- 渐变填充条 -->
    <view
      class="ppb-fill"
      style="width: {{filledPct}}%"
      wx:if="{{filledPct > 0}}"
    >
      <!-- 全宽渐变层 -->
      <view class="ppb-gradient-bar"></view>
      <!-- 高光 -->
      <view
        class="ppb-shine {{shineRunning ? 'ppb-shine--active' : ''}}"
        style="animation-duration: {{shineDurMs}}ms"
      ></view>
    </view>

    <!-- 分隔竖线：由 ticks 数组动态渲染，跳过第一个（0）和最后一个 -->
    <view
      wx:for="{{ticks}}"
      wx:key="value"
      wx:if="{{index > 0 && index < ticks.length - 1}}"
      class="ppb-divider"
      style="left: {{item.left}}"
    ></view>

    <!-- 导火索火星 -->
    <view
      class="ppb-edge-glow {{sparkRunning ? 'ppb-edge-glow--active' : ''}}"
      style="left: {{clampedSparkPct}}%; animation-duration: {{sparkDurMs}}ms"
    >
      <view class="ppb-spark ppb-spark-1 {{sparkRunning ? 'ppb-spark--active' : ''}}" style="animation-duration: {{sparkDurMs}}ms"></view>
      <view class="ppb-spark ppb-spark-2 {{sparkRunning ? 'ppb-spark--active' : ''}}" style="animation-duration: {{sparkDurMs}}ms"></view>
      <view class="ppb-spark ppb-spark-3 {{sparkRunning ? 'ppb-spark--active' : ''}}" style="animation-duration: {{sparkDurMs}}ms"></view>
      <view class="ppb-spark ppb-spark-4 {{sparkRunning ? 'ppb-spark--active' : ''}}" style="animation-duration: {{sparkDurMs}}ms"></view>
      <view class="ppb-spark ppb-spark-5 {{sparkRunning ? 'ppb-spark--active' : ''}}" style="animation-duration: {{sparkDurMs}}ms"></view>
      <view class="ppb-spark ppb-spark-6 {{sparkRunning ? 'ppb-spark--active' : ''}}" style="animation-duration: {{sparkDurMs}}ms"></view>
    </view>
  </view>

  <!-- 刻度 -->
  <view class="ppb-ticks">
    <text
      wx:for="{{ticks}}"
      wx:key="value"
      class="ppb-tick {{currentTier >= index ? 'ppb-tick--done' : ''}} {{item.highlight ? 'ppb-tick--highlight' : ''}}"
      style="{{index === 0 ? 'left:0' : index === ticks.length-1 ? 'right:0' : 'left:' + item.left + ';transform:translateX(-50%)'}}" 
    >{{item.label}}</text>
  </view>
</view>
