<script setup>
const emit = defineEmits(['init'])
const searchKey = ref('')

const handleSearch = () => {
  emit('init', searchKey.value)
}

const timer = ref(null)
const changeValue = () => {
  // 如果timer不为空就表明在持续输入,每次改变都清除定时，这样就可以实现只输入最后一次结果(注意每次间隔如果超过500毫秒就会输出)
  if (timer.value !== null)
    clearTimeout(timer.value)
  timer.value = setTimeout(() => {
    handleSearch()
  }, 500)
}
</script>

<template>
  <div>
    <el-input v-model="searchKey" size="default" placeholder="搜索" clearable @input="changeValue">
      <template #prepend>
        <div class="imageDiv flex items-center justify-center cursor-pointer" @click="handleSearch">
          <img src="/images/shape.png" alt="" srcset="">
        </div>
      </template>
    </el-input>
  </div>
</template>

<style lang="scss" scoped>
.el-input {
  width: 262px;
  :deep(.el-input-group__prepend) {
    width: 43px;
    height: 42px;
    border-radius: 13px;
    background: #fff;
    padding: 0;
    box-shadow: none;
    margin-right: -20px;
    .imageDiv {
      width: 100%;
      height: 100%;
      border-radius: 13px;
      background: rgba($color: #3f8cff, $alpha: 0.26);
    }
  }
  :deep(.el-input__wrapper) {
    background: #ebf3ff;
    border-radius: 13px;
    box-shadow: none;
    padding-left: 30px;
  }
}
</style>
