<template>
  <validation-provider immediate :name="name" :rules="rules" v-slot="{ errors }">
    <b-form-group  :label="label"> 
      <b-form-input
        :prepend="prepend"
        :placeholder="placeholder"
        v-model="val"
        :type="type"
        :disabled="disabled"
        :readonly="!autocomplete"
        :autofocus="!autocomplete"
        :autocomplete="!autocomplete ? 'off' : 'on'"
        @change="$emit('change', $event)"
        @blur="$emit('blur', $event)"
        onfocus="if (this.hasAttribute('readonly')) { this.removeAttribute('readonly');  this.blur();  this.focus();  }"
        :class="inputClass"
        ref="input"
      ></b-form-input>
      <div class="invalid-feedback d-block">{{ errors[0] }}</div>
    </b-form-group>
  </validation-provider>
</template>
<script>
module.exports = {
  props: {
    disabled: {},
    type: { type: String, default: "text" },
    name: { type: String },
    autocomplete: {},
    inputClass: {},
    rules: {},
    label: {
      type: String,
    },
    placeholder: {
      type: String,
    },
    prepend: {
      type: String,
    },
    value: {},
  },
  computed: {
    val: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("input", value);
      },
    },
  },
};
</script>