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

<view class="custom-class {{ utils.bem('steps', [direction]) }}">
  <view class="van-step__wrapper">
    <view wx:for="{{ steps }}" wx:key="index" bindtap="onClick" data-index="{{ index }}" class="{{ utils.bem('step', [direction, status(index, active)]) }} van-hairline" style="{{ status(index, active) === 'inactive' ? 'color: ' + inactiveColor: '' }}">
      <view class="van-step__title" style="{{ index === active ? 'color: #45affb': (index === rejectNode? 'color: #fd6060;font-weight:800':'')}}">
        <view style="{{ index < active ? 'color: ' + activeColor : '' }}">{{ item.text }}</view>
        <view style="color: #CCCCCC;padding: 15rpx 20rpx 0rpx 0;font-weight: 800;">{{ item.desc }}</view>
      </view>
      <view class="van-step__circle-container">
        <block wx:if="{{ index > active }}">
          <block wx:if="{{ index === rejectNode }}">
            <van-icon color="#fd6060" name="clear" custom-class="van-step__icon" />
          </block>
          <block wx:if="{{ index != rejectNode }}">
            <van-icon wx:if="{{ item.inactiveIcon || inactiveIcon }}" color="{{ status(index, active) === 'inactive' ? inactiveColor: activeColor }}" name="{{ item.inactiveIcon || inactiveIcon }}" custom-class="van-step__icon" />
            <view wx:else class="van-step__circle" style="{{ 'background-color: ' + (index < active ? activeColor : inactiveColor) }}" />
          </block>
        </block>
        <van-icon wx:else name="{{ index < active ? 'checked': 'checked' }}" style="{{index < active ? 'color:#07c160':'color:#45affb;font-size:30rpx !important;'}}" custom-class="van-step__icon" />
      </view>
      <view wx:if="{{ index === rejectNode -1 }}" class="van-step__line" style="background-color:#fd6060" />
      <view wx:if="{{ (index !== steps.length - 1) && index != rejectNode -1 }}" class="van-step__line" style="{{ 'background-color: ' + (index < active ? activeColor : inactiveColor) }}" />
    </view>
  </view>
</view>

<wxs module="status">
  function get(index, active) {
    if (index < active) {
      return 'finish';
    } else if (index === active) {
      return 'process';
    }

    return 'inactive';
  }
  module.exports = get;
</wxs>