<wxs module="wxs">
  function setActiveLineWidth(total, finished) {
    var width = (finished * 100) / total;
    if(width > 100) {
      width = 100
    }
    return width + '%'
  }
  function setActiveLineStyle(finishedColor, total, finished) {
    var width = setActiveLineWidth(total, finished);
    var style = 'width: ' + width + ';'
    if(finishedColor) {
      style += 'background: ' + finishedColor + ';'
    }
    return style
  }
  module.exports = {
    setActiveLineStyle: setActiveLineStyle,
  }
</wxs>

<view class="ac-steps-wrapper">
  <view class="ac-steps-default-line"></view>
  <view
    class="ac-steps-active-line"
    style="{{wxs.setActiveLineStyle(colors.finished, steps.length - 1, currentStep - 1)}}"></view>
    <view class="ac-steps" wx:for="{{stepsData}}" wx:key="{{item.title}}">
      <view
        class="ac-steps-title custom-class-title {{item.stepClass}}"
        style="{{item.stepStyle}}">{{item.title}}</view>
      <view class="ac-steps-icon-wrapper {{item.stepClass}}">
        <view
          wx:if="{{currentStep === index + 1}}"
          class="ac-iconfont icon-finished custom-class-icon"
          style="{{item.stepsIconStyle}}"></view>
        <view
          wx:else
          class="ac-steps-icon"
          style="{{colors.finished && currentStep > (index + 1) ? 'background: ' + colors.finished + ';' : ''}}"></view>
      </view>
  </view>
</view>