<view class="amd-form-item {{className ? className :''}}">
  <view class="amd-form-item-line amd-form-item-line-{{position}} {{ !!errorInfo ? 'noLine'  : '' }}">
    <view class="amd-form-item-content amd-form-item-content-{{position}}">
      <!--label-->
      <view 
        a:if="{{!!label}}"
        style="{{labelWidth ? `width: ${labelWidth}` : ''}}"
        class="amd-form-item-label {{disabled ? 'amd-form-item-label-disabled' : ''}} amd-form-item-label-{{position}} {{required?'amd-form-item-label-required':''}}">
        <view class="amd-form-item-label-text">{{label}}</view>
        <popover 
          a:if="{{help}}"
          placement="top" 
          visible="{{helpVisible}}" 
          mask 
          maskClosable 
          onVisibleChange="onHelpVisibleChange"
          transparentMask>
          <view slot="items" class="amd-form-item-label-help-content">{{help}}</view>
          <icon type="QuestionCircleOutline" size="x-small" onTap="onToggleHelpVisible"/>
        </popover>
      </view>
      <!--field-->
      <view class="amd-form-item-field amd-form-item-field-{{position}}">
        <slot/>
        <view
          class="amd-form-item-error-info {{disabled ? 'amd-form-item-error-info-disabled' : ''}} amd-form-item-error-info-{{position}}"
          a:if="{{errorInfo}}">
          {{errorInfo.message}}
        </view>
      </view>
    </view>
    <view class="amd-form-item-other {{disabled ? 'amd-form-item-other-disabled' : ''}}">
      <!--extra-->
      <view class="amd-form-item-extra">
        <slot name="extra" />
      </view>
      <!--arrow-->
      <view class="amd-form-item-arrow" a:if="{{arrow}}">
        <icon type="RightOutline" size="x-small"/>
      </view>
    </view>
  </view>
</view>