<template>
    <div class="hc-search-input-box">
        <el-input v-model="queryValue" class="w-60" clearable :placeholder="placeholder" @keyup="keyUpEvent" />
        <el-button type="primary" @click="searchClick">{{ text }}</el-button>
    </div>
</template>

<script setup>
defineProps({
    placeholder: {
        type: String,
        default: '请输入关键词检索',
    },
    text: {
        type: String,
        default: '查询',
    },
})

const emit = defineEmits(['search'])

defineOptions({
    name: 'HcSearchInput',
})

//双向绑定
// eslint-disable-next-line no-undef
const queryValue = defineModel('modelValue', {
    default: '',
})

//回车搜索
const keyUpEvent = (e) => {
    if (e.key === 'Enter') {
        searchClick()
    }
}

//搜索
const searchClick = () => {
    emit('search', queryValue.value)
}
</script>

<style lang="scss">
.hc-search-input-box {
    position: relative;
    display: flex;
    align-items: center;
    .el-input__wrapper {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .el-button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}
</style>
