<template>
  <div class="ui-search">
    <input @input="inputHandler" :value="modelValue" :placeholder="placeholder" type="text" />
    <img :src="require('@/assets/images/icon/search_default.png')" alt="" />
  </div>
</template>

<script setup>
import { defineProps, defineEmits, defineExpose, nextTick, ref } from "vue";

const emit = defineEmits(["update:modelValue"]);

const props = defineProps({
  placeholder: {
    type: String,
    default: "",
  },
  maxlength: {
    type: [String, Number],
  },
  modelValue: {
    required: false,
    default: "",
  },
});

const inputval = ref("");

const inputHandler = (ev) => {
  emit("update:modelValue", ev.target.value);
  nextTick(() => {
    if (ev.target.value !== props.modelValue.toString()) {
      ev.target.value = props.modelValue.toString();
    }
  });
};
</script>

<script>
export default { name: "ui-search" };
</script>

<style lang="scss" scoped>
.ui-search {
  width: 310px;
  height: 40px;
  background: #fffef6;
  border-radius: 50px;
  border: 1px solid #999999;
  position: relative;
  > input {
    width: 100%;
    height: 100%;
    padding: 0 20px;
  }
  > img {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
  }
}
</style>
