
<wxs src="../wxs/utils.wxs" module="utils" />
<aio-cell
  size="{{ size }}"
  icon="{{ leftIcon }}"
  center="{{ center }}"
  border="{{ border }}"
  is-link="{{ isLink }}"
  required="{{ required }}"
  clickable="{{ clickable }}"
  title-width="{{ titleWidth }}"
  custom-style="{{ customStyle }}"
  arrow-direction="{{ arrowDirection }}"
  aio-class="aio-field cell-class"
>
<slot name="left-icon" slot="icon" />

  <label for="{{ name }}" wx:if="{{ label }}" class="{{ utils.bem('field__label', { disabled }) }} label-class" slot="title">
    {{ label }}
  </label>

  <slot wx:else name="label" slot="title" />
<view class="{{ utils.bem('field__body', [type]) }}">

  <view class="{{ utils.bem('field__body', [type]) }}">
    <!-- 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 -->
    <view class="{{ utils.bem('field__control', [inputAlign, 'custom']) }}" bindtap="onClickInput">
      <slot name="input" />
    </view>
    
    <include wx:if="{{ type === 'textarea' }}" src="./textarea.wxml" />
    <include wx:else src="./input.wxml" />

    <!-- 关闭icon -->
    <aio-image
      wx:if="{{ showClear }}"
      name="{{ closeIcon }}"
      class="aio-field__clear-root aio-field__icon-root"
      aio-class="right-icon-class"
      catch:touchstart="onClear"
    />
    <!-- 自定义右图标 -->
    <view wx:if="{{ rightIcon }}" class="aio-field__icon-container" bind:tap="onClickIcon">
      <aio-image
        name="{{ rightIcon }}"
        class="aio-field__icon-root"
        aio-class="right-icon-class"
      />
      <slot name="right-icon" />
    </view>
    <!-- 自定义输入框尾部按钮 -->
    <view wx:if="{{ showSuffix }}" class="aio-field__button">
      <slot name="button" />
    </view>
  </view>
</view>
</aio-cell>
