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

<view
        class="{{ utils.bem('search', { withaction: showAction || useActionSlot }) }} custom-class"
        style="background: {{ background }}"
>
    <view class="{{ utils.bem('search__content', [shape]) }}">
        <view class="van-search__label" wx:if="{{ label }}">{{ label }}</view>
        <slot name="label" wx:else/>

        <van-field
                bind:blur="onBlur"
                bind:change="onChange"
                bind:clear="onClear"
                bind:click-input="onClickInput"
                bind:confirm="onSearch"
                bind:focus="onFocus"
                border="{{ false }}"
                class="van-search__field field-class"
                clear-icon="{{ clearIcon }}"
                clear-trigger="{{ clearTrigger }}"
                clearable="{{ clearable }}"
                confirm-type="search"
                cursor-spacing="{{ cursorSpacing }}"
                custom-style="padding: 5px 10px 5px 0; background-color: transparent;"
                disabled="{{ disabled }}"
                error="{{ error }}"
                focus="{{ focus }}"
                input-align="{{ inputAlign }}"
                input-class="input-class"
                left-icon="{{ !useLeftIconSlot ? leftIcon : '' }}"
                maxlength="{{ maxlength }}"
                placeholder="{{ placeholder }}"
                placeholder-style="{{ placeholderStyle }}"
                readonly="{{ readonly }}"
                right-icon="{{ !useRightIconSlot ? rightIcon : '' }}"
                type="search"
                value="{{ value }}"
        >
            <slot slot="left-icon" name="left-icon" wx:if="{{ useLeftIconSlot }}"/>
            <slot slot="right-icon" name="right-icon" wx:if="{{ useRightIconSlot }}"/>
        </van-field>
    </view>

    <view
            class="van-search__action"
            hover-class="van-search__action--hover"
            hover-stay-time="70"
            wx:if="{{ showAction || useActionSlot }}"
    >
        <slot name="action" wx:if="{{ useActionSlot }}"/>
        <view bind:tap="onCancel" class="van-search__action-button cancel-class" wx:else>{{ actionText }}</view>
    </view>
</view>
