<template>
  <view class="ie-search px-20 py-20" :class="{ 'border-0 border-b border-solid border-border-light': border }">
    <uv-search v-model="modelValue" shape="square" :showAction="showAction" :placeholder="placeholder" :inputType="inputType"
      @input="handleInput" @search="handleSearch" @clear="handleClear" @custom="handleSearch">
      <template #suffix>
        <view v-if="showSuffix"
          class="text-24 text-fore-title bg-primary text-white px-24 py-10 rounded-full translate-x-10"
          @click="handleSearch">搜索
        </view>
      </template>
    </uv-search>
  </view>
</template>
<script lang="ts" setup>
type Props = {
  placeholder?: string;
  border?: true;
  inputType?: 'text' | 'number';
  showSuffix?: boolean;
  showAction?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  placeholder: '请输入',
  border: true,
  inputType: 'text',
  showSuffix: false,
  showAction: false
});
const modelValue = defineModel<string>('modelValue', {
  default: ''
});

const emit = defineEmits(['search', 'clear']);
const handleSearch = () => {
  emit('search');
};
const handleInput = (value: string) => {
  modelValue.value = value;
};
const handleClear = () => {
  emit('clear');
};
</script>
<style lang="scss" scoped></style>