<import-sjs
  name="util"
  from="./util.sjs"
/>
<view class="am-tabs {{className}}">
  <view class="am-tabs-tab-bar-wrap">
    <view class="am-tabs-bar {{tabBarWrapperCls}}">
      <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, tabScrollPercentage, 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,
                fontSize: index === activeTab ? activeTabTextSize : inactiveTabTextSize,
              }}"
              class="am-tabs-bar-tab {{tabBarCls}}"
            >
              <view
                class="am-tabs-bar-title {{ index === activeTab ? activeCls : '' }}"
                style="{{ borderBottomColor: index === activeTab ? tabBarUnderlineColor : '' }}"
              >
                <text>{{item.title}}</text>
                <!-- <badge
                  className="am-tabs-bar-badge {{item.badgeType ? item.badgeType : ''}}"
                  a:if="{{item.badgeType}}"
                  dot="{{item.badgeType == 'dot'}}"
                  text="{{item.badgeText}}" /> -->
              </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}}"
        duration="{{duration}}"
        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>
    </block>
  </view>
</view>