<template>
  <div id="inputMoney">
    <money
      id="txt1"
      class="form-control"
      v-model="price"
      v-bind:placeholder="placeholder"
      :disabled="disabled"
      v-bind="money"
      @input="change"
      @keydown.enter="onEnter"
    />
    <span v-bind:class="icon"></span>
  </div>
</template>
<script type="text/javascript">
  import { Money } from 'v-money'
  export default {
    name: 'input-money',
    props: {
      value: [String, Number],
      placeholder: String,
      icon: String,
      disabled: [String, Boolean],
      prefix: {
        type: String,
        default: 'R$ '
      }
    },
    data () {
      return {
        price: this.value,
        money: {
          decimal: ',',
          thousands: '.',
          prefix: this.prefix,
          suffix: '',
          precision: 2,
          masked: false
        }
      }
    },
    methods: {
      onEnter () {
        this.$emit('on-enter')
      },
      change () {
        this.$emit('input', this.price)
      }
    },
    components: {
      Money
    },
    watch: {
      value (vl) {
        this.price = vl
      }
    }
  }
</script>