<block wx:if="{{visible}}">
  <wd-form-item
    id="{{id}}"
    className="{{formClass}}"
    style="{{style}}"
    label="{{label}}"
    labelVisible="{{labelVisible}}"
    labelTips="{{labelTips}}"
    labelWidth="{{labelWidth}}"
    labelAlign="{{labelAlign}}"
    labelWrap="{{labelWrap}}"
    layout="{{actualLayout}}"
    extra="{{extra}}"
    required="{{required}}"
    readOnly="{{readOnly}}"
    requiredFlag="{{requiredFlag}}"
    validateState="{{validateState}}"
    validateErrorMsg="{{validateErrorMsg}}"
    readValue="{{readValue}}"
    classRoot="{{classRoot}}"
    size="{{_size}}"
    borderedH5="{{borderedH5}}"
    before="{{before}}"
    after="{{after}}"
  >
    <block wx:if="{{stepOption === 'both'}}">
      <wd-button className="{{root}}-btn size-{{_size}} {{stepMinusDisabled ? 'is-disabled' : ''}} {{root}}-btn__before " iconType="icon-only" iconPosition="before" iconSource="inner" variant="outline" theme="secondary" icon="td:remove" bind:error="stepMinus"> </wd-button>
    </block>
    <wd-input-group before="{{before}}" after="{{after}}" block="{{true}}" size="{{_size}}" classRoot="{{classRoot}}" className="is-not-h5">
      <view class="{{cls}}">
        <!-- 前缀图标 -->
        <block wx:if="{{prefixType}}">
          <view class="{{inputWrap}}__before">
            <wd-icon name="{{prefixIcon}}" type="{{prefixType}}" src="{{prefixSrc}}" size="{{_size}}" className="{{root}}__icon-before"></wd-icon>
          </view>
        </block>

        <!-- 输入框 -->
        <view class="{{inputWrap}}__content">
          <input class="{{inputCls}} {{classPrefix}}-form-input-wrap__input-row" type="digit" placeholder-class="{{placeholderCls}}" placeholder="{{placeholder}}" value="{{showValue}}" disabled="{{disabled}}" name="{{name}}" auto-focus="{{focus}}" focus="{{focus}}" bind:input="handleChange" bind:focus="handleFocus" bind:blur="handleBlur" bind:confirm="handleConfirm" />
        </view>

        <block wx:if="{{format === 'percent'}}">
          <view class="{{classPrefix}}-input-number__text-after-percent"> % </view>
        </block>

        <!-- 清除按钮 -->
        <block wx:if="{{hasClearIcon}}">
          <view class="{{inputWrap}}__after">
            <wd-icon className="{{classPrefix}}-icon__trigger" name="td:close-circle-filled" size="{{_size}}" bind:touchstart="handleClear"></wd-icon>
          </view>
        </block>

        <!-- 后缀图标 -->
        <block wx:if="{{!hasClearIcon && suffixType}}">
          <view class="{{inputWrap}}__after">
            <wd-icon name="{{suffixIcon}}" type="{{suffixType}}" src="{{suffixSrc}}" size="{{_size}}" className="{{root}}__icon-after"></wd-icon>
          </view>
        </block>
      </view>
    </wd-input-group>
    <block wx:if="{{stepOption === 'both'}}">
      <wd-button className="{{root}}-btn size-{{_size}} {{stepPlusDisabled ? 'is-disabled' : ''}} {{root}}-btn__after" iconType="icon-only" iconPosition="before" iconSource="inner" variant="outline" theme="secondary" icon="td:add" bind:error="stepAdd"> </wd-button>
    </block>
  </wd-form-item>
</block>
