<template>
    <v-dialog v-model="dialogDetail" persistent max-width="500px">
        <v-card>
            <v-card-title class="headline grey lighten-2" primary-title>
                FORM EDIT REQUEST DETAIL
            </v-card-title>
            <v-card-text>
                <v-form ref="formDetail" v-model="validationDetail" lazy-validation>
                    <v-text-field
                        v-model="formattedAmount" type="number" label="Jumlah"
                        :min="0" required :rules="amountRules" 
                        hide-details outline
                    ></v-text-field>
                    <v-text-field
                        v-model="formattedPrice" label="Harga Satuan"
                        prefix="Rp. " required hide-details outline
                    ></v-text-field>
                    <v-text-field
                        v-model="formattedTotal" label="Harga Total"
                        prefix="Rp. " required hide-details outline
                    ></v-text-field>
                </v-form>
            </v-card-text>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="error" flat @click="closeDialogDetail()">Tutup</v-btn>
                <v-btn color="primary" dark @click="updateDialogDetail()">Simpan</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
module.exports = {
    data() {
        return {
            validationDetail: false,
            amount_input: 0,
            price_input: 0,
            total_input: 0,
            amountRules: [v => !!v || "Tidak boleh kosong"]
        }
    },
    computed: {
        dialogDetail: {
            get() {
                return this.$store.state.manager.dialogDetail;
            },
            set(val) {
                this.$store.commit("manager/updateDialogDetail", val);
            },
        },
        formattedAmount: {
            get() {
                return this.amount_input
            }
        },
        formattedPrice: {
            get() {
                return this.price_input
            }
        },
        formattedTotal: {
            get() {
                return this.total_input
            }
        }
    },
    methods: {
        roundToThreeSignificantDigits(digit) {
            // if (num === 0) return 0;
            
            // const absNum = Math.abs(num);
            // const magnitude = Math.floor(Math.log10(absNum)) + 1;
            // if (magnitude <= 3) return num;
            // const factor = Math.pow(10, magnitude - 3);
            // return Math.round(num / factor) * factor;

            const num = parseInt(digit, 10)
            if (isNaN(num) || num <= 0) {
                return 0;
            }

            const scale = 10 ** digit.length;
            const decimal = num / scale
            return Math.round(decimal * 1000);
        },
        oneMoney(value) {
            let splitValue = value.toString().split(".");

            if(splitValue.length > 1) {
                let val = splitValue[0]
                return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") + "," + this.roundToThreeSignificantDigits(splitValue[1]);
            } else {
                return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
            }
        },
        closeDialogDetail() {
            this.dialogDetail = false
        },
        updateDialogDetail() {

        }
    },
    watch: {
        dialogDetail(val) {
            if (val) {
                this.$nextTick(() => {
                    this.$ref.formDetail?.resetValidation()
                })
            }
        }
    },
}
</script>