<template>
    <view class="search-box">
        <view class="saerch-icon">
            <icon type="search" size="13" />
        </view>
        <input class="search" type="text" :placeholder="placeholder" onInput="onBindInput" onConfirm="onBindInputConfirm" :value="value" />
        <view class="saerch-icon" v-if="value" onTap="clickClear">
            <icon type="clear" size="11" />
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            value: ''
        };
    },
    mixins: [],
    props: {
        placeholder: '请输入',
        onBindInput: () => {},
        onBindInputConfirm: () => {}
    },
    didMount() {},
    didUpdate() {},
    didUnmount() {},
    methods: {
        onBindInputFun(e) {
            this.setData({
                value: e.detail.value
            });
            this.props.onBindInput(e.detail.value);
        },
        clickClear() {
            this.setData({
                value: ''
            });
            this.props.onBindInput(this.value);
        },
        onBindInputConfirmFun() {
            this.props.onBindInputConfirm(this.value);
        }
    },
    created: function () {}
};
</script>
<style>
.search-box {
    display: flex;
    align-items: center;
    width: 100%;
    height: 64rpx;
    border-radius: 106rpx;
    background-color: rgba(247, 247, 249, 100);
    margin: 0 40rpx;
}
.search {
    flex: 1;
    background-color: transparent;
    /* text-align: center; */
    font-size: 28rpx;
    padding: 0 20px 0 0;
}
.saerch-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20rpx;
    width: 50rpx;
    height: 50rpx;
}
.saerch-icon:last-child {
    margin-right: 20rpx;
}
</style>
