<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" placeholder="搜索" class="search" @change="emits('update:model-value', $event)">
    <template #prepend>
      <div class="w-full h-full flex_center" @click="emits('search', text)">
        <i:ic:baseline-search class="w-5 h-5 text-hex-3F8CFF" />
      </div>
    </template>
  </el-input>
</template>

<!--
<style lang="scss" scoped>
:deep(.el-input) {
  height: 42px;
  background: #EBF3FF;
  border-radius: 13px;

  .el-input-group__prepend {
    box-shadow: none;
    background: #D0E2FF;
    border-radius: 13px;
    width: 42px;
    padding: 0;
    cursor: pointer;
  }

  .el-input__wrapper {
    box-shadow: none;
    background: #EBF3FF;
    border-radius: 0 8px 8px 0;
  }
}
</style>
-->
