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

	<view class="mc-class {{ utils.bem('tabs', [type]) }}">
		<mc-sticky disabled="{{ !sticky }}" z-index="{{ zIndex }}" offset-top="{{ offsetTop }}" container="{{ container }}" bind:scroll="onTouchScroll">
			<view class="{{ utils.bem('tabs__wrap', { scrollable }) }} {{ type === 'line' && border ? 'mc-hairline__top-bottom' : '' }}">
				<slot name="nav-left"/>

				<scroll-view scroll-x="{{ scrollable }}" scroll-with-animation scroll-left="{{ scrollLeft }}" class="{{ utils.bem('tabs__scroll', [type]) }}" style="{{ color ? 'border-color: ' + color : '' }}">
					<view class="{{ utils.bem('tabs__nav', [type]) }} nav-class">
						<view wx:if="{{ type === 'line' }}" class="mc-tabs__line" style="{{ lineStyle }}"/>
						<view wx:for="{{ tabs }}" wx:key="index" data-index="{{ index }}" class="{{ getters.tabClass(index === currentIndex, ellipsis) }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }) }}" style="{{ getters.tabStyle(index === currentIndex, ellipsis, color, type, item.disabled, titleActiveColor, titleInactiveColor, swipeThreshold, scrollable) }}; {{ item.tabStyle || '' }}" bind:tap="onTap">
							<view class="{{ ellipsis ? 'mc-ellipsis' : '' }}" style="{{ item.titleStyle }}">
								{{ item.title }}
								<view wx:if="{{ item.info !== undefined && item.info !== null }}" class="mc-tabs__info">{{ item.info }}</view>
								<view wx:elif="{{ item.dot }}" class="mc-tabs__dot"></view>
							</view>
						</view>
					</view>
				</scroll-view>

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

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