<template>
  <view class="flex items-center rounded-[48rpx] bg-[#F7F7F7]! px-[24rpx] py-[12rpx] ml-[32rpx]">
    <view class="i-carbon-search text-[#999]"></view>
    <input
      v-model="searchValue"
      :placeholder="placeholder"
      confirm-type="search"
      placeholder-style="color:#999"
      class="text-start ml-20rpx"
      @confirm="handleConfirm"
      @input="handleInput"
    />
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  placeholder: {
    type: String,
    default: '',
  },
  value: {
    type: String,
    default: '',
  },
})
const emit = defineEmits(['update:value', 'confirm'])

const searchValue = computed({
  get() {
    return props.value
  },
  set(value) {
    emit('update:value', value)
  },
})
const handleConfirm = (e) => {
  emit('confirm', e.detail.value)
}

const handleInput = (e) => {
  emit('confirm', e.detail.value)
}
</script>
