<template>
  <!-- fixed top-60 left-0 -->
  <div class="w-full pt-62 bg-white px-16">
    <div class="flex h-40 mb-12 w-full items-center justify-between rounded-full border bg-white">
      <input
        type="text"
        v-model="searchString"
        class="ml-5 w-[80%] h-full pl-10 text-[13px]"
        :placeholder="placeholder"
        @keydown.enter="$emit('search')"
        @change="$emit('search')"
        style="outline: none; background: none"
      />

      <button
        @click="$emit('search')"
        class="h-full border-l-[1px] flex justify-center items-center w-66 shrink-0 rounded-r-full"
      >
        <div style="color: white" class="w-16 h-16 shrink-0">
          <img class="w-full h-full object-cover" src="~/assets/img/visa/search.svg" alt="" />
        </div>
      </button>
    </div>
  </div>
</template>

<script setup>
const searchString = defineModel('searchString')
defineProps({
  placeholder: {
    type: String,
    default: '搜索'
  }
})

defineEmits(['search'])
</script>

<style lang="scss" scoped></style>
