<wxs src="./index.wxs" module="this" />
<wxs src="../common/utils.wxs" module="_" />

<import src="../common/template/image.wxml" />

<view class="{{prefix}}-class {{classPrefix}}" style="{{_._style([style, customStyle])}}">
  <swiper
    class="{{classPrefix}}-host"
    autoplay="{{autoplay}}"
    current="{{current}}"
    interval="{{interval}}"
    duration="{{duration}}"
    circular="{{loop}}"
    vertical="{{direction == 'vertical'}}"
    easing-function="{{easingFunction}}"
    previous-margin="{{previousMargin}}"
    next-margin="{{nextMargin}}"
    snap-to-edge="{{snapToEdge}}"
    display-multiple-items="{{displayMultipleItems}}"
    style="height: {{_.addUnit(height)}}"
    bindchange="onChange"
  >
    <swiper-item
      wx:for="{{list}}"
      wx:key="index"
      class="{{_.cls(classPrefix + '__item', [['preview', this.isPrev(current, index, list)], ['next', this.isNext(current, index, list)]])}}"
      data-index="{{index}}"
      bind:tap="onTap"
    >
      <template
        is="image"
        data="{{ class: classPrefix + '__image-host', tClass: this.getImageClass(prefix, current, index, list), style: 'height: ' + _.addUnit(height), src: item, ...imageProps }}"
      />
    </swiper-item>
  </swiper>
  <t-swiper-nav
    wx:if="{{navigation}}"
    t-class="{{prefix}}-class-nav"
    type="{{navigation.type || 'dots'}}"
    current="{{navCurrent || 0}}"
    total="{{list.length || 0}}"
    direction="{{direction || 'horizontal'}}"
    pagination-position="{{paginationPosition || 'bottom'}}"
    min-show-num="{{navigation.minShowNum || 2}}"
    show-controls="{{navigation.showControls || false}}"
    bind:navBtnChange="onNavBtnChange"
  />
  <slot name="nav" />
</view>
