<wxs src="../common/utils.wxs" module="_" />

<view
  style="{{_._style([style, customStyle, 'height:' + itemHeight * visibleItemCount + 'px'])}}"
  class="{{_.cls(classPrefix + '__group', [])}} class {{prefix}}-class"
  bind:touchstart="onTouchStart"
  catch:touchmove="onTouchMove"
  bind:touchend="onTouchEnd"
  bind:touchcancel="onTouchEnd"
>
  <view
    class="{{classPrefix}}__wrapper"
    style="transition: transform {{ duration }}ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, {{ offset }}px, 0); padding: {{ wrapperPaddingY }}px 0"
  >
    <!-- 虚拟滚动：占位容器（撑开总高度） -->
    <view wx:if="{{enableVirtualScroll}}" style="height: {{totalHeight}}px; position: relative;">
      <!-- 可见区域（绝对定位） -->
      <view style="position: absolute; top: {{virtualOffsetY}}px; left: 0; right: 0;">
        <view
          class="{{_.cls(classPrefix + '__item', [['active', curIndex == (virtualStartIndex + index)]])}}"
          style="height: {{itemHeight}}px"
          wx:for="{{visibleOptions}}"
          wx:key="value"
          wx:for-item="option"
          data-index="{{ virtualStartIndex + index }}"
          bind:tap="onClickItem"
        >
          <t-icon wx:if="{{option[keys.icon]}}" class="{{classPrefix}}__item-icon" name="{{option[keys.icon]}}" />
          <text class="{{classPrefix}}__item-label">{{option[keys.label]}}</text>
          <slot wx:if="{{useSlots}}" name="label-suffix--{{virtualStartIndex + index}}"></slot>
        </view>
      </view>
    </view>

    <!-- 非虚拟滚动：原有实现 -->
    <block wx:else>
      <view
        class="{{_.cls(classPrefix + '__item', [['active', curIndex == index]])}}"
        style="height: {{itemHeight}}px"
        wx:for="{{visibleOptions}}"
        wx:key="value"
        wx:for-item="option"
        data-index="{{ index }}"
        bind:tap="onClickItem"
      >
        <t-icon wx:if="{{option[keys.icon]}}" class="{{classPrefix}}__item-icon" name="{{option[keys.icon]}}" />
        <text class="{{classPrefix}}__item-label">{{option[keys.label]}}</text>
        <slot wx:if="{{useSlots}}" name="label-suffix--{{index}}"></slot>
      </view>
    </block>
  </view>
</view>
