<view
  a:if="{{direction !== 'vertical'}}"
  class="ant-tabs {{className ? className : ''}}"
  style="{{style}}"
>
  <view class="ant-tabs-bar {{type === 'basic' ? 'ant-tabs-bar-underline' : ''}} {{tabsBarClassName ? tabsBarClassName : ''}}">
    <view class="ant-tabs-bar-plus">
      <slot name="plus"></slot>
    </view>
    <view
      class="ant-tabs-bar-fade ant-tabs-bar-fade-left"
      style="opacity: {{leftFade ? '1' : '0'}}"
    ></view>
    <view
      class="ant-tabs-bar-fade ant-tabs-bar-fade-right"
      style="opacity: {{rightFade ? '1' : '0'}}"
    ></view>
    <scroll-view
      class="ant-tabs-bar-scroll-view"
      id="ant-tabs-bar-scroll-view{{$id ? '-' + $id : ''}}"
      onScroll="onScroll"
      scrollLeft="{{scrollLeft}}"
      scrollX="{{true}}"
      scrollWithAnimation="{{true}}"
      scrollAnimationDuration="{{300}}"
    >
      <view></view>
      <block
        a:for="{{items}}"
        a:for-index="index"
        a:for-item="item"
      >
        <view
          id="ant-tabs-bar-item{{$id ? '-' + $id : ''}}-{{index}}"
          class="ant-tabs-bar-wrap ant-tabs-bar-wrap-{{type}} {{tabsBarClassName ? tabsBarClassName : ''}}"
        >
          <view
            a:if="{{type === 'basic'}}"
            class="ant-tabs-bar-item ant-tabs-bar-basic {{tabClassName ? tabClassName : ''}} {{mixin.value === index && !item.disabled ? 'ant-tabs-bar-active' : ''}} {{item.disabled ? 'ant-tabs-bar-disabled' : ''}} {{mixin.value === index && !item.disabled && tabActiveClassName ? tabActiveClassName : ''}}"
            onTap="onChange"
            data-index="{{index}}"
          >
            <view class="ant-tabs-bar-basic-title">
              <slot
                name="title"
                value="{{item}}"
                index="{{index}}"
              >
                {{item.title}}
              </slot>
            </view>
          </view>
          <view
            a:elif="{{type === 'capsule'}}"
            class="ant-tabs-bar-item ant-tabs-bar-capsule {{tabClassName ? tabClassName : ''}} {{mixin.value === index && !item.disabled ? 'ant-tabs-bar-active' : ''}} {{item.disabled ? 'ant-tabs-bar-disabled' : ''}} {{mixin.value === index && !item.disabled && tabActiveClassName ? tabActiveClassName : ''}}"
            onTap="onChange"
            data-index="{{index}}"
          >
            <view class="ant-tabs-bar-capsule-title">
              <slot
                name="title"
                value="{{item}}"
                index="{{index}}"
              >
                {{item.title}}
              </slot>
            </view>
          </view>
          <view
            a:else
            class="ant-tabs-bar-item ant-tabs-bar-mixin {{tabClassName ? tabClassName : ''}} {{mixin.value === index && !item.disabled ? 'ant-tabs-bar-active' : ''}} {{item.disabled ? 'ant-tabs-bar-disabled' : ''}} {{mixin.value === index && !item.disabled && tabActiveClassName ? tabActiveClassName : ''}}"
            onTap="onChange"
            data-index="{{index}}"
          >
            <view class="ant-tabs-bar-mixin-title">
              <slot
                name="title"
                value="{{item}}"
                index="{{index}}"
              >
                {{item.title}}
              </slot>
            </view>
            <view class="ant-tabs-bar-mixin-subtitle">
              <slot
                name="subTitle"
                value="{{item}}"
                index="{{index}}"
              >
                {{item.subTitle}}
              </slot>
            </view>
          </view>
        </view>
      </block>
      <view></view>
    </scroll-view>
  </view>
  <view class="ant-tabs-content">
    <slot
      value="{{items[mixin.value]}}"
      index="{{mixin.value}}"
    ></slot>
  </view>
</view>
<view
  a:else
  class="ant-vtabs {{className ? className : ''}}"
  style="{{style}}"
>
  <view class="ant-vtabs-bar {{tabsBarClassName ? tabsBarClassName : ''}}">
    <scroll-view
      class="ant-vtabs-bar-scroll-view"
      id="ant-tabs-bar-scroll-view{{$id ? '-' + $id : ''}}"
      onScroll="onScroll"
      scrollTop="{{scrollTop}}"
      scrollY="{{true}}"
      scrollWithAnimation="{{true}}"
      scrollAnimationDuration="{{300}}"
    >
      <view class="ant-vtabs-bar-item-wrap">
        <block
          a:for="{{items}}"
          a:for-index="index"
          a:for-item="item"
        >
          <view
            id="ant-tabs-bar-item{{$id ? '-' + $id : ''}}-{{index}}"
            class="ant-vtabs-bar-item {{tabClassName ? tabClassName : ''}} {{mixin.value === index && !item.disabled ? 'ant-vtabs-bar-item-active' : ''}} {{item.disabled ? 'ant-vtabs-bar-item-disabled' : ''}} {{mixin.value === index && !item.disabled && tabActiveClassName ? tabActiveClassName : ''}}"
            style="{{mixin.value + 1 === index ? 'border-radius: 0 16rpx 0 0' : ''}};{{mixin.value - 1 === index ? 'border-radius: 0 0 16rpx 0' : ''}}"
            onTap="onChange"
            data-index="{{index}}"
          >
            <!--display: inline-->
            <text class="ant-vtabs-bar-item-title">
              <slot
                name="title"
                value="{{item}}"
                index="{{index}}"
              >
                {{item.title}}
              </slot>
            </text>
          </view>
        </block>
      </view>
    </scroll-view>
  </view>
  <view class="ant-vtabs-content">
    <slot
      value="{{items[mixin.value]}}"
      index="{{mixin.value}}"
    >
      {{items[mixin.value].content}}
    </slot>
  </view>
</view>