<template>
    <v-dialog v-model="dialog_realise_item" persistent width="40vw">
        <v-card>
            <v-card-title class="headline grey lighten-2">ITEM REALISE</v-card-title>
            <v-card-text>
                <v-layout row wrap v-for="(item, index) in listing_item_realise" class="mt-2">
                    <v-flex xs3 class="pr-1">
                        <p class="mb-0">{{ item.PurchaseRequestDirectNumber }}</p>
                    </v-flex>
                    <v-flex xs3 class="px-1">
                        <p class="mb-0">{{ item.PurchaseRequestDirectDescription }}</p>
                        <p class="mb-0 font-weight-bold" style="color:#000000">Kategori: {{ item.PurchaseDirectCategoryName }}</p>
                    </v-flex>
                    <v-flex xs3>
                        <p class="mb-0">Harga Estimasi: </p>
                        <p class="mb-0">Rp. {{ oneMoney(item.estimate_price) }}</p>
                    </v-flex>
                    <v-flex xs3 class="pl-1">
                        <v-text-field 
                            prefix="Rp" v-model="item.realised_price" 
                            outline hide-details label="Harga Realisasi"
                            @input="formatMoney()"
                        >
                        </v-text-field>
                    </v-flex>
                    <v-flex xs12>
                        <v-divider class="mt-2" v-if="index + 1 < listing_item_realise.length" :key="`divider-${index}`"></v-divider>
                    </v-flex>
                </v-layout>
            </v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="error" @click="batalAccItem()">BATAL</v-btn>
                <v-btn color="primary" @click="simpanAccItem()">SIMPAN</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>


<script>
module.exports = {
    data() {
        return {
            
        }
    },
    computed: {
        dialog_realise_item: {
            get() {
                return this.$store.state.cashier.dialog_realise_item
            },
            set(val) {
                this.$store.commit("cashier/update_dialog_realise_item", val);
            }
        },
        listing_item_realise: {
            get() {
                return this.$store.state.cashier.listing_item_realise
            },
            set(val) {
                this.$store.commit("cashier/update_listing_item_realise", val);
            }   
        }
    },
    methods: {
        oneMoney(value) {
            // First, remove any non-digit characters (like existing dots or commas)
            // to get a clean number.
            let cleanValue = String(value).replace(/\D/g, '');

            // Convert the clean value to a number.
            const num = parseInt(cleanValue, 10);

            // If the result is not a number, return an empty string or '0'.
            if (isNaN(num)) {
                return '';
            }

            // Use toLocaleString() to format the number with dots as thousand separators.
            // The 'id-ID' locale is used here for Indonesian Rupiah formatting.
            return num.toLocaleString('id-ID');
        },
        oneMoneyToInt(formattedValue) {
            if (formattedValue === null || formattedValue === undefined || formattedValue === '') {
                return 0; // Return 0 for empty or null values
            }

            // Remove all dots (thousand separators) from the string.
            // The global flag 'g' is important to replace all occurrences.
            const cleanString = String(formattedValue).replace(/\./g, '');

            // Convert the clean string to an integer.
            // The second argument '10' is the radix, ensuring it's parsed as base-10.
            const intValue = parseInt(cleanString, 10);

            // Check if the result is a valid number.
            if (isNaN(intValue)) {
                return 0; // Return 0 if the conversion fails
            }

            return intValue;
        },
        batalAccItem() {
            this.listing_item_realise = []
            this.dialog_realise_item = false
        },
        simpanAccItem() {
            let data = JSON.parse(JSON.stringify(this.listing_item_realise))
            let isEmpty = false
            data.forEach(element => {
                if (element.realised_price == '' ) {
                    isEmpty = true
                } else {
                    element.realised_price = this.oneMoneyToInt(element.realised_price)
                }
            });

            if (isEmpty) {
                return
            }

            this.$store.dispatch("cashier/saveVoucherDetail", {detail: data});
        },
        formatMoney() {
            let data = this.listing_item_realise
            data.forEach(element => {
                element.realised_price = this.oneMoney(element.realised_price)
            });
            this.listing_item_realise = data
        }
    },
    watch: {
    }
}
</script>