<import-sjs name="util" from="./util.sjs"/>
<view class="am-tabs {{className}}">
  <view class="am-tabs-tab-bar-wrap">
    <view class="am-tabs-bar">
      <view class="am-tabs-bar-content-wrap">
        <view class="am-tabs-scroll-left"></view>
        <view class="am-tabs-scroll-right"></view>
        <scroll-view
          scroll-left="{{util.calcScrollLeft(windowWidth, tabWidth, activeTab)}}"
          scroll-x="{{true}}"
          scroll-with-animation="{{animation}}"
          class="am-tabs-bar-content">
          <block a:for="{{tabs}}">
            <view
              data-index="{{index}}"
              key="tabs-item-{{index}}"
              onTap="handleTabClick"
              style="{{
                backgroundColor: tabBarBackgroundColor,
                color: index === activeTab ? tabBarActiveTextColor: tabBarInactiveTextColor,
                width: (tabs.length > 3 ? 0.25 : 1 / tabs.length) * 100 + '%',
              }}"
              class="am-tabs-bar-tab">
              <view class="am-tabs-bar-title" style="{{ borderBottomColor: index === activeTab ? tabBarUnderlineColor : '' }}">
                {{item.title}}
                <view a:if="{{item.badgeType}}" class="am-tabs-bar-badge {{item.badgeType}}">
                  {{item.badgeType === 'text' && item.badgeText ? item.badgeText.substr(0, 1) : ''}}
                </view>
              </view>
            </view>
          </block>
        </scroll-view>
      </view>
      <view class="am-tabs-plus-wrap {{showPlus ? 'show' : ''}}">
        <view class="am-tabs-plus" onTap="handlePlusClick"></view>
      </view>
    </view>
    <block a:if="{{swipeable}}">
      <swiper
        circular="{{false}}"
        current="{{activeTab}}"
        interval="99999999"
        autoplay="{{autoplay}}"
        onChange="handleSwiperChange"
        class="am-tabs-content-wrap {{util.compareVersion(version) < 0 ? 'fix' : ''}}">
        <slot></slot>
      </swiper>
    </block>
    <block a:else>
      <view class="am-tabs-content-wrap {{util.compareVersion(version) >= 0 ? 'fix' : ''}}">
        <view class="am-tabs-slides" style="{{ transform: 'translate3d(' +(-activeTab * 100) + 'vw, 0, 0)' }}">
          <slot></slot>
        </view>
      </view>
    </view>
  </block>
</view>
