<template>
  <div
    class="fl-input-measure"
    @click="focusInput"
  >
    <label
      v-if="label"
      class="fl-input-measure__label"
    >
      {{ label }}
    </label>
    <input
      ref="input"
      :type="type"
      v-bind="$attrs"
      class="fl-input-measure__input"
      v-on="inputListeners"
      @input="$emit('input', $event)"
      @keydown="valid"
    >
    <span v-if="measure">{{ measure }}</span>
  </div>
</template>

<script>
import InputMixin from '../../mixins/inputMixin'

export default {
  name: 'FlInputMeasure',
  mixins: [InputMixin],
  props: {
    measure: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    }
  },
  methods: {
    valid (e) {
      if (this.type !== 'number') return
      const key = e.which ? e.which : e.keyCode
      if (key > 31 && (key < 48 || key > 57)) {
        e.preventDefault()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .fl-input-measure {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 200px;
    padding: 12px 16px;
    overflow: hidden;
    color: $black-02;
    background: $light-01;
    border-radius: $border-radius;
  }

  .fl-input-measure__input {
    top: 0;
    width: 100%;
    height: 100%;
    font-family: $main-ff;
    background: $light-01;
  }

  .fl-input-measure__label {
    margin-right: 10px;
    white-space: nowrap;
  }

  input[type='number'] {
    -moz-appearance: textfield;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
</style>
