<template>
    <view class="header-search c-font-normal" @tap="onTap">
        <c-icon name="search" class="icon c-gap-right"/>
        <view>{{ data.defaultWord }}</view>
    </view>
</template>

<script>
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {navigate} from '@utils/navigate';
/**
 * @file 顶部搜索框
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    data() {
        return {
        };
    },
    components: {
        CIcon
    },
    props: {
        /**
         * 数据
         */
        data: {
            type: Object,
            default: () => {
                return {};
            }
        },
        /**
         * 日志前缀
         */
        logValue: {
            type: String,
            default: '618_topbar_search'
        },
        // ubc日志必传字段
        page: {
            type: String,
            default: ''
        }
    },
    methods: {
        onTap() {
            if (this.data.targetUrl) {
                navigate({
                    url: this.data.targetUrl,
                    log: {
                        page: this.page,
                        type: 'clk',
                        value: this.logValue,
                        ext: {
                            pd: 'act'
                        }
                    }
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
.header-search {
    display: flex;
    align-items: center;
    width: 46vw;
    height: 29px;
    border-radius: 333px;
    padding-left: 13px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    color: #858585;
}
</style>
