<template>
    <view class="search-input">
        <view class="content">
            <c-icon name="search" class="icon"/>
            <view class="input-wp">
                <input
                    class="input"
                    placeholder-class="input-placeholder"
                    :placeholder="placeholder"
                    :value="query"
                    :focus="isInputing"
                    @focus.stop="onFocus"
                    @blur="onBlur"
                    @input="onInput"
                >
            </view>
            <view class="cancel-wrap">
                <c-icon
                    v-if="isInputing && query"
                    class="icon-cancel"
                    name="close-circle-solid"
                    @tap.stop="onCancel"
                />
            </view>
        </view>
        <view
            class="input-confirm c-color c-font-15"
            @tap.stop="onGoPage"
        >
            取消
        </view>
    </view>
</template>

<script>
/**
 * @file 搜索框
 * @author mazihan
 * @categories 业务组件
 * @tags [component]
 */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
export default {
    config: {
        component: true
    },
    components: {
        CIcon
    },
    props: {
        /**
         * query数据
         */
        query: {
            'type': String,
            'default': ''
        },
        /**
         * 默认数据
         */
        placeholder: {
            'type': String,
            'default': ''
        },
        /**
         * 是否在输入中
         */
        isInputing: {
            'type': Boolean,
            'default': false
        },
    },
    data() {
        return {
            value: ''
        };
    },
    methods: {
        onFocus() {
            /**
             * 聚焦
             *
             * @event focus
             */
            this.$emit('onFocus');
        },
        onBlur() {
            setTimeout(() => {
                /**
                 * 失去焦点
                 *
                 * @event blur
                 */
                this.$emit('onBlur');
            }, 100);
        },
        onInput(eve) {
            this.value = eve.detail.value;
            /**
             * 输入
             *
             * @event input
             */
            this.$emit('onInput', eve.detail);
        },
        onGoPage(eve) {
            /**
             * 确认
             *
             * @event confirm
             */
            this.$emit('onGoPage');
        },
        onCancel() {
            this.value = '';
            /**
             * 输入
             *
             * @event input
             */
            this.$emit('onInput', {value: ''});
            setTimeout(() => {
                /**
                 * 聚焦
                 *
                 * @event focus
                 */
                this.$emit('onFocus');
            }, 150);
        }
    }
};
</script>
<style lang="less" target="h5" scoped>
.input{
    &:focus {
        outline: none;
    }
}
.input-confirm {
    min-width: 30px;
}
</style>
<style lang="less" scoped>
.search-input {
    padding: .1rem .17rem 0 .17rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .content {
        display: flex;
        flex: 1;
        align-items: center;
        border-radius: 22px;
        height: 44px;
        line-height: 44px;
        border: 2px solid #00C8C8;
    }
    .icon {
        padding: 0 .1rem 0 .15rem;
        color: #bbb;
        font-weight: 900;
    }
    .cancel-wrap {
        min-width: 30px;
    }
    .icon-cancel {
        color: #ddd;
        padding-right: 0.18rem;
    }
    .input-wp {
        flex: 1;
        overflow: hidden;
    }
    .input {
        height: 44px;
        color: #1f1f1f;
        font-size: 16px;
        caret-color:#00c8c8;
    }
    .input-placeholder {
        color: #999;
    }
    .input-confirm {
        padding-left: .22rem;
        white-space: nowrap;
    }
}
</style>
