<!-- eslint-disable vue/multi-word-component-names -->
<script setup lang='ts'>

const emit = defineEmits(['onSearch']);
const isSearch = ref(false)
const inputField = ref(null as any);
const searchValue = ref('')
const focusInput = () => {
  setTimeout(() => {
    if (inputField.value) {
      console.log(inputField.value)
      inputField.value.focus();
    }
  }, 200)
}

watch(searchValue, () => {
  emit('onSearch', searchValue.value);
})

</script>

<template>
  <div class="search-box">
    <div class="search-input">
      <input ref="inputField" v-model="searchValue" v-show="isSearch" type="text"
        @blur="searchValue == '' ? isSearch = false : ''">
      <div v-show="!isSearch" @click="() => { isSearch = true, focusInput() }"
        style="display: flex;justify-content: center; align-items: center;color: #88866F;"><img
          style="width: 20px;margin-right: 10px;" src="@/assets/images/search_icon.png" alt="">请输入关键词</div>
    </div>
  </div>
</template>

<style lang='less' scoped>
.search-box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;

  .search-input {
    width: 80%;
    height: 60%;
    border-radius: 50px;
    background: #F1E9D4;
    margin-top: 1vh;
    display: flex;
    justify-content: center;
    align-items: center;

    input {
      border: none;
      background: transparent;
      width: 90%;
      height: 80%;
    }
  }
}
</style>