<template>
  <div class="ay-form__item">
    <label
      class="ay-form__label"
      :for="name"
    >
      {{ label }}
    </label>
    <input 
      :id="name" 
      v-validate="validate" 
      class="ay-form__field"
      step="any"
      :type="type"
      :name="name"
      :value="value"
      :disabled="disabled"
      :placeholder="placeholder"
      :data-vv-as="name"
      v-bind="$attrs"
      v-on="inputListeners"
    >
    <span class="ay-form__msg">
      {{ errors.first((scope) ? `${scope}.${name}` : name) }}
    </span>
  </div>
</template>

<style scoped>

</style>

<script>
/**
 * @fileoverview  Input
 * @version       0.1
 * @author        Miguel Ortiz <miguel.ortiz@decameron.com>
 */

/**
 * Constantes para este componente
 */
const COMPONENT_NAME = 'vue-input'

export default {
  inject: { $validator: '$validator' },
  name: COMPONENT_NAME,
  props: {
    name: {
        type: String,
        required: true,
    },
    value: {
       default: null
    },
    type: {
      type: String,
      default: "text",
      validator: val => {
        return (
          [
            'text',
            'password',
            'email',
            'number',
            'url',
            'tel',
            'date',
            `time`,
            'range',
            'color'
          ].indexOf(val) !== -1
        );
      }
    },
    validate: {
      type: String,
      required: true,
    },
    placeholder: {
      type: String,
      default: null
    },
    disabled: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: null
    },
    scope: {
      type: String,
      default: null
    }
  },
  computed: {
    inputListeners: function () {
      var vm = this
      // `Object.assign` merges objects together to form a new object
      return Object.assign({},
        // We add all the listeners from the parent
        this.$listeners,
        // Then we can add custom listeners or override the
        // behavior of some listeners.
        {
          // This ensures that the component works with v-model
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }
  }
}
</script>