<wxs module="utils" src="../wxs/utils.wxs" />
<wxs module="computed">
  var utils = require('../wxs/utils.wxs')
  function lineStyle(data) {
    return utils.style({
      width: utils.addUnit(data.width, 'rpx'),
      transform: 'translateX(' + utils.addUnit(data.current * data.width, 'rpx') + ')',
      'background-color': data.color
    })
  }
  module.exports = {
    lineStyle: lineStyle
  };
</wxs>

<view class="aio-swiper-indicator">
  <view
    class="aio-swiper-indicator__wrapper aio-swiper-indicator__wrapper--{{indicatorMode}} aio-class"
    wx:if="{{ indicatorMode === 'line' }}"
    style="width: {{ utils.addUnit(lineWidth * length, 'rpx') }};background-color: {{ indicatorInactiveColor }}"
  >
    <view class="aio-swiper-indicator__wrapper--line__bar" style="{{ computed.lineStyle({ width: lineWidth, current, color: indicatorActiveColor }) }}"></view>
  </view>
  <view
    class="aio-swiper-indicator__wrapper aio-class"
    wx:if="{{ indicatorMode === 'dot' }}"
  >
    <view
      wx:for="{{ length }}"
      wx:key="index"
      class="aio-swiper-indicator__wrapper__dot {{ index === current ? 'aio-swiper-indicator__wrapper__dot--active' : '' }}"
      style="background-color: {{ index === current ? indicatorActiveColor : indicatorInactiveColor }}"
    ></view>
  </view>
  <view
    class="aio-swiper-indicator__wrapper aio-class"
    wx:if="{{ indicatorMode === 'dashed' }}"
  >
    <view
      wx:for="{{ length }}"
      wx:key="index"
      class="aio-swiper-indicator__wrapper__dashed {{ index === current ? 'aio-swiper-indicator__wrapper__dashed--active' : '' }}"
      style="background-color: {{ index === current ? indicatorActiveColor : indicatorInactiveColor }};{{ customStyle }}"
    ></view>
  </view>
</view>