<template>
  <input
    ref="mInput"
    class="m-input"
    :type="type"
    :value="value"
    @input="handleInput"
    :placeholder="placeholder"
    autocomplete="off"
    enterkeyhint="go"
    @keyup.enter="handleConfirm"
    :autofocus="searchFocus"
  />
</template>

<script>
export default {
  props: {
    value: [String, Number],
    type: {
      type: String,
      default: "text",
    },
    confirmType: {
      // enter  done go next previous search send
      type: String,
      default: "search",
    },
    placeholder: String,
  },
  data() {
    return {
      searchFocus: false,
    };
  },
  methods: {
    handleInput(e) {
      this.$emit("input", e.target.value);
    },
    handleConfirm(e) {
      this.$emit("confirm", e.target.value);
      this.$refs.mInput.blur()
    },
  },
};
</script>

<style lang="less">
.m-input {
}
</style>