<template>
    <div class="min-h-272px w-screen bg-white absolute top-80px z-50 flex justify-center pb-30px shadow-md">
        <div class="w-1200px">

            <div class="text-size-30px mt-32px mb-30px">
                搜索
            </div>

            <div class="mb-30px">
                <input  v-on:keyup.enter="handleGoTo({name:keyword})" v-model="keyword" class="w-full h-40px border-1  rounded-full pl-20px pr-20px text-size-14px" placeholder="请输入搜索内容后按回车键搜索"></input>
            </div>
            <div class="flex flex-wrap">
                <!--      <div class="tag selected">热门标签</div>-->
                <div v-for="(item, index) in labels" @click="handleGoTo(item)" :key="index" class="tag hover:bg-[#1B3E28] hover:text-[white]">{{item.name}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'ui-search-hover-box',
        data(){
             return {
                 labels:[],
                 keyword:''
             }
        },
        methods:{
            handleGoTo(item){
                this.$router.push('/search?keywords=' + item.name)
                this.$emit('hide')
            }
        },
        async created() {
            let resp = await  this.$http.post(this.$api.cms.labels);
            if(resp.data.status === 200){
                this.labels = resp.data.data.cmsLabels;
            }
        }
    }
</script>

<style scoped>
.title{

}
</style>