<template>
  <div class="search w-full flex items-center">
    <Icon
      iconName="iconsuyuan-chaxun"
      size="10"
      color="#838383"
      style="margin-left: 15px; margin-right: 8px"
      @click="$emit('search')"
    ></Icon>
    <input
      type="text"
      :placeholder="placeholder"
      :value="modelValue"
      @input="(e) => $emit('update:modelValue', (e.target as any).value)"
      @keydown.enter="$emit('search')"
      class="flex-grow outline-none mr-4"
    />
  </div>
</template>
<script lang="ts" setup>
import Icon from "@/components/Icon/index.vue";
defineProps<{
  placeholder: string;
  modelValue?: string;
}>();

defineEmits(["update:modelValue", "search"]);
</script>
<style lang="scss">
.search {
  height: 35px;
  background: #f5f5f5;
  border-radius: var(--sy-border-radius);
  input {
    background: transparent;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #606266;
  }
}
</style>
