<template>
      <v-layout class="fill-height" column>
            <v-card class="mb-2 pa-2 searchbox">
                <v-layout>
                    <v-menu
                        class="xs3 pr-2" v-model="menustartdate"
                        :close-on-content-click="false" :nudge-right="40"
                        lazy transition="scale-transition" offset-y
                        full-width max-width="290px" min-width="290px"
                    >
                        <template v-slot:activator="{ on }">
                            <v-text-field
                                class="mt-1" v-model="startDateFormatted"
                                readonly v-on="on" label="Tgl. Awal" outline
                            ></v-text-field>
                        </template>
                        <v-date-picker v-model="init_sdate" no-title @input="menustartdate = false"></v-date-picker>
                    </v-menu>
                    <v-menu
                        class="xs3 pl-2" v-model="menuenddate"
                        :close-on-content-click="false" :nudge-right="40"
                        lazy transition="scale-transition" offset-y
                        full-width max-width="290px" min-width="290px"
                    >
                        <template v-slot:activator="{ on }">
                            <v-text-field
                                class="mt-1" v-model="endDateFormatted"
                                readonly v-on="on" label="Tgl. Akhir" outline
                            ></v-text-field>
                        </template>
                        <v-date-picker v-model="init_edate" no-title @input="menuenddate = false"></v-date-picker>
                    </v-menu>
                    <v-text-field
                        class="xs3 ma-1" label="Supplier" placeholder="Cari..."
                        outline v-model="searchsupplier" hide-details
                    ></v-text-field>
                    <v-text-field
                        class="xs3 ma-1" label="No. Bayar / No. Tagihan" placeholder="Cari..."
                        outline v-model="searchnamelab" hide-details
                    ></v-text-field>
                    <v-select
                        class="xs3 mini-select ma-1" :items="statuses" item-text="name"
                        return-object v-model="status" label="Status" outline hide-details
                    ></v-select>
                    <span @click="searchPatient()" class="icon-medium-fill-base xs1 white--text success iconsearch-search"></span>
                    <v-btn @click="paymulti()" v-if="total_payment != 0" small color="green" dark>Bayar (Multi)</v-btn>
                    <!-- <v-btn @click="changeBtnFlagCourier(xisauto)" v-if="xisauto === 'N'" small color="error">
                            Single</v-btn>
                    <v-btn @click="changeBtnFlagCourier(xisauto)" v-if="xisauto === 'Y'" small color="success">
                            Multiple</v-btn> -->
                </v-layout>
            </v-card>

            <v-card>
                <v-layout row>
                    <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                        <v-data-table :headers="headers" :items="bills" :loading="isLoading" hide-actions class="elevation-1">
                            <template v-slot:headers="props">
                                <tr>
                                    <th style="width:5px" class="text-xs-left blue lighten-3 white--text">
                                        <v-checkbox
                                            v-if="status.value === 'N'" v-model="bar_chx_all"
                                            @change="changeCbxAll(bar_chx_all)" hide-details
                                            style="padding-top:0;margin-top:0" color="blue"
                                        ></v-checkbox>
                                    </th>
                                    <th
                                        v-for="header in props.headers" :key="header.text"
                                        :class="header.class" :width="header.width"
                                    >
                                        {{ header.text }}
                                    </th>
                                </tr>
                            </template>
                                <template slot="items" slot-scope="props">
                                    <td
                                        class="text-xs-left" @click="selectMe(props.item)"
                                        v-bind:class="{'amber lighten-4':isSelected(props.item)}"
                                    >
                                        <v-checkbox
                                            v-if="status.value === 'N'" style="padding-top:0;margin-top:0" color="blue"
                                            hide-details v-model="props.item.chex" @change="checkTop(props.item)"
                                        ></v-checkbox>
                                    </td>
                                    <td
                                        class="text-xs-left pa-2" @click="selectMe(props.item)"
                                        v-bind:class="{'amber lighten-4':isSelected(props.item)}"
                                    >
                                        {{ props.item.tanggalbayar}}
                                    </td>
                                    <td
                                        class="text-xs-left pa-2" @click="selectMe(props.item)"
                                        v-bind:class="{'amber lighten-4':isSelected(props.item)}"
                                    >
                                        {{ props.item.SupplierInvoiceNumber}}
                                        <p><v-btn v-if="props.item.SupplierInvoiceIsLunas === 'Y'" small color="success">Lunas</v-btn></p>
                                    </td>
                                    <td
                                        class="pa-2" @click="selectMe(props.item)"
                                        v-bind:class="{'amber lighten-4':isSelected(props.item)}"
                                    >
                                        {{ props.item.SupplierPaymentNumber}}
                                        <p style="color:#800000" class="mb-0 font-weight-bold caption">{{props.item.SupplierPaymentCashierNumber}}</p>
                                    </td>
                                    <td
                                        class="text-xs-left pa-2" @click="selectMe(props.item)"
                                        v-bind:class="{'amber lighten-4':isSelected(props.item)}"
                                    >
                                        {{ props.item.SupplierName}}
                                    </td>
                                    <td
                                        class="text-xs-left pa-2" @click="selectMe(props.item)"
                                        v-bind:class="{'amber lighten-4':isSelected(props.item)}"
                                    >
                                        {{ props.item.SupplierInvoiceSupplierInvoiceNumber}}
                                        <p>{{ props.item.tanggalinvoice}}</p>
                                    </td>
                                    <td
                                        class="text-xs-left pa-2" @click="selectMe(props.item)"
                                        v-bind:class="{'amber lighten-4':isSelected(props.item)}"
                                    >
                                        {{ convertMoney(props.item.totalbill)}}
                                    </td>
                                    <td
                                        class="text-xs-left pa-2" @click="selectMe(props.item)"
                                        v-bind:class="{'amber lighten-4':isSelected(props.item)}"
                                    >
                                        {{ convertMoney(props.item.paid)}}
                                    </td>
                                </template>
                        </v-data-table>
                        <v-divider></v-divider>
                        <v-pagination style="margin-top:10px;margin-bottom:10px" v-model="curr_page" :length="xtotal_page"></v-pagination>
                    </v-flex>
                </v-layout>
            </v-card>

            <v-dialog v-model="xdialogmulti" max-width="65%" persistent>
                <v-card>
                    <v-card-title class="headline success pt-2 pb-2" primary-title>
                        <h4 style="color:#FFEBEE">Pembayaran (Multi)</h4>
                    </v-card-title>

                    <v-card-text class="pt-2 pb-2">
                        <!-- <v-layout row pa-2 align-center wrap> -->
                        <!-- <v-flex xs6>
                            <v-layout row>
                                <v-flex xs12>
                                    <div>Total : <kbd>Rp. {{convertMoney(this.$store.state.bill.total_payment)}}</kbd></div>
                                </v-flex>
                            </v-layout>
                        </v-flex> -->

                        <!-- </v-layout> -->
                        <v-layout row mt-3>
                            <v-flex xs6 pr-1>
                                <v-autocomplete
                                    label="Account" :items="xpaymenttypes" v-model="xpaymenttype"
                                    :search-input.sync="a_coa_search" hide-details auto-select-first no-filter
                                    item-text="coaDescription" outline return-object no-data-text="Cari Account">
                                        <template slot="item" slot-scope="{ item }">
                                            <v-list-tile-content>
                                                <v-list-tile-title v-text="item.coaDescription"></v-list-tile-title>
                                                <v-list-tile-sub-title v-text="item.coaAccountNo"></v-list-tile-sub-title>
                                            </v-list-tile-content>
                                        </template>
                                </v-autocomplete>
                            </v-flex>
                            <v-flex xs6 pl-1>
                                <v-text-field placeholder="Keterangan" v-model="xketerangan" outline></v-text-field>
                            </v-flex>
                        </v-layout>

                        <v-layout>
                            <v-flex xs12>
                                <v-data-table
                                    :headers="headersmulti" :items="selected_multibill"
                                    :loading="isLoading" class="elevation-1"
                                >
                                    <template slot="items" slot-scope="props">
                                        <td
                                            class="text-xs-left pa-2" @click="selectMe(props.item)"
                                            v-bind:class="{'amber lighten-4':isSelected(props.item)}"
                                        >
                                            {{ props.item.tanggalbayar}}
                                        </td>
                                        <td
                                            class="text-xs-left pa-2"  @click="selectMe(props.item)"
                                            v-bind:class="{'amber lighten-4':isSelected(props.item)}"
                                        >
                                            {{ props.item.SupplierInvoiceNumber}}
                                            <p><v-btn v-if="props.item.SupplierInvoiceIsLunas === 'Y'" small color="success">Lunas</v-btn></p>
                                        </td>
                                        <td
                                            class="pa-2" @click="selectMe(props.item)"
                                            v-bind:class="{'amber lighten-4':isSelected(props.item)}"
                                        >
                                            {{ props.item.SupplierPaymentNumber}}
                                        </td>
                                        <td
                                            class="text-xs-left pa-2" @click="selectMe(props.item)"
                                            v-bind:class="{'amber lighten-4':isSelected(props.item)}"
                                        >
                                            {{ props.item.SupplierName}}
                                        </td>
                                        <td
                                            class="text-xs-left pa-2" @click="selectMe(props.item)"
                                            v-bind:class="{'amber lighten-4':isSelected(props.item)}"
                                        >
                                            {{ props.item.SupplierInvoiceSupplierInvoiceNumber ?? "-"}}
                                            <p>{{ props.item.tanggalinvoice}}</p>
                                        </td>
                                        <td
                                            class="text-xs-left pa-2" @click="selectMe(props.item)"
                                            v-bind:class="{'amber lighten-4':isSelected(props.item)}"
                                        >
                                            Rp. {{ convertMoney(props.item.totalbill)}}
                                        </td>
                                        <!-- <td
                                            class="text-xs-left pa-2" @click="selectMe(props.item)"
                                            v-bind:class="{'amber lighten-4':isSelected(props.item)}"
                                        >
                                            <v-text-field
                                                style="margin-center:0;padding-center:0" v-model="props.item.xrounding"
                                                @change="updateRounding(props.item)" hide-details
                                            ></v-text-field>
                                        </td> -->
                                    </template>
                                    <template v-slot:footer>
                                        <tr>
                                            <td colspan="5" class="text-xs-left pa-2">
                                                <strong>TOTAL</strong>
                                            </td>
                                            <td colspan="1" class="text-xs-left pa-2">
                                                <strong>
                                                     Rp. {{ convertMoney(total_payment) }}
                                                </strong>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="5" class="text-xs-left pa-2">
                                                <strong>TOTAL DENGAN PEMBULATAN</strong>
                                            </td>
                                            <td colspan="1" class="text-xs-left pa-2">
                                                <v-text-field
                                                    v-model="displayTotalRounding" outline prefix="Rp."
                                                    hide-details label="Total (setelah pembulatan)"
                                                    @blur="onBlurRounding" @focus="onFocusRounding"
                                                ></v-text-field>
                                            </td>
                                        </tr>
                                    </template>
                                </v-data-table>
                                <v-divider></v-divider>
                            </v-flex>
                        </v-layout>
                    </v-card-text>

                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="blue" dark v-if="this.xpaymenttype.coaID" @click="addpaymulti()">
                            Bayar
                        </v-btn>
                        <v-btn color="error" dark  @click="closepaymulti()">
                            Tutup
                        </v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>

            <v-dialog v-model="xdialogpaysuccess" max-width="30%" persistent>
                <v-card>
                    <v-card-title class="headline success pt-2 pb-2" primary-title>
                        <h4 style="color:#FFEBEE">Pembayaran Berhasil</h4>
                    </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 v-html="xmsgpaysuccess" xs12>

                                            </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="closeDialogPaySuccess(false)">
                            Tutup
                        </v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
            <one-dialog-alert :status="openalertnopay" :msg="msgalertnopay" @forget-dialog-alert="forgetAlertNoPay()" @close-dialog-alert="closeAlertNoPay()"></one-dialog-alert>
      </v-layout>
</template>


<style scoped>
      .searchbox .v-input.v-text-field .v-input__slot {
            min-height: 40px;
      }
      .searchbox .v-btn {
            min-height: 40px;
      }
      table.v-table tbody td,
      table.v-table tbody th {
            height: 40px;
      }
      table.v-table thead tr {
            height: 40px;
      }
      .v-messages {
            min-height: 0px !important;
      }
</style>

<script>
    module.exports = {
        components: {
            'one-dialog-info': httpVueLoader('../../common/oneDialogInfo.vue'),
            'one-dialog-alert': httpVueLoader('../../common/oneDialogAlert.vue')
        },
        mounted() {
            this.$store.dispatch("bill/search", {
              supplier: this.searchsupplier,
              search: this.searchnamelab,
              status: this.status.value,
              current_page: 1,
              startdate: this.init_sdate,
              enddate: this.init_edate,
              lastidx: 0
            })
        },
        methods: {
            async aSearchAcCoa(query) {
              if (!query) return;
              this.a_loading_coa = true;
              await this.$store.dispatch("bill/selectpaymenttype", { search: query });
              this.a_loading_coa = false;
            },
            checkTop(pat) {
                // Pastikan selected_multibill selalu berupa array
                let selected = this.$store.state.bill.selected_multibill;
                if (!Array.isArray(selected)) {
                    selected = [];
                }

                // Cek apakah item sudah ada di daftar
                const exists = selected.find(x => x.SupplierPaymentID === pat.SupplierPaymentID);
                if (exists) {
                    // Jika sudah ada → hapus (toggle off)
                    selected = selected.filter(x => x.SupplierPaymentID !== pat.SupplierPaymentID);
                } else {
                    // Jika belum ada → tambahkan (toggle on)
                    selected.push(pat);
                }

                // Update ke store
                this.$store.commit("bill/update_selected_multibill", selected);

                console.log("Selected list:", selected);
                // Hitung ulang total pembayaran
                const totalPayment = selected.reduce((sum, obj) => {
                    return sum + parseFloat(obj.totalbill || 0);
                }, 0);
                // alert(totalPayment);
                this.$store.commit("bill/update_total_payment", totalPayment);
            },
            updateRounding(pat) {
                // Pastikan selected_multibill selalu berupa array
                let selected = this.$store.state.bill.selected_multibill;
                if (!Array.isArray(selected)) {
                    selected = [];
                }

                // Cari item yang sesuai dan update nilai xrounding-nya
                const updated = selected.map(item => {
                    if (item.SupplierPaymentID === pat.SupplierPaymentID) {
                        return {
                          ...item,
                          xrounding: pat.xrounding || 0
                        };
                    }
                    return item;
                });

                // Update ke store
                this.$store.commit("bill/update_selected_multibill", updated);

                // Hitung ulang total pembayaran
                const totalPayment = updated.reduce((sum, obj) => {
                    return sum + parseInt(obj.totalbill || 0) + parseInt(obj.xrounding || 0);
                }, 0);

                // Simpan total pembayaran ke store
                this.$store.commit("bill/update_total_payment", totalPayment);

                console.log("Updated rounding:", updated);
            },
            onBlurRounding() {
                let rounding = this.xrounding
                if (rounding % 1 === 0 ) {
                    this.total_multi_after_rounding = this.convertMoney(rounding) + ",00"
                } else {
                    this.total_multi_after_rounding = this.convertMoney(rounding)
                }
            },
            onFocusRounding() {
                let rounding = this.xrounding
                this.total_multi_after_rounding = rounding.toString().replace('.', ',')
            },
            changeCbxAll(val) {
                const bills = this.$store.state.bill.bills || [];
                let selected = [];

                // Jika "Select All" dicentang
                if (val) {
                    selected = bills.map(b => {
                        b.chex = true; // centang semua item
                        return b;
                    });
                } else {
                    // Jika dilepas
                    bills.forEach(b => (b.chex = false));
                    selected = [];
                }

                // Update ke store
                this.$store.commit("bill/update_selected_multibill", selected);

                // Hitung total pembayaran
                const totalPayment = selected.reduce((sum, obj) => {
                    return sum + parseInt(obj.totalbill || 0) + parseInt(obj.xrounding || 0);
                }, 0);
                this.$store.commit("bill/update_total_payment", totalPayment);

                console.log("Select All:", val);
                console.log("Selected list:", selected);
            },
            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')}`
            },
            isSelected(p) {
                return p.SupplierInvoiceID == this.$store.state.bill.selected_bill.SupplierInvoiceID
            },
            closeDialogPaySuccess() {
                this.$store.commit("bill/update_dialog_pay_success", false)
                this.$store.dispatch("bill/search", {
                    startdate: this.$store.state.bill.init_sdate,
                    enddate: this.$store.state.bill.init_edate,
                    search: this.$store.state.bill.search,
                    status: this.$store.state.bill.selected_status.value,
                    current_page: this.$store.state.bill.current_page,
                    lastidx: 1
                })
            },
            convertMoney(money) {
                return one_money(money)
            },
            async addpaymulti() {
                if (this.in_saving) return;
                this.in_saving = true;
                var go_pay = true
                var xmsginfo = ''
                let prm = {
                    xrounding: this.xrounding,
                    total: this.total_payment,
                    paymenttype: this.xpaymenttype.coaID,
                    keterangan: this.xketerangan,
                    details: this.$store.state.bill.selected_multibill
                }
                //console.log(prm.amount)
                // console.log(prm);
                this.$store.dispatch("bill/pay", prm)
            },
            searchPatient() {
                this.$store.dispatch("bill/search", {
                    supplier: this.searchsupplier,
                    search: this.searchnamelab,
                    status: this.status.value,
                    current_page: 1,
                    startdate: this.init_sdate,
                    enddate: this.init_edate,
                    lastidx: 0
                })
            },
            selectMe(pat) {
                this.$store.commit("paymentmanual/update_paymenttype", '')
                if (this.xtotal_page > 0) {
                    // alert(pat.tanggalbayar)
                    this.$store.commit("paymentmanual/update_xbayar", pat.totalbill)
                    this.$store.commit("paymentmanual/update_xtanggalbayar", pat.SupplierInvoiceDraftPaymentDate)
                    let totpay = this.$store.state.paymentnew.total_payment
                    if (totpay === 0) {
                        let xobj = this.$store.state.paymentnew.types
                        console.log(xobj)
                        xobj.forEach(function (obj) {
                            obj.chex = false
                            obj.leftvalue = 0
                            obj.rightvalue = 0
                            obj.selected_card = {
                                id: 0,
                                name: ''
                            }
                            obj.selected_edc = {
                                id: 0,
                                name: ''
                            }
                        })
                        this.$store.commit("paymentnew/update_types", {
                            records: xobj,
                            total: xobj.length
                        })
                        this.$store.commit("bill/update_selected_bill", pat)
                        this.$store.commit("paymentnew/update_total_payment", 0)
                        this.$store.commit("paymentnew/update_notes", pat.notes)
                        this.$store.commit("paymentmanual/update_notes", pat.notes)
                        if (pat.flaglunas === 'N') {
                            this.$store.commit("paymentmanual/update_tagihans", pat.tagihans)
                        } else {
                            this.$store.commit("paymentmanual/update_tagihans", '')
                        }
                    } else {
                        this.$store.commit("bill/update_open_alert_no_pay", true)
                    }

                    var arr = this.$store.state.paymentmanual.tagihans
                    var value = true
                    this.$store.commit("paymentmanual/update_indeterminatex", false)
                    this.$store.commit("paymentmanual/update_bar_chx_all", value)

                    arr.forEach((el) => {
                        el.chex = value
                        el.tagihan_bayar = value == true ? el.tagihan_tagihan : 0
                    })

                    var selected = _.filter(arr, function (o) {
                        return o.chex;
                    })
                    this.$store.commit("paymentmanual/update_selected_tagihan", selected)

                    var xval = this.$store.state.paymentmanual.selected_tagihan
                    var valx = 0
                    xval.forEach(function (obj) {
                        valx += parseInt(obj.tagihan_bayar)
                    })
                    let totpaid = valx
                    this.$store.commit("paymentmanual/update_total_payment", totpaid)
                } else {
                    // alert(pat.tanggalbayar)
                    console.log("no invoice to pay again");
                    this.$store.commit("paymentmanual/update_xbayar", pat.totalbill)
                    this.$store.commit("paymentmanual/update_xtanggalbayar", pat.tanggalbayar)
                    let totpay = 0
                    if (totpay === 0) {
                        let xobj = this.$store.state.paymentnew.types
                        console.log(xobj)
                        xobj.forEach(function (obj) {
                              obj.chex = false
                              obj.leftvalue = 0
                              obj.rightvalue = 0
                              obj.selected_card = {
                                    id: 0,
                                    name: ''
                              }
                              obj.selected_edc = {
                                    id: 0,
                                    name: ''
                              }
                        })
                        this.$store.commit("paymentnew/update_types", {
                              records: '',
                              total: 0
                        })
                        this.$store.commit("bill/update_selected_bill", '')
                        this.$store.commit("paymentnew/update_total_payment", 0)
                        this.$store.commit("paymentmanual/update_notes", '')
                        this.$store.commit("paymentnew/update_notes", '')
                        if (pat.flaglunas === 'N') {
                              this.$store.commit("paymentmanual/update_tagihans", pat.tagihans)
                        } else {
                              this.$store.commit("paymentmanual/update_tagihans", '')
                        }
                    } else {
                        this.$store.commit("bill/update_open_alert_no_pay", true)
                    }
                }
            },
            closeAlertNoPay() {
                this.$store.commit("bill/update_open_alert_no_pay", false)
            },
            forgetAlertNoPay() {
                var xval = this.$store.state.paymentnew.types
                var valpay = 0
                xval.forEach(function (obj) {
                    obj.chex = false
                    obj.leftvalue = 0
                    obj.rightvalue = 0
                    obj.selected_card = {
                        id: 0,
                        name: ''
                    }
                    obj.selected_edc = {
                        id: 0,
                        name: ''
                    }
                })
                this.$store.commit("paymentnew/update_total_payment", 0)
                this.$store.commit("bill/update_open_alert_no_pay", false)
            },
            changeBtnFlagCourier(value) {
                var newval = (value === 'Y') ? 'N' : 'Y'
                this.xisauto = newval
            },
            changeBtnFlagDefaultCourier(value) {
                var newval = (value === 'Y') ? 'N' : 'Y'
                this.xdisauto = newval
            },
            paymulti() {
                this.$store.commit("bill/update_xdialogmulti", true)
            },
            closepaymulti() {
                this.$store.commit("bill/update_xdialogmulti", false)
            }
        },
        computed: {
            isIndeterminate() {
                const bills = this.$store.state.bill.bills || [];
                const selected = this.$store.state.bill.selected_multibill || [];
                return selected.length > 0 && selected.length < bills.length;
            },
            xpaymenttypes() {
                return this.$store.state.bill.paymenttypes
            },
            a_loading_coa: {
                get() {
                    return this.$store.state.bill.a_loading_coa;
                },
                set(val) {
                    this.$store.commit("bill/update_a_loading_coa", val);
                },
            },
            in_saving: {
                get() {
                    return this.$store.state.bill.in_saving
                },
                set(val) {
                    this.$store.commit("bill/update_in_saving", val)
                }
            },
            xpaymenttype: {
                get() {
                    return this.$store.state.bill.paymenttype
                },
                set(val) {
                    this.$store.commit("bill/update_paymenttype", val)
                }
            },
            xmsgpaysuccess() {
                return this.$store.state.bill.paynumber
            },
            a_coa_search: {
                get() {
                    return this.$store.state.bill.a_coa_search
                },
                set(val) {
                    this.$store.commit("bill/update_a_coa_search", val);
                    //this.aSearchAcCoa(val)
                }
            },
            xrounding: {
                get() {
                    return this.$store.state.bill.xrounding
                },
                set(val) {
                    this.$store.commit("bill/update_xrounding", val)
                }
            },
            displayTotalRounding: {
              get() {
                  return this.total_multi_after_rounding
              },
              set(val) {
                  let raw = val.replace(/\./g, '').replace(',', '.');
                  this.xrounding = parseFloat(raw) || 0;
              }
            },
            xdialogmulti: {
                get() {
                    return this.$store.state.bill.xdialogmulti
                },
                set(val) {
                    this.$store.commit("bill/update_xdialogmulti", val)
                }
            },
            selected_multibill: {
                get() {
                    return this.$store.state.bill.selected_multibill
                },
                set(val) {
                    this.$store.commit("bill/update_selected_multibill", val)
                }
            },
            total_payment: {
                get() {
                    return this.$store.state.bill.total_payment
                },
                set(val) {
                    this.$store.commit("bill/update_total_payment", val)
                }
            },
            xdialogpaysuccess() {
                return this.$store.state.bill.dialog_pay_success
            },
            xstartdate: {
                get() {
                    return this.$store.state.bill.start_date
                },
                set(val) {
                    this.$store.commit("bill/update_start_date", val)
                }
            },
            xenddate: {
                get() {
                    return this.$store.state.bill.end_date
                },
                set(val) {
                    this.$store.commit("bill/update_end_date", val)
                }
            },
            init_sdate: {
                get() {
                    return this.$store.state.bill.init_sdate
                },
                set(val) {
                    this.$store.commit("bill/update_init_sdate", val)
                }
            },
            init_edate: {
                get() {
                    return this.$store.state.bill.init_edate
                },
                set(val) {
                    this.$store.commit("bill/update_init_edate", val)
                }
            },
            xisauto: {
                get() {
                    return this.$store.state.bill.isauto
                },
                set(val) {
                    this.$store.commit("bill/update_isauto", val)
                    this.$store.commit("paymentmanual/update_isauto", val)
                    this.$store.commit("paymentnew/update_isauto", val)
                }
            },
            searchsupplier: {
                get() {
                    return this.$store.state.bill.ssupplier
                },
                set(val) {
                    this.$store.commit("bill/update_ssupplier", val)
                }
            },
            searchnamelab: {
                get() {
                    return this.$store.state.bill.search
                },
                set(val) {
                    this.$store.commit("bill/update_search", val)
                }
            },
            statuses() {
                return this.$store.state.bill.statuses
            },
            status: {
                get() {
                    return this.$store.state.bill.selected_status
                },
                set(val) {
                    this.$store.commit("bill/update_selected_status", val)
                }
            },
            indeterminatex: {
                get() {
                    return this.$store.state.bill.indeterminatex
                },
                set(val) {
                    this.$store.commit("bill/update_indeterminatex", val)
                }
            },
            startDateFormatted() {
                return this.formatDate(this.init_sdate)
            },
            bayarDateFormatted() {
                return this.formatDate(this.xtanggalbayar)
            },
            xtanggalbayar: {
                get() {
                    return this.$store.state.bill.xtanggalbayar
                },
                set(val) {
                    this.$store.commit("bill/update_xtanggalbayar",val)
                }
            },
            endDateFormatted() {
                return this.formatDate(this.init_edate)
            },
            isLoading() {
                return this.$store.state.bill.search_status == 1
            },
            bills() {
                return this.$store.state.bill.bills
            },
            openalertnopay: {
                get() {
                    return this.$store.state.bill.open_alert_no_pay
                },
                set(val) {
                    this.$store.commit("bill/update_open_alert_no_pay", false)
                }
            },
            msgalertnopay() {
                return this.$store.state.bill.msg_alert_no_pay
            },
            curr_page: {
                get() {
                    return this.$store.state.bill.current_page
                },
                set(val) {
                    this.$store.commit("bill/update_current_page", val)
                    this.$store.dispatch("bill/search", {
                        supplier: this.searchsupplier,
                        search: this.searchnamelab,
                        status: this.status.value,
                        current_page: val,
                        startdate: this.init_sdate,
                        enddate: this.init_edate,
                        lastidx: 0
                    })
                }
            },
            xtotal_page: {
                get() {
                    return this.$store.state.bill.total_page
                },
                set(val) {
                    this.$store.commit("bill/update_total_page", val)
                }
            },
        },
        data() {
            return {
                total_multi_after_rounding: 0,
                items: [],
                menustartdate: false,
                menuenddate: false,
                xketerangan: '',
                bar_chx_all: false,
                    headers: [
                        {
                            text: "TGL. BAYAR", align: "left", sortable: false,
                            value: "mr", width: "10%", class: "pa-2 blue lighten-3 white--text"
                        },
                        {
                            text: "NO. TAGIHAN", align: "left", sortable: false,
                            value: "lab", width: "15%", class: "pa-2 blue lighten-3 white--text"
                        },
                        {
                            text: "NO. INSTRUKSI", align: "left", sortable: false,
                            value: "name", width: "10%", class: "pa-2 blue lighten-3 white--text"
                        },

                        {
                            text: "SUPPLIER", align: "left", sortable: false,
                            value: "status", width: "20%", class: "pa-2 blue lighten-3 white--text"
                        },
                        {
                            text: "NO. INVOICE (SUPPLIER)", align: "left", sortable: false,
                            value: "status", width: "15%", class: "pa-2 blue lighten-3 white--text"
                        },
                        {
                            text: "TOTAL TAGIHAN", align: "left", sortable: false,
                            value: "status", width: "10%", class: "pa-2 blue lighten-3 white--text"
                        },
                        {
                            text: "TOTAL BAYAR", align: "left", sortable: false,
                            value: "status", width: "10%", class: "pa-2 blue lighten-3 white--text"
                        }
                    ],
                    headersmulti: [
                        {
                            text: "TGL. BAYAR",
                            align: "left",
                            sortable: false,
                            value: "mr",
                            width: "10%",
                            class: "pa-2 blue lighten-3 white--text"
                        },
                        {
                            text: "NO. TAGIHAN",
                            align: "left",
                            sortable: false,
                            value: "lab",
                            width: "17%",
                            class: "pa-2 blue lighten-3 white--text"
                        },
                        {
                            text: "NO. PEMBAYARAN",
                            align: "left",
                            sortable: false,
                            value: "name",
                            width: "13%",
                            class: "pa-2 blue lighten-3 white--text"
                        },

                        {
                            text: "SUPPLIER",
                            align: "left",
                            sortable: false,
                            value: "status",
                            width: "20%",
                            class: "pa-2 blue lighten-3 white--text"
                        },
                        {
                            text: "NO. INVOICE (SUPPLIER)",
                            align: "left",
                            sortable: false,
                            value: "status",
                            width: "15%",
                            class: "pa-2 blue lighten-3 white--text"
                        },
                        {
                            text: "TOTAL TAGIHAN",
                            align: "left",
                            sortable: false,
                            value: "status",
                            width: "15%",
                            class: "pa-2 blue lighten-3 white--text"
                        },
                        // {
                        //     text: "PEMBULATAN",
                        //     align: "left",
                        //     sortable: false,
                        //     value: "status",
                        //     width: "10%",
                        //     class: "pa-2 blue lighten-3 white--text"
                        // }
                    ],
                  }
            },
        watch: {
            a_coa_search(val) {
                this.aSearchAcCoa(val)
            },
            xdialogmulti(val) {
                this.xrounding = 0
                this.total_multi_after_rounding = 0
            }
        }
    }
</script>
