<template>
    <view class="search-bar">
        <view class="search-bar__search" @tap="goSearch">
            <view
                class="search-bar__search__input c-line-clamp1"
                :style="customStyle"
            >
                <c-icon name="search" class="c-color-gray"/>
                <view class="c-inline c-gap-left" :style="{color: textColor}">{{ search.placeHolder }}</view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 虚拟搜索框
 * @displayName SearchBar 虚拟搜索框
 * @author shizhongwei02
 * @categories component
 * @tags [component]
 */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {send} from '@baidu/med-utils/lib/Mars';
export default {
    config: {
        component: true
    },
    components: {
        CIcon
    },
    props: {
        /**
         * 搜索框内容
         */
        search: {
            type: Object,
            default: () => ({})
        },

        /**
         * 搜索框文字颜色
         */
        textColor: {
            type: String,
            default: '#999'
        },

        /**
         * 自定义样式
         */
        customStyle: {
            type: Object,
            default: () => ({})
        },

        /**
         * 搜索框类别
         */
        log: {
            type: Object,
            default: () => ({})
        }
    },
    methods: {
        goSearch() {
            /**
             * 点击query
             *
             * @event click
             * @property {object} search 当前传入的search数据
             */
            this.$emit('tapSearch', this.search);
            send({
                type: 'c',
                action: 'click',
                extra: {
                    mod: this.log.mod
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.search-bar {
    width: 100%;
    &__search {
        width: 100%;
        &__input {
            background-color: #fff;
            margin: 0 auto;
            padding: 10.5px 20px;
            border: 2px solid #00C8C8;
            border-radius: 12px;
        }
    }
}
</style>
