<template>
    <div style="width: 100%;">
        <!-- SNACKBAR -->
        <v-snackbar
            v-model="snackbar"
            :timeout="5000"
            :multi-line="false"
            :vertical="false"
            :top="true"
            >
            {{ msgSnackbar }}
            <v-btn flat @click="updateAlertSuccess(false)"> Tutup </v-btn>
        </v-snackbar>

        <!-- ERROR DIALOG -->
        <v-dialog v-model="dialog_error" max-width="500px">
            <v-card>
                <v-card-title>
                    <span>ERROR !</span>
                    <v-spacer></v-spacer>
                </v-card-title>
                <v-divider></v-divider>
                    <div class="ma-3 red--text">{{ msgError }}</div>
                    <v-divider></v-divider>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="primary" flat @click="dialog_error = false"
                        >Tutup</v-btn
                    >
                </v-card-actions>
            </v-card>
        </v-dialog>
        <!-- END ERROR DIALOG -->
        <v-layout row wrap>
            <v-flex xs12 fill-height>
                <v-toolbar color="primary" dark>
                <v-toolbar-title class="white--text"
                    >APPROVE LEVEL</v-toolbar-title
                >
                <v-spacer></v-spacer>
                <v-btn icon @click="openDialogApproveLevel()">
                    <v-icon>add_box</v-icon>
                </v-btn>
                </v-toolbar>
                <v-card class="pa-2">
                        <v-layout>
                            <v-flex xs3 pl-2>
                                <v-text-field
                                    label="Cari..."
                                    placeholder="Nama"
                                    outline
                                    v-model="xsearch"
                                    hide-details
                                ></v-text-field>
                            </v-flex>
                            <v-flex pl-2 pr-2>
                                <v-btn
                                    dark
                                    color="primary"
                                    style="min-width: 50px; height: 50px; margin: 0"
                                    @click="mainTableSearch()"
                                    >
                                    <v-icon>search</v-icon>
                                </v-btn>
                            </v-flex>
                        </v-layout>
                </v-card>
                <v-card class="pa-2 mt-2">
                    <v-layout row style="max-height: 600px; overflow: auto">
                        <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                            <v-data-table
                                :items="approvelevels"
                                :headers="headers"
                                :loading="isLoading"
                                hide-actions
                                class="elevation-1"
                            >
                                <template slot="items" slot-scope="props">
                                    <td
                                        class="text-xs-center pa-2"
                                        v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                        @click="selectMe(props.item)"
                                    >{{ props.item.rownumber }}</td>
                                    <td
                                        class="text-xs-left pa-2"
                                        v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                        @click="selectMe(props.item)"
                                    >{{ props.item.M_ApproveLevelName }}</td>
                                    <td
                                        class="text-xs-left pa-2"
                                        v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                        @click="selectMe(props.item)"
                                    >
                                        Rp
                                        {{
	                                        oneMoney(props.item.M_ApproveLevelStartTotal)
                                        }}
                                    </td>
                                    <td
                                        class="text-xs-left pa-2"
                                        v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                        @click="selectMe(props.item)"
                                    >
                                        Rp
                                        {{
                                            oneMoney(props.item.M_ApproveLevelEndTotal)
                                        }}
                                    </td>

                                    <td class="text-xs-center pa-2"
                                        v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                        @click="selectMe(props.item)"
                                    >
                                        <v-icon small @click="openUpdateApproveLevel(props.item)"
                                        >edit</v-icon
                                        >
                                        <v-icon small @click="deleteSupplier(props.item)"
                                        >delete</v-icon
                                        >
                                    </td>
                                </template>
                            </v-data-table>
                        </v-flex>
                    </v-layout>
                    <v-divider></v-divider>
                    <v-pagination
                        style="margin-top: 10px; margin-bottom: 10px"
                        v-model="curr_page" :length="xtotal_page"
                    ></v-pagination>
                </v-card>
            </v-flex>
        </v-layout>

        <!-- form -->
        <template>
            <v-layout row justify-center>
                <v-dialog v-model="dialogForm" persistent max-width="40vw">
                    <v-card>
                        <v-card-title class="headline grey lighten-2" primary-title>
                        FORM APPROVE LEVEL
                        </v-card-title>
                        <v-card-text class="pt-2 pb-0">
                            <v-layout wrap>
                                <v-flex xs12 pa-2>
                                    <v-text-field
                                        label="Nama*"
                                        v-model="xname"
                                        hide-details
                                    ></v-text-field>
                                    <p v-if="checkErrorForm('requireName')" class="error pl-2 pr-2" style="color:#fff">Nama harus diisi</p>
                                </v-flex>
                                <v-flex xs12 pa-2>
                                    <v-text-field 
                                        prefix="Rp"
                                        v-model="formattedStartTotal" 
                                        @focus="clearStartDate"
                                        @blur="resetStartDate"
                                        label="Start Total">
                                    </v-text-field>
                                </v-flex>
                                <v-flex xs12 pa-2>
                                    <v-text-field 
                                        prefix="Rp"
                                        v-model="formattedEndTotal" 
                                        @focus="clearEndDate"
                                        @blur="resetEndDate"
                                        label="Start Total">
                                    </v-text-field>
                                </v-flex>
                            </v-layout>
                        </v-card-text>
                        <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="error" flat @click="closeDialogForm()">
                            Tutup
                        </v-btn>
                        <v-btn v-if="xact === 'new'" color="primary" @click="saveForm()">Simpan</v-btn>
                        <v-btn v-if="xact === 'edit'" color="primary"  @click="updateForm()">Simpan Perubahan</v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
            </v-layout>
        </template>
        <!-- end form -->

        <template>
            <v-dialog v-model="dialogdeletealert" max-width="30%">
                <v-card>
                    <v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
                        Peringatan !
                    </v-card-title>
                    <v-card-text class="pt-2 pb-2">
                        <v-layout row>
                            <v-flex xs12 d-flex>
                                <v-layout row>
                                    <v-flex pb-1 xs12>
                                        <v-layout row>
                                            <v-flex pt-2 pr-2 xs12>
                                                Yakin, mau hapus Item : <span class="font-weight-bold">{{ msgalertname }}</span> ?
                                            </v-flex>
                                        </v-layout>
                                    </v-flex>
                                </v-layout>
                            </v-flex>
                        </v-layout>
                    </v-card-text>
                    <v-divider></v-divider>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="error" flat @click="dialogdeletealert = false">
                            Tutup
                        </v-btn>
                        <v-btn color="primary" @click="closeDeleteAlert()">
                            Yakin lah
                        </v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
        </template>

    </div>
</template>

<style scoped>
.date-type-table {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.table.v-table tbody td,
table.v-table tbody th {
  height: 40px;
}

.table.v-table thead tr {
  height: 40px;
}

.scroll-container {
  scroll-padding: 50px 0 0 50px;
}
</style>

<script>
module.exports = {
    components: {
        "dialog-form-voucher": httpVueLoader("./dialogFormVoucher.vue"),
        "one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue"),
        "one-dialog-error": httpVueLoader("../../common/oneDialogError.vue")
    },
    data() {
        return {
            xname: "",
            xstartTotal: 0,
            xendTotal: 0,
            xid: 0,
            dialogdeletealert: false,
            msgalertname: "",
            codeDepartment: "",
            headers: [
                {
                    text: "NO",
                    align: "left",
                    sortable: false,
                    value: "no",
                    width: "10%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "NAMA",
                    align: "left",
                    sortable: false,
                    value: "date",
                    width: "30%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "START TOTAL",
                    align: "left",
                    sortable: false,
                    value: "total",
                    width: "25%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "END TOTAL",
                    align: "left",
                    sortable: false,
                    value: "total",
                    width: "25%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "AKSI",
                    align: "left",
                    sortable: false,
                    value: "status",
                    width: "10%",
                    class: "blue lighten-3 white--text",
                },
            ],
        }
    },
    mounted() {
        this.$store.dispatch("approve/search")
    },
    computed: {
        formattedStartTotal: {
            get() {
                return this.oneMoney(this.xstartTotal);
            },
            set(value) {
                // Hilangkan titik dan koma, ubah jadi number
                let raw = value.replace(/\./g, '').replace(',', '.');
                this.xstartTotal = parseFloat(raw) || 0;
            }
        },
        formattedEndTotal: {
            get() {
                return this.oneMoney(this.xendTotal);
            },
            set(value) {
                // Hilangkan titik dan koma, ubah jadi number
                let raw = value.replace(/\./g, '').replace(',', '.');
                this.xendTotal = parseFloat(raw) || 0;
            }
        },
        approvelevels() {
            return this.$store.state.approve.approvelevels
        },
        isLoading() {
            return this.$store.state.approve.search_status == 1
        },
        xsearch: {
            get() {
                return this.$store.state.approve.xsearch
            },
            set(val) {
                this.$store.commit("approve/update_xsearch", val)
            }
        },
        curr_page: {
            get() {
                return this.$store.state.approve.current_page
            },
            set(val) {
                this.$store.commit("approve/update_current_page", val)
                this.$store.commit("approve/update_last_id", -1)
                this.$store.dispatch("approve/search")
            }
        },
        xtotal_page: {
            get() {
                return this.$store.state.approve.total_page
            },
            set(val) {
                this.$store.commit("approve/update_total_page", val)
            }
        },
        dialogForm: {
            get() {
                return this.$store.state.approve.dialog_form
            },
            set(val) {
                this.$store.commit("approve/update_dialog_form", val)
            }
        },
        xact: {
            get() {
                return this.$store.state.approve.act
            },
            set(val) {
                this.$store.commit("approve/update_act", val)
            }
        },
        snackbar: {
            get() {
                return this.$store.state.approve.alert_success
            },
            set(val) {
                this.$store.commit("approve/update_alert_success", val)
            }
        },
        msgSnackbar() {
            return this.$store.state.approve.msg_success;
        },
        dialog_error: {
            get() {
                return this.$store.state.approve.alert_error
            },
            set(val) {
                this.$store.commit("approve/update_alert_error", val)
            },
        },
        msgError() {
            return this.$store.state.approve.save_error_message
        },
    },
    methods: {
        roundToThreeSignificantDigits(num) {
            if (num === 0) return 0;
            
            // Hitung jumlah digit
            const absNum = Math.abs(num);
            const magnitude = Math.floor(Math.log10(absNum)) + 1;
            
            // Jika kurang dari 3 digit, tidak perlu dibulatkan
            if (magnitude <= 3) return num;
            
            // Hitung faktor pembulatan
            const factor = Math.pow(10, magnitude - 3);
            
            // Bulatkan
            return Math.round(num / factor) * factor;
        },
        oneMoney(value){
            //return one_money(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, ".");
            }
        },
        convertMoney(money){
            return one_money(money)
        },
        formatAngka(nilai) {
            // Jika tidak ada nilai
            if (!nilai) return '';
            
            try {
                // Ubah ke string
                let strNilai = String(nilai);
                
                // Jika berisi titik desimal
                if (strNilai.includes('.')) {
                    // Split bagian utama dan desimal
                    let bagian = strNilai.split('.');
                    let utama = bagian[0];
                    let desimal = bagian[1];
                    
                    // Format bagian utama
                    utama = utama.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
                    
                    // Kembalikan gabungan
                    return utama + ',' + desimal;
                } else {
                    // Tidak ada desimal, hanya format bagian utama
                    return strNilai.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
                }
            } catch (error) {
                console.error("Error formatting:", error);
                return nilai;
            }
        },
        isSelected(p) {
            return p.M_ApproveLevelID == this.$store.state.approve.selected_approvelevel.M_ApproveLevelID
        },
        selectMe(sc) {
            console.log(sc)
            this.$store.commit("approve/update_selected_approvelevel", sc)
            this.$store.dispatch("approveuser/getUser", {
                approveId: sc.M_ApproveLevelID,
                current_page: this.$store.state.approveuser.current_page,
                search: this.$store.state.approveuser.xsearch,
            })
        },
        thr_search: _.debounce(function () {
            this.$store.dispatch("approve/search")
        }, 1000),
        mainTableSearch() {
            this.$store.dispatch("approve/search")
            this.$store.commit("approve/update_selected_approvelevel", {})
        },
        openDialogApproveLevel() {
            this.$store.commit("approve/update_dialog_form", true)
            this.$store.commit("approve/update_act", "new")
            this.$store.commit("approve/update_errors", [])
            this.xname = ""
            this.xstartTotal = 0
            this.xendTotal = 0
        },
        closeDialogForm() {
            this.$store.commit("approve/update_dialog_form", false)
        },
        // check error form
        checkErrorForm(value) {
            var errors = this.$store.state.approve.errors
            if (errors.includes(value)) {
                return true
            } else {
                return false
            }
        },

        clearStartDate() {
            if (this.xstartTotal === 0) {
                this.xstartTotal = ''
            }
        },
        resetStartDate() {
            if (this.xstartTotal === '' || this.xstartTotal === null) {
                this.xstartTotal = 0
            }
        },
        
        clearEndDate() {
            if (this.xendTotal === 0) {
                this.xendTotal = ''
            }
        },
        resetEndDate() {
            if (this.xendTotal === '' || this.xendTotal === null) {
                this.xendTotal = 0
            }
        },

        // save
        saveForm() {
            this.$store.commit("approve/update_errors", [])
            var errors = this.$store.state.approve.errors
            
            if(_.isEmpty(this.xname)){
                errors.push("requireName")
            }

            if (errors.length === 0) {
                this.$store.commit("approve/update_errors", [])

                var prm = {
                    name: this.xname,
                    startTotal: this.xstartTotal,
                    endTotal: this.xendTotal
                }
                this.$store.dispatch("approve/save", prm)  
            }
        },

        openUpdateApproveLevel(val) {
            this.$store.commit("approve/update_errors", [])
            this.$store.commit("approve/update_dialog_form", true)
            this.$store.commit("approve/update_act", "edit")
            this.xname = val.M_ApproveLevelName
            this.xstartTotal = val.M_ApproveLevelStartTotal
            this.xendTotal = val.M_ApproveLevelEndTotal
            this.xid = val.M_ApproveLevelID
        },

        updateForm() {
            this.$store.commit("approve/update_errors", [])
            var errors = this.$store.state.approve.errors
            
            if(_.isEmpty(this.xname)){
                errors.push("requireName")
            }

            if (errors.length === 0) {
                this.$store.commit("approve/update_errors", [])

                var prm = {
                    name: this.xname,
                    startTotal: this.xstartTotal,
                    endTotal: this.xendTotal,
                    approveId: this.xid
                }
                this.$store.dispatch("approve/update", prm)  
            }
        },

        deleteSupplier(val) {
            this.xid = val.M_ApproveLevelID
            this.msgalertname = val.M_ApproveLevelName
            this.dialogdeletealert = true
        },
        closeDeleteAlert() {
            this.dialogdeletealert = false
            this.$store.dispatch("approve/deleteDep", {
                approveId: this.xid
            })
        }
    },
    watch: {
        // xsearch(val, old) {
        //     this.xsearch = val
        //     this.thr_search()
        // },
    }
}
</script>