<template>
    <div class=" flex justify-center pb-22rem">
        <van-field  v-model="keyword" @focus="inputFocus=true" @blur="handleBlur" :placeholder="$t('输入关键字检索')" class="!w-702rem !h-70rem !p-0 !rounded-full">
            <template v-slot:left-icon>
                <div class="h-full w-full flex justify-center items-center">
                    <img src="/imgs/h5-search-icon.png" class="w-36rem ml-24rem" />
                </div>
            </template>
            <template v-if="inputFocus" v-slot:button>
                <span class="pr-24rem flex items-center justify-center" >
                    <van-button @click="handleConfirm" size="mini" type="primary" color="#1b3e28" round class="w-110rem" >{{$t('搜索')}}</van-button>
                </span>
            </template>
        </van-field>
    </div>
</template>

<script>
    export default {
        props:{
            searchPage:false,
            keywordProp:''
        },
        name: "ui-search",
        data(){
            return {
                inputFocus:false,
                keyword:''
            }
        },
        watch:{
            keywordProp:{
                immediate:true,
                handler(){
                    this.keyword = this.keywordProp;
                }
            }
        },
        methods:{
            handleBlur(){
                setTimeout(()=>{
                    this.inputFocus = false;
                },1000);
            },
            handleConfirm(){
                if(!this.searchPage){
                    this.$router.push('/search?keyword=' + this.keyword);
                }else{
                    this.$emit('search',this.keyword);
                }
            }
        }
    }
</script>

<style scoped>

</style>