<!-- MoneyInput.vue -->
<template>
    <v-text-field
      :value="formattedValue"
      @input="handleInput"
      @blur="handleBlur"
      v-bind="$attrs"
      v-on="$listeners"
    ></v-text-field>
  </template>
  
  <script>
  export default {
    props: {
      value: {
        type: [String, Number],
        default: ''
      }
    },
    computed: {
      formattedValue() {
        if (!this.value) return '';
        
        const parts = this.value.toString().split('.');
        const integerPart = parts[0];
        const decimalPart = parts.length > 1 ? parts[1] : '';
        
        const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
        
        return decimalPart ? `${formattedInteger},${decimalPart}` : formattedInteger;
      }
    },
    methods: {
      handleInput(value) {
        if (!value) {
          this.$emit('input', '');
          return;
        }
        
        let processedValue = value.replace(/\./g, '').replace(',', '.');
        this.$emit('input', processedValue);
      },
      
      handleBlur() {
        // Format ulang jika perlu
      }
    }
  }
  </script>