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

<script>
/**
 * @file 搜索框
 * @author chenshuo04
 * @categories 业务组件
 * @tags [component]
 */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {ubcSend} from '@utils/log';

export default {
    config: {
        component: true
    },
    components: {
        CIcon
    },
    props: {
        /**
         * query数据
         */
        query: {
            'type': String,
            'default': ''
        },
        /**
         * 默认数据
         */
        placeholder: {
            'type': String,
            'default': ''
        },

        /**
         * 是否在输入中
         */
        isInputing: {
            'type': Boolean,
            'default': false
        },
        /**
         * 内容区自定义样式
         */
        conCustomStyle: {
            'type': Object,
            'default': () => ({})
        },
        /**
         * 输入框自定义样式
         */
        inputCustomStyle: {
            'type': Object,
            'default': () => ({})
        },
        /**
         * query全数据
         */
        data: {
            'type': Object,
            'default': () => ({})
        },
    },
    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);
        },
        onConfirm(eve) {
            /**
             * 确认
             *
             * @event confirm
             */
            this.$emit('onConfirm');
            ubcSend({
                type: 'clk',
                value: 'enter_btn',
                ext: {
                    ...this.data,
                }
            });
            ubcSend({
                type: 'view',
                value: 'page',
                ext: {
                    ...this.data,
                }
            });
        },
        onCancel() {
            this.value = '';
            /**
             * 输入
             *
             * @event input
             */
            this.$emit('onInput', {value: ''});
            setTimeout(() => {
                /**
                 * 聚焦
                 *
                 * @event focus
                 */
                this.$emit('onFocus');
            }, 150);
        }
    }
};
</script>
<style lang="less" target="h5" scoped>
.input{
    background: #f6f6f6;
    &:focus {
        outline: none;
    }
}
.input-confirm {
    min-width: 30px;
}
</style>
<style lang="less" scoped>
.search-input {
    position: relative;
    padding: .1rem .17rem 0 .17rem;
    .content {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-radius: 19px;
        height: 38px;
        line-height: 38px;
        background-color: #f6f6f6;
    }
    .icon {
        padding: 0 .1rem 0 .15rem;
        color: #bbb;
        font-weight: 900;
    }
    .input-wp {
        width: 100%;
        overflow: hidden;
    }
    .input {
        height: 38px;
        caret-color:#00c8c8;
    }
    .input-placeholder {
        color: #999;
    }
    .input-confirm {
        border-left: 1px solid #e9e9e9;
        padding-left: .1rem;
        padding-right: .16rem;
        line-height: .15rem;
        white-space: nowrap;
    }
    .icon-cancel {
        color: #ccc;
        padding: .1rem;
    }
}
</style>

