<template>
  <div :class="{ 'form-group micro-input': true, ...extraClass }">
    <label :for="fieldInputId" v-if="caption">
      {{ caption }}
      <span class="mandatory-mark text-danger" v-show="mandatory">*</span>
    </label>

    <div :class="{ 'input-group': append }">
      <input class="form-control" :id="fieldInputId" :value="value" @input="handleInput" autocomplete="off" :type="type ? type : 'text'" :placeholder="placeholder" :disabled="disabled" v-on:keyup.enter="$emit('enter')" />
      <div class="input-group-append" v-show="append">
        <span class="input-group-text">{{ append }}</span>
      </div>
    </div>

    <small class="form-text text-muted" v-if="description">
      {{ description }}
    </small>
  </div>
</template>

<script>
export default {
  props: ['caption', 'value', 'description', 'placeholder', 'field', 'id', 'mandatory', 'type', 'append', 'disabled'],

  data() {
    return {
      fieldInputId: this.id ? this.id : 'inputMicro' + this._uid
    }
  },

  mounted () {
    const vm = this
  },

  methods: {
    handleInput (e) {
      this.$emit('input', e.target.value)
    },

    focus() {
      document.getElementById(this.fieldInputId).focus()
    },
  },

  computed: {
    extraClass () {
      let extra = {}

      if (this.type !== undefined) {
        extra['micro-input-type-' + this.type] = true
      }

      return extra
    }
  }
}
</script>