<template>
    <div>
        <v-dialog v-model="pengeluaranbarang_dialog" persistent width="70vw">
            <v-card>
                <v-card-title class="headline grey lighten-2" primary-title>
                    {{ opp_type == "add" ? 'FORM JURNAL PENGELUARAN BARANG': 'EDIT FORM JURNAL PENGELUARAN BARANG' }}
                </v-card-title>

                <v-card-text>
                    <v-layout wrap>
                        <v-flex xs12>
                            <v-layout>
                                <v-flex xs6 class="px-1 mb-2">
                                    <v-text-field
                                        label="COMPANY" v-model="input_company"
                                        readonly hide-details outline
                                    ></v-text-field>
                                </v-flex>
                                <v-flex class="px-1 mb-2">
                                    <v-text-field
                                        label="TIPE JURNAL" v-model="selected_jurnal_type.JurnalTypeName"
                                        readonly hide-details outline
                                    ></v-text-field>
                                    <p v-if="alert_kosong && selected_jurnal_type.JurnalTypeName == ''" class="error pl-2 pr-2" style="color:#fff">Tipe jurnal kosong</p>
                                </v-flex>
                            </v-layout>
                        </v-flex>
                        <v-flex xs12>
                            <v-layout>
                                <v-flex xs6 class="px-1 mb-2">
                                    <v-text-field
                                        label="REGIONAL" v-model="input_regional"
                                        readonly hide-details outline
                                    ></v-text-field>
                                </v-flex>
                                <v-flex class="px-1 mb-2">
                                    <v-layout>
                                        <v-flex xs6>
                                            <v-menu
                                                v-model="menufilterdate" :close-on-content-click="false" :nudge-right="40" lazy
                                                transition="scale-transition" offset-y full-width max-width="290px"
                                                min-width="290px" :disabled="!IsPeriodeSelected"
                                            >
                                                <template v-slot:activator="{ on }">
                                                    <v-text-field 
                                                        v-model="filterComputedDateFormatted" class="mr-2" label="Tanggal"
                                                        outline hide-details readonly v-on="on" :disabled="!IsPeriodeSelected" 
                                                        @blur="date = deFormatedDate(filterComputedDateFormatted)"
                                                    ></v-text-field>
                                                </template>
                                                <v-date-picker 
                                                    no-title v-model="input_date" @input="menufilterdate = false"
                                                    :min="periode_start_date" :max="periode_end_date"
                                                ></v-date-picker>
                                            </v-menu>
                                        </v-flex>
                                        <v-flex>
                                            <v-autocomplete 
                                                label="Periode" :items="list_periode" v-model="selected_periode"
                                                :search-input.sync="search_periode" hide-details
                                                auto-select-first no-filter item-text="periodeName" outline
                                                return-object :loading="search_status" no-data-text="Pilih Periode"
                                            >
                                                <template slot="item" slot-scope="{ item }">
                                                    <v-list-tile-content>
                                                        <v-list-tile-title v-text="item.periodeName"></v-list-tile-title>
                                                        <v-list-tile-sub-title v-text="item.periode"></v-list-tile-sub-title>
                                                    </v-list-tile-content>
                                                </template>
                                            </v-autocomplete>
                                            <p v-if="alert_kosong && Object.keys(selected_periode).length == 0" class="error pl-2 pr-2" style="color:#fff">Periode masih kosong</p>
                                        </v-flex>
                                    </v-layout>
                                </v-flex>
                            </v-layout>
                        </v-flex>
                        <v-flex xs12>
                            <v-layout>
                                <v-flex xs6 class="px-1 mb-2">
                                    <v-text-field
                                        label="CABANG" v-model="input_cabang"
                                        readonly hide-details outline
                                    ></v-text-field>
                                </v-flex>
                                <v-flex class="px-1 mb-2">
                                    <v-text-field
                                        label="JUDUL" v-model="input_title"
                                        hide-details outline
                                    ></v-text-field>
                                    <p v-if="alert_kosong && input_title == ''" class="error pl-2 pr-2" style="color:#fff">Title masih kosong</p>
                                </v-flex>
                            </v-layout>
                        </v-flex>
                        <v-flex>
                            <v-layout>
                                <v-textarea
                                    v-model="input_description" name="input-7-1" label="DESKRIPSI"
                                    hide-details outline
                                ></v-textarea>
                            </v-layout>
                        </v-flex>

                    </v-layout>

                    <v-layout class="pt-3 pb-1">
                        <v-flex text-xs-right>
                            <v-btn 
                                color="blue" 
                                class="white--text" @click="openDetailDialog()"
                            >TAMBAH</v-btn>
                        </v-flex>
                    </v-layout>

                    <v-layout row wrap>
                        <v-flex xs12>
                            <v-data-table
                                :headers="table_headers" :items="table_detail"
                                hide-actions class="elevation-1"
                            >
                                <template slot="items" slot-scope="props">
                                    <td class="text-xs-center pa-2">{{ props.item.coano }}</td>
                                    <td class="text-xs-center pa-2">{{ props.item.coadesc }}</td>
                                    <td class="text-xs-center pa-2">{{ oneMoney(props.item.debet) }}</td>
                                    <td class="text-xs-center pa-2">{{ oneMoney(props.item.kredit) }}</td>
                                    <td class="text-xs-center pa-2">
                                        <v-icon small @click="deleteDetail(props.index)">delete</v-icon>
                                    </td>
                                </template>
                                <template v-slot:footer>
                                    <tr>
                                        <td colspan="2" width="65%" class="pa-2 font-weight-bold">TOTAL</td>
                                        <td width="15%" class="text-xs-center pa-2 font-weight-bold">{{ oneMoney(summary_detail.total_debet) }}</td>
                                        <td width="15%" class="text-xs-center pa-2 font-weight-bold">{{ oneMoney(summary_detail.total_kredit) }}</td>
                                        <td width="5%" class="text-xs-right pa-2 font-weight-bold"></td>
                                    </tr>
                                    <tr>
                                        <td colspan="3" class="font-weight-bold pa-2">BALANCE</td>
                                        <td width="15%" class="text-xs-right pa-2 font-weight-bold">{{ oneMoney(summary_detail.total_balance) }}</td>
                                        <td width="5%" class="font-weight-bold text-xs-right pa-2"></td>
                                    </tr>
                                </template>
                            </v-data-table>
                        </v-flex>
                    </v-layout>
                </v-card-text>

                <v-divider></v-divider>

                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="error" flat @click="closeDialog()">TUTUP</v-btn>
                    <v-btn color="primary" @click="simpanJurnal()">SIMPAN</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>

        <template>
            <v-dialog v-model="detail_dialog" persistent width="40vw">
                <v-card>
                    <v-card-title class="headline grey lighten-2" primary-title>FORM DETAIL</v-card-title>
                    <v-card-text>
                        <v-layout wrap>
                            <v-flex xs12 class="px-1 mb-2">
                                <v-autocomplete
                                    label="COA" :items="list_coa" v-model="selected_coa"
                                    :search-input.sync="search_coa" hide-details
                                    no-filter item-text="display" outline return-object
                                    :loading="search_status" no-data-text="Pilih Coa"
                                >
                                </v-autocomplete>
                                <p v-if="alert_kosong && Object.keys(selected_coa).length == 0" class="error pl-2 pr-2" style="color:#fff">Coa masih kosong</p>
                            </v-flex>
                            <v-flex xs12 class="px-1 mb-2">
                                <v-text-field 
                                    prefix="Rp"
                                    label="DEBET" v-model="formatted_input_detail_debet"
                                    outline hide-details>
                                </v-text-field>
                            </v-flex>
                            <v-flex xs12 class="px-1 mb-2">
                                <v-text-field 
                                    prefix="Rp"
                                    label="KREDIT" v-model="formatted_input_detail_kredit"
                                    outline hide-details>
                                </v-text-field>
                            </v-flex>
                        </v-layout>
                    </v-card-text>
                    <v-divider></v-divider>
                    
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="error" flat @click="closeDetailDialog()">
                            BATAL
                        </v-btn>
                        <v-btn color="primary" @click="tambahDetail()">TAMBAH</v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
        </template>

        <v-snackbar v-model="crud_jurnal.state" :timeout="5000" :multi-line="false" :vertical="false" :top="true" :color="crud_jurnal.color">
            {{ crud_jurnal.msg }}
            <v-btn flat @click="closeSnackbar(false)">Tutup</v-btn>
        </v-snackbar>
    </div>
</template>


<style scoped></style>

<script>
    module.exports= {
        name: "pengeluaranBarang",
        components: {
            
        },
        mounted() {
            this.$store.dispatch("pengeluaranbarang/getperiode", {search: ""})
        },
        data: () => ({
            menufilterdate: false,
            search_periode: "",
            search_coa: "",
            date: new Date().toISOString().substr(0, 10),
            table_headers: [
                {
                    text: "AKUN",
                    align: "center",
                    sortable: false,
                    value: "action",
                    width: "30%",
                    class: "pa-2 pl-2 blue lighten-3 white--text",
                },
                {
                    text: "DESKRIPSI",
                    align: "center",
                    sortable: false,
                    value: "mr",
                    width: "35%",
                    class: "pa-2 blue lighten-3 white--text",
                },
                {
                    text: "DEBET",
                    align: "center",
                    sortable: false,
                    value: "lab",
                    width: "15%",
                    class: "pa-2 blue lighten-3 white--text",
                },
                {
                    text: "KREDIT",
                    align: "center",
                    sortable: false,
                    value: "lab",
                    width: "15%",
                    class: "pa-2 blue lighten-3 white--text",
                },
                {
                    text: "AKSI",
                    align: "center",
                    sortable: false,
                    value: "lab",
                    width: "5%",
                    class: "pa-2  blue lighten-3 white--text",
                },
            ],
            alert_kosong: false,
        }),
        computed: {
            formatted_input_detail_debet: {
                get() {
                    return this.oneMoney(this.input_detail_debet);
                },
                set(value) {
                    // Hilangkan titik dan koma, ubah jadi number
                    let raw = value.replace(/\./g, '').replace(',', '.');
                    this.input_detail_debet = parseFloat(raw) || 0;
                }
            },
            formatted_input_detail_kredit: {
                get() {
                    return this.oneMoney(this.input_detail_kredit);
                },
                set(value) {
                    // Hilangkan titik dan koma, ubah jadi number
                    let raw = value.replace(/\./g, '').replace(',', '.');
                    this.input_detail_kredit = parseFloat(raw) || 0;
                }
            },
            opp_type() {
                return this.$store.state.pengeluaranbarang.opp_type
            },
            user() {
                return this.$store.state.pengeluaranbarang.user;
            },
            input_company() {
                return this.$store.state.pengeluaranbarang.input_company
            },
            input_regional() {
                return this.$store.state.pengeluaranbarang.input_regional
            },
            input_cabang() {
                return this.$store.state.pengeluaranbarang.input_cabang
            },
            pengeluaranbarang_dialog: {
                get() {
                    return this.$store.state.pengeluaranbarang.keluar_barang_dialog;
                },
                set(val) {
                    this.$store.commit("pengeluaranbarang/update_pengeluaran_barang_dialog", val)
                }
            },
            search_status() {
                return this.$store.state.pengeluaranbarang.search_status == 1
            },
            selected_jurnal_type() {
                return this.$store.state.pengeluaranbarang.selected_jurnal_type
            },
            periode_start_date: {
                get() {
                    return this.$store.state.pengeluaranbarang.periode_start_date;
                },
                set(val) {
                    this.$store.commit("pengeluaranbarang/update_periode_start_date", val)
                }
            },
            periode_end_date: {
                get() {
                    return this.$store.state.pengeluaranbarang.periode_end_date;
                },
                set(val) {
                    this.$store.commit("pengeluaranbarang/update_periode_end_date", val)
                }
            },
            input_date: {
                get() {
                    return this.$store.state.pengeluaranbarang.input_date
                },
                set(val) {
                    this.$store.commit("pengeluaranbarang/update_input_date", val)
                }
            },
            input_title: {
                get() {
                    return this.$store.state.pengeluaranbarang.input_title
                },
                set(val) {
                    this.$store.commit("pengeluaranbarang/update_input_title", val)
                }
            },
            input_description: {
                get() {
                    return this.$store.state.pengeluaranbarang.input_description
                },
                set(val) {
                    this.$store.commit("pengeluaranbarang/update_input_description", val)
                }
            },
            filterComputedDateFormatted() {
                return this.formatDate(this.input_date)
            },
            IsPeriodeSelected() {
                return this.periode_start_date && this.periode_end_date
            },
            list_periode() {
                return this.$store.state.pengeluaranbarang.list_periode
            },
            selected_periode: {
                get() {
                    return this.$store.state.pengeluaranbarang.selected_periode
                },
                set(val) {
                    this.$store.commit("pengeluaranbarang/update_selected_periode", val)
                }
            },
            detail_dialog: {
                get() {
                    return this.$store.state.pengeluaranbarang.detail_dialog
                },
                set(val) {
                    this.$store.commit("pengeluaranbarang/update_detail_dialog", val)
                }
            },
            table_detail() {
                return this.$store.state.pengeluaranbarang.table_detail
            },
            summary_detail() {
                return this.$store.state.pengeluaranbarang.summary_detail
            },
            list_coa(){
                return this.$store.state.pengeluaranbarang.list_coa
            },
            selected_coa: {
                get() {
                    return this.$store.state.pengeluaranbarang.selected_coa
                },
                set(val) {
                    this.$store.commit("pengeluaranbarang/update_selected_coa", val)
                }
            },
            input_detail_debet: {
                get() {
                    return this.$store.state.pengeluaranbarang.input_detail_debet
                },
                set(val) {
                    this.$store.commit("pengeluaranbarang/update_input_detail_debet", val)
                }
            },
            input_detail_kredit: {
                get() {
                    return this.$store.state.pengeluaranbarang.input_detail_kredit
                },
                set(val) {
                    this.$store.commit("pengeluaranbarang/update_input_detail_kredit", val)
                }
            },
            crud_jurnal_status: {
                get() {
                    return this.$store.state.pengeluaranbarang.crud_jurnal_status
                },
                set(val) {
                    this.$store.commit("pengeluaranbarang/update_crud_jurnal_status", val)
                }
            },
            crud_jurnal: {
                get() {
                    return this.$store.state.pengeluaranbarang.crud_jurnal
                },
                set(val) {
                    this.$store.commit("pengeluaranbarang/update_crud_jurnal", val)
                }
            }
        },
        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;
                }
            },
            closeDialog() {
                this.alert_kosong = false
                this.$store.commit("pengeluaranbarang/update_selected_jurnal_type", {})
                this.$store.commit("pengeluaranbarang/update_selected_periode", {})
                this.$store.commit("pengeluaranbarang/update_input_title", "")
                this.$store.commit("pengeluaranbarang/update_input_description", "")
                this.selected_coa = {}
                this.input_detail_debet = 0
                this.input_detail_kredit = 0
                this.$store.commit("pengeluaranbarang/update_pengeluaran_barang_dialog", false)
                this.$store.commit("jurnalumum/update_x_drop_tipe_jurnal", {});
            },
            openDetailDialog() {
                let tipejurnal = this.selected_jurnal_type
                let periode = this.selected_periode
                let title = this.input_title
                if (Object.keys(tipejurnal).length == 0 || Object.keys(periode).length == 0 || title == "") {
                    this.alert_kosong = true
                    return
                }

                this.$store.commit("pengeluaranbarang/update_list_coa", [])
                this.selected_coa = {}
                this.input_detail_debet = 0
                this.input_detail_kredit = 0
                this.detail_dialog = true
                this.alert_kosong = false
            },
            closeDetailDialog() {
                this.selected_coa = {}
                this.input_detail_debet = 0
                this.input_detail_kredit = 0
                this.detail_dialog = false
            },
            closeSnackbar(state) {
                let a = {
                    state: state,
                    msg: "",
                    color: ""
                }
                this.crud_jurnal = a
            },
            simpanJurnal() {
                if (this.summary_detail.total_kredit != this.summary_detail.total_debet) {
                    let a = {
                        state: true,
                        msg: "Balance kredit dan debet tidak sama",
                        color: "warning"
                    }
                    this.crud_jurnal = a
                    return
                }

                let obj = {
                    periodeid: this.selected_periode.periodeID,
                    title: this.input_title,
                    description: this.input_description,
                    date: this.input_date,
                    jurnaltypeid: this.selected_jurnal_type.JurnalTypeID,
                    detail: this.table_detail
                }

                let operation = this.$store.state.pengeluaranbarang.opp_type
                if (operation == "add") {
                    this.$store.dispatch("pengeluaranbarang/simpan_jurnal", obj)   
                } else if (operation == "edit") {
                    obj.jurnalid = this.$store.state.pengeluaranbarang.current_jurnal.jurnalID
                    this.$store.dispatch("pengeluaranbarang/simpan_edit_jurnal", obj)
                }
            },
            tambahDetail() {
                if (Object.keys(this.selected_coa).length == 0) {
                    this.alert_kosong = true
                    return
                }

                let obj = {
                    coaid: this.selected_coa.id,
                    coano: this.selected_coa.number,
                    coadesc: this.selected_coa.keterangan,
                    debet: this.input_detail_debet,
                    kredit: this.input_detail_kredit
                }

                this.$store.dispatch("pengeluaranbarang/add_detail_table", obj)
                this.alert_kosong = false
                this.detail_dialog = false
            },
            deleteDetail(index) {
                this.$store.dispatch("pengeluaranbarang/del_detail_table", index)
            },
            formatDate(date) {
                if (!date) return null

                const [year, month, day] = date.split('-')
                return `${day}-${month}-${year}`
            },
            deFormatedDate(date) {
                if (!date) return null

                const [day, month, year] = date.split('-')
                return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
            },
            fn_search_periode: _.debounce(function () {
                this.$store.dispatch("pengeluaranbarang/getperiode", {search: this.search_periode})
            }, 1000),
            fn_search_coa: _.debounce(function() {
                this.$store.dispatch("pengeluaranbarang/getcoa", {search: this.search_coa})
            }, 1000),
            formatCurrency(val) {
                let price = parseFloat(val);
                let IDR = new Intl.NumberFormat("id-ID", {
                    style: "currency",
                    currency: "IDR",
                });
                return `${IDR.format(price)}`;
            },
        },
        watch: {
            search_periode(val, old) {
                if (val == old) return;
                if (!val) return;
                if (val.length < 1) return;
                if (this.$store.state.pengeluaranbarang.search_status == 1) return;
                this.fn_search_periode();
            },
            search_coa(val, old) {
                if (val == old) return;
                if (!val) return;
                if (val.length < 1) return;
                if (this.$store.state.pengeluaranbarang.search_status == 1) return;
                this.fn_search_coa();
            }
        },
    };
</script>