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

<view id="{{ scrollable ? 'scroll-' + index : '' }}" class="{{ utils.bem('step', [direction, { scrollable }]) }} aio-class" style="{{!scrollable ? (direction==='row'?'width:'+(1/length)*stepsWidth+'px':'min-height:'+stepMinHeight+'rpx') : 'min-width:'+stepMinWidth+'rpx' }}">
  <view class="{{ utils.bem('step-container', [direction]) }} aio-step-class">
    <view wx:if="{{custom}}" class="aio-step-custom">
      <slot name="dot" />
    </view>
    <view wx:else class="aio-step-class {{dot && !icon?'aio-step-dot--'+currentStatus.setStatus(activeIndex,index,status)+' aio-step-dot':'aio-step--'+currentStatus.setStatus(activeIndex,index,status)+' aio-step-icon'}} {{ iconBorder ? '' : 'aio-step-icon--unborder' }}" style="{{dot?currentStatus.dotStyle(activeIndex,index,color):currentStatus.statusStyle(activeIndex,index,color,status)}}">
      <aio-image wx:if="{{icon}}" name="{{icon}}" width="{{ iconSize }}" height="{{ iconSize }}" />
      <block wx:if="{{!dot && !icon}}">
        <view wx:if="{{currentStatus.setStatus(activeIndex,index,status)==='error' || currentStatus.setStatus(activeIndex,index,status)==='finish'}}" class="iconfont icon-{{currentStatus.setStatus(activeIndex,index,status)}}"></view>
        <block wx:else>{{index+1}}</block>
      </block>
    </view>
  </view>
  <view class="{{ utils.bem('step-content', [direction]) }}">
    <view class="aio-step-title {{ 'aio-step-title--' + currentStatus.setStatus(activeIndex,index,status) }} aio-title-class">
      {{title}}
      <slot name="title" />
    </view>
    <view class="aio-step-describe aio-describe-class">
      {{describe}}
      <slot name="describe" />
    </view>
  </view>
  <view class="{{ utils.bem('step-line', [direction]) }} aio-line-class {{currentStatus.isReverse(reverse || colReverse,activeIndex,index)?'aio-step-line--finish':'aio-step-line--wait'}}" style="{{activeIndex>index?('background-color:'+color):''}};border-{{ direction === 'column' ? 'left' : 'top' }}-style:{{ borderStyle }}" wx:if="{{reverse || colReverse?(index!==0):(length!==index+1)}}"></view>
</view>