<wxs src="../wxs/utils.wxs" module="utils" />
<wxs src="./index.wxs" module="computed" />

<view class="{{ utils.bem('tabs--') + type }} {{ utils.bem('tabs__wrap', { scrollable }) }} {{ type === 'line' && border ? 'aio-hairline--top-bottom' : '' }} wrap-class">
  <slot name="nav-left" />

  <scroll-view
    scroll-x="{{ scrollable }}"
    scroll-with-animation="{{ scrollWithAnimation }}"
    scroll-left="{{ scrollLeft }}"
    class="{{ utils.bem('tabs__scroll', [type]) }} scroll-class"
    style="{{ color ? 'border-color:' + color : '' }}"
  >
    <view class="{{ utils.bem('tabs__nav', [type, { complete: !ellipsis }]) }} nav-class" style="{{ computed.navStyle(color, type) }}">
      <view wx:if="{{ type === 'line' }}" class="aio-tabs__line line-class" style="{{ computed.lineStyle({ color, lineOffsetLeft, lineHeight, skipTransition, duration, inited }) }};width: {{lineWidth}}px;" />
      <view
        wx:for="{{ tabs }}"
        wx:key="index"
        data-index="{{ index }}"
        class="{{ computed.tabClass(index === currentIndex, ellipsis, scrollable, average) }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }) }}"
        style="{{ computed.tabStyle({ active: index === currentIndex, ellipsis, color, type, disabled: item.disabled, titleActiveColor, titleInactiveColor, swipeThreshold, scrollable }) }}"
        bind:tap="onTap"
      >
        <view class="{{ ellipsis ? 'aio-ellipsis' : '' }}" style="{{ item.titleStyle }}">
          {{ item.title }}
        </view>
      </view>
    </view>
  </scroll-view>

  <slot name="nav-right" />
</view>

<view
    class="aio-tabs__content"
    bind:touchstart="onTouchStart"
    bind:touchmove="onTouchMove"
    bind:touchend="onTouchEnd"
    bind:touchcancel="onTouchEnd"
  >
    <view
      class="{{ utils.bem('tabs__track', [{ animated }]) }} aio-tabs__track"
      style="{{ computed.trackStyle({ duration, currentIndex, animated }) }}"
    >
      <slot />
    </view>
</view>