<script setup lang="ts">
import Config from '@/config'
import {throttle} from 'throttle-debounce'

const {t} = useI18n()

const props = withDefaults(
    defineProps<{
      modelValue?: string
      disabled?: boolean
      focus?: boolean
      placeholder?: string
    }>(),
    {
      modelValue: '',
      disabled: false,
      focus: false,
    },
)

const emits = defineEmits<{
  'update:modelValue': [value: string]
  search: []
}>()


function search() {
  emits('search')
}

const handleSearch = throttle(Config.throttleTime, search)

function handleInputUpdateModelValue(value: string) {
  console.log(value)
  emits('update:modelValue', value)
}

function handleClickLeft() {
  uni.navigateBack()
}

defineOptions({
  name: 'HeaderSearch',

})
</script>
<template>
  <view
      class="relative z-1 bg-#fff"
  >
    <status-bar/>
    <view class="flex   items-center px-20rpx h-88rpx">
      <view class="shrink-0" @click="handleClickLeft">
        <view class="i-fluent:ios-arrow-ltr-24-filled  text-36rpx text-#333"></view>
      </view>
      <view
          class="px-20rpx w-650rpx h-80rpx  flex  items-center bg-common rounded-20rpx "
      >
        <wd-input
            no-border
            clearable
            :focus-when-clear="false"
            :disabled="disabled"
            :focus="focus"
            confirm-type="search"
            use-prefix-slot
            custom-class="flex items-center !text-30rpx !bg-transparent flex-1"
            placeholderStyle="font-size: 30rpx;color: #999;"
            :modelValue="modelValue"
            :placeholder="placeholder || t('common.input-placeholder.enter-keywords-to-search')"
            @update:modelValue="handleInputUpdateModelValue"
            @confirm="handleSearch"
        >
        </wd-input>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
:deep(.wd-input__clear) {
  background: transparent !important;
}
</style>
