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

<van-cell
        arrow-direction="{{ arrowDirection }}"
        border="{{ border }}"
        center="{{ center }}"
        clickable="{{ clickable }}"
        custom-class="custom-class van-field"
        custom-style="{{ customStyle }}"
        icon="{{ leftIcon }}"
        is-link="{{ isLink }}"
        required="{{ required }}"
        size="{{ size }}"
        title-style="margin-right: 12px;"
        title-width="{{ titleWidth }}"
>
    <slot slot="icon" name="left-icon"/>
    <label slot="title" class="label-class {{ utils.bem('field__label', { disabled }) }}" for="{{ name }}"
           wx:if="{{ label }}">
        {{ label }}
    </label>
    <slot slot="title" name="label" wx:else/>
    <view class="{{ utils.bem('field__body', [type]) }}">
        <view bindtap="onClickInput" class="{{ utils.bem('field__control', [inputAlign, 'custom']) }}">
            <slot name="input"/>
        </view>
        <include src="./textarea.wxml" wx:if="{{ type === 'textarea' }}"/>
        <include src="./input.wxml" wx:else/>

        <van-icon
                catch:touchstart="onClear"
                class="van-field__clear-root van-field__icon-root"
                name="{{ clearIcon }}"
                wx:if="{{ showClear }}"
        />
        <view bind:tap="onClickIcon" class="van-field__icon-container">
            <van-icon
                    class="van-field__icon-root {{ iconClass }}"
                    custom-class="right-icon-class"
                    name="{{ rightIcon || icon }}"
                    wx:if="{{ rightIcon || icon }}"
            />
            <slot name="right-icon"/>
            <slot name="icon"/>
        </view>
        <view class="van-field__button">
            <slot name="button"/>
        </view>
    </view>
    <label class="van-field__word-limit" for="{{ name }}" wx:if="{{ showWordLimit && maxlength }}">
        <view class="{{ utils.bem('field__word-num', { full: value.length >= maxlength }) }}">
            {{ value.length >= maxlength ? maxlength : value.length }}
        </view>
        /{{ maxlength }}
    </label>
    <label class="{{ utils.bem('field__error-message', [errorMessageAlign, { disabled, error }]) }}" for="{{ name }}"
           wx:if="{{ errorMessage }}">
        {{ errorMessage }}
    </label>
</van-cell>
