<script lang="ts" setup>
const props = defineProps<{
  modelValue?: string
}>()

const emits = defineEmits(['update:model-value', 'search'])

const text = ref(props.modelValue ?? '')

watch(() => text.value, () => emits('update:model-value', text.value))
</script>

<template>
  <el-input v-model="text" class="h-46px" placeholder="搜索" @change="emits('update:model-value', $event)">
    <template #append>
      <div class="h-full w-full flex items-center justify-center" @click="emits('search', text)">
        <i:ic:baseline-search class="h-5 w-5 text-hex-3F8CFF" />
      </div>
    </template>
  </el-input>
</template>
