<template>
  <v-text-field
      type="text"
      :value="formattedValue"
      @change="change"
      v-money="config"
      class="v-money"
      v-bind="$props"
      @blur="blur"
  ></v-text-field>
</template>

<script>

import mask from '../../plugins/mask'

export default {
  name: 'VuetifyMask',
  inheritAttrs: true,
  props: {
    value: {
      required: true,
      type: [Number, String],
      default: 0
    },
    label: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    blur: {
      type: Function,
      default () {
        return null
      }
    }
  },
  data () {
    return {
      formattedValue: '',
      config: {
        decimal: ',',
        thousands: '.',
        prefix: ' ',
        suffix: '',
        precision: 2,
        masked: false
      }
    }
  },
  watch: {
    value: {
      immediate: true,
      handler (newValue, oldValue) {
        let formatted = mask.format(newValue)
        if (formatted !== this.formattedValue) {
          this.formattedValue = formatted
        }
      }
    }
  },
  methods: {
    change (evt) {
      this.$emit('input', mask.unformat(evt, 2))
    }
  }
}
</script>