<template>
<v-dialog v-model="dialog_formpo" persistent width="70vw">
    <v-card>
        <v-card-title class="headline grey lighten-2">FORM PO JASA</v-card-title>
        <v-card-text style="max-height: 80vh; overflow-y: auto;">
            <v-layout row wrap>
                <!-- 1st row -->
                <v-flex xs4>
                    <v-menu
                        v-model="menuPOdate" offset-y lazy min-width="290px"
                        transition="scale-transition" max-width="290px" full-width
                        :nudge-right="40" :close-on-content-click="false"
                    >
                        <template v-slot:activator="{on}">
                            <v-text-field
                                v-model="formattedPODate" label="Tanggal PO"
                                hide-details readonly v-on="on" outline
                            ></v-text-field>
                        </template>
                        <v-date-picker
                            v-model="form_pojasa.podate" no-title 
                            @input="menuPOdate = false"
                        ></v-date-picker>
                    </v-menu>
                </v-flex>
                <v-flex xs4 pl-2>
                    <v-autocomplete
                        :items="list_supplier" hide-details outline 
                        v-model="form_pojasa.supplierID" label="Vendor"
                        item-text="SupplierName" item-value="SupplierID"
                        @input="changeSupplierCabang()"
                    ></v-autocomplete>
                </v-flex>
                <v-flex xs4 pl-2>
                    <v-text-field
                        v-model="form_pojasa.reference" hide-details outline 
                        label="Referensi" placeholder="nomor request" readonly
                    ></v-text-field>
                </v-flex>

                <!-- 2nd row -->
                <v-flex xs4 mt-2>
                    <v-autocomplete
                        :items="list_branch" hide-details outline 
                        v-model="form_pojasa.branchcode" label="Cabang" 
                        item-text="M_BranchName" item-value="M_BranchCode"
                        @input="changeSupplierCabang()"
                    ></v-autocomplete>
                </v-flex>
                <v-flex xs2 pl-2 mt-2>
                    <v-autocomplete
                        :items="['absolute', 'percent']" hide-details 
                        v-model="form_pojasa.typepajak" label="Pajak (PPN)" 
                        @input="changeTypeTaxDiskon('tax')" outline 
                    ></v-autocomplete>
                </v-flex>
                <v-flex xs2 pl-2 mt-2>
                    <v-text-field
                        v-if="form_pojasa.typepajak == 'percent'" label="Pajak" 
                        v-model="form_pojasa.valuepajak" hide-details outline 
                        placeholder="besar pajak dalam persen" suffix="%"
                        @input="debounceCalcJasa(form_pojasa)"
                    ></v-text-field>
                    <v-text-field
                        v-else label="Pajak" outline prefix="Rp."
                        v-model="form_pojasa.valuepajak" hide-details 
                        placeholder="besar pajak dalam rupiah" 
                        @input="debounceCalcJasa(form_pojasa)"
                        @focus="handleFocus(form_pojasa, 'form')"
                        @blur="handleBlur(form_pojasa, 'form')"
                    ></v-text-field>
                </v-flex>
                <v-flex xs2 pl-2 mt-2>
                    <v-autocomplete
                        :items="['absolute', 'percent']" hide-details 
                        v-model="form_pojasa.typediskon" label="Diskon" 
                        @input="changeTypeTaxDiskon('diskon')" outline 
                    ></v-autocomplete>
                </v-flex>
                <v-flex xs2 pl-2 mt-2>
                    <v-text-field
                        v-if="form_pojasa.typediskon == 'percent'" label="Diskon" 
                        v-model="form_pojasa.valuediskon" hide-details outline 
                        placeholder="besar diskon dalam persen" suffix="%"
                        @input="debounceCalcJasa(form_pojasa)"
                    ></v-text-field>
                    <v-text-field
                        v-else label="Diskon" outline prefix="Rp."
                        v-model="form_pojasa.valuediskon" hide-details 
                        placeholder="besar diskon dalam rupiah"
                        @input="debounceCalcJasa(form_pojasa)"
                        @focus="handleFocus(form_pojasa, 'form')"
                        @blur="handleBlur(form_pojasa, 'form')"
                    ></v-text-field>
                </v-flex>

                <!-- 3rd row -->
                <v-flex xs3 mt-2>
                    <v-autocomplete
                        :items="type_kontrak" hide-details label="Jenis Kontrak"  
                        v-model="form_pojasa.typekontrak" item-value="value"
                        item-text="name" outline @input="changeTypeTaxDiskon('kontrak')" 
                    ></v-autocomplete>
                </v-flex>
                <v-flex xs3 pl-2 mt-2>
                    <v-menu
                        v-model="menuStartContractdate" offset-y min-width="290px"
                        transition="scale-transition" max-width="290px" full-width
                        :nudge-right="40" :close-on-content-click="false" lazy 
                        :disabled="form_pojasa.typekontrak === 'once'"
                    >
                        <template v-slot:activator="{on}">
                            <v-text-field
                                v-model="formattedStartKontrak" outline hide-details 
                                label="Tanggal mulai kontrak" readonly v-on="on" 
                            ></v-text-field>
                        </template>
                        <v-date-picker
                            v-model="form_pojasa.kontrakstart" no-title 
                            @input="menuStartContractdate = false"
                        ></v-date-picker>
                    </v-menu>
                </v-flex>
                <v-flex xs3 pl-2 mt-2>
                    <v-menu
                        v-model="menuEndContractdate" offset-y min-width="290px"
                        transition="scale-transition" max-width="290px" full-width
                        :nudge-right="40" :close-on-content-click="false" lazy 
                        :disabled="form_pojasa.typekontrak === 'once'"
                    >
                        <template v-slot:activator="{on}">
                            <v-text-field
                                v-model="formattedEndKontrak" outline hide-details 
                                label="Tanggal akhir kontrak" readonly v-on="on" 
                            ></v-text-field>
                        </template>
                        <v-date-picker
                            v-model="form_pojasa.kontrakend" no-title 
                            @input="menuEndContractdate = false"
                        ></v-date-picker>
                    </v-menu>
                </v-flex>
                <v-flex xs3 pl-2 mt-2>
                    <v-text-field
                        :disabled="form_pojasa.typekontrak === 'once'"
                        label="Jumlah Keluar PI" hide-details 
                        v-model="form_pojasa.PIOutQty" outline
                    ></v-text-field>
                </v-flex>
                
                <!-- 4th row -->
                 <v-flex xs12 mt-2>
                    <v-textarea
                        v-model="form_pojasa.catatan" auto-grow 
                        rows="1" outline label="Catatan" hide-details
                    ></v-textarea>
                </v-flex>
                <v-flex xs3 mt-2>
                    <v-btn 
                        block color="info" @click="addReqJasa()"
                        :disabled="form_pojasa.branchcode == '' || form_pojasa.supplierID == ''"
                    >TAMBAH ITEM</v-btn>
                </v-flex>
            </v-layout>

            <v-layout row wrap class="mt-2">
            <v-flex xs12 v-if="selected_requestjasa.length > 0">
                <v-data-table
                    :headers="headers" :items="selected_requestjasa" 
                    :expand="expand" class="elevation-1" hide-actions
                    item-key="M_ItemCode"
                >
                    <!-- list item request -->
                    <template v-slot:items="props">
                    <tr @click="props.expanded = !props.expanded">
                        <td class="text-xs-center pa-2">
                            <v-icon>{{ props.expanded 
                                ? "keyboard_arrow_down" 
                                : "keyboard_arrow_right" 
                            }}</v-icon>
                        </td>
                        <td class="text-xs-center pa-2">{{ props.item.M_ItemDesc }}</td>
                        <td class="text-xs-center pa-2">{{ props.item.RequestQty }}</td>
                        <td class="text-xs-center pa-2">
                            <v-text-field
                                v-model="props.item.SupplierPrice" 
                                hide-details prefix="Rp." solo 
                                @input="debounceCalcItem(props.item)"
                                @focus="handleFocus(props.item, 'itemprice')"
                                @blur="handleBlur(props.item, 'itemprice')"
                            ></v-text-field>
                        </td>
                        <td class="text-xs-center pa-2">
                            <v-layout row>
                                <v-menu open-on-hover top offset-y attach>                        
                                    <v-btn slot="activator" color="primary" dark small>
                                        <span v-if="props.item.DiskonType == 'R'">Rp</span>
                                        <span v-else>%</span>
                                    </v-btn>

                                    <v-list>
                                        <v-list-tile
                                            v-for="(item, index) in type_disc" :key="index" 
                                            @click="changeDiscountPerItem(item.name, props.item)"
                                        >
                                            <v-list-tile-title>{{ item.name }}</v-list-tile-title>
                                        </v-list-tile>
                                    </v-list>
                                </v-menu>
                                <v-text-field
                                    v-if="props.item.DiskonType == 'R'" prefix="Rp."
                                    v-model="props.item.DiskonAmount" hide-details
                                    @input="debounceCalcItem(props.item)" solo 
                                    @focus="handleFocus(props.item, 'diskon')" 
                                    @blur="handleBlur(props.item, 'diskon')" 
                                ></v-text-field>
                                <v-text-field
                                    v-if="props.item.DiskonType == 'P'"
                                    v-model="props.item.DiskonAmount" 
                                    @input="debounceCalcItem(props.item)" solo
                                    type="number" min="0" suffix="%" hide-details
                                ></v-text-field>
                            </v-layout>
                        </td>
                        <td class="text-xs-center pa-2">
                            Rp. {{ formatCurrency(props.item.EndPrice) }}
                        </td>
                        <td class="text-xs-center pa-2">
                            Rp. {{ formatCurrency(props.item.TempTotal) }}
                        </td>
                        <td class="text-xs-center pa-2">
                            <v-btn
                                color="red" dark @click="removeRequestItem(props.item)"
                                style="min-width: 40px; margin: 0;" small
                            >
                                <v-icon small>delete</v-icon>
                            </v-btn>
                        </td>
                    </tr>
                    </template>

                    <!-- detail item request -->
                    <template v-slot:expand="props">
                    <v-card flat>
                        <v-card-text>
                            <v-data-table
                                :headers="headers_detail" class="elevation-0"
                                :items="props.item.detail" hide-actions 
                            >
                                <template v-slot:items="det">
                                <tr>
                                    <td class="text-xs-center pa-2">{{ det.item.M_ItemDesc }}</td>
                                    <td class="text-xs-center pa-2">{{ det.item.PurchaseRequestNumber }}</td>
                                    <td class="text-xs-center pa-2">{{ det.item.M_BranchName }}</td>
                                    <td class="text-xs-center pa-2">
                                        <v-text-field
                                            v-model="det.item.RequestQty" hide-details
                                            @input="calcSummary(props.item)"
                                            outline type="number" min="0" 
                                        ></v-text-field>
                                    </td>
                                    <td class="text-xs-center pa-2">{{ det.item.ItemUnitName }}</td>
                                    <td class="text-xs-center pa-2">
                                        Rp. {{ formatCurrency(det.item.SupplierPrice) }}
                                    </td>
                                    <td class="text-xs-center pa-2">
                                        <v-btn
                                            color="red" flat @click="removeRequestDetail(det.item)"
                                            style="min-width: 40px; margin: 0;" small
                                        >
                                            <v-icon>delete</v-icon>
                                        </v-btn>
                                    </td>
                                </tr>
                                </template>
                            </v-data-table>
                        </v-card-text>
                    </v-card>
                    </template>

                    <!-- table footer -->
                    <template v-slot:footer>
                    <tr>
                        <td colspan="1" class="text-xs-left pa-2"></td>
                        <td colspan="4" class="text-xs-left pa-2">
                            <strong>JUMLAH</strong>
                        </td>
                        <td colspan="2" class="text-xs-right pa-2">
                            <strong>Rp. {{ formatCurrency(summary_pojasa.subtotal) }}</strong>
                        </td>
                        <td colspan="1" class="text-xs-right pa-2"></td>
                    </tr>
                    <tr>
                        <td colspan="1" class="text-xs-left pa-2"></td>
                        <td colspan="4" class="text-xs-left pa-2">
                            <strong>DISKON</strong>
                        </td>
                        <td colspan="2" class="text-xs-right pa-2">
                            <strong>Rp. {{ formatCurrency(summary_pojasa.diskon) }}</strong>
                        </td>
                        <td colspan="1" class="text-xs-right pa-2"></td>
                    </tr>
                    <tr>
                        <td colspan="1" class="text-xs-left pa-2"></td>
                        <td colspan="4" class="text-xs-left pa-2">
                            <strong>PAJAK</strong>
                        </td>
                        <td colspan="2" class="text-xs-right pa-2">
                            <strong>Rp. {{ formatCurrency(summary_pojasa.pajak) }}</strong>
                        </td>
                        <td colspan="1" class="text-xs-right pa-2"></td>
                    </tr>
                    <tr>
                        <td colspan="1" class="text-xs-left pa-2"></td>
                        <td colspan="4" class="text-xs-left pa-2">
                            <strong>TOTAL</strong>
                        </td>
                        <td colspan="2" class="text-xs-right pa-2">
                            <strong>Rp. {{ formatCurrency(summary_pojasa.total) }}</strong>
                        </td>
                        <td colspan="1" class="text-xs-right pa-2"></td>
                    </tr>
                    </template>
                </v-data-table>
            </v-flex>
            </v-layout>
        </v-card-text>
        <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn @click="batalPOJasa()" color="error" class="white--text">Batal</v-btn>
            <v-btn @click="simpanPOJasa()" color="primary" class="white--text">Simpan</v-btn>
        </v-card-actions>
    </v-card>
</v-dialog>
</template>

<script>
module.exports = {
    data() {
        return {
            menuPOdate: false,
            menuStartContractdate: false,
            menuEndContractdate: false,
            expand: false,
            headers: [
                {
                    text: "", align: "center", sortable: false,
                    value: "item", width: "5%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "ITEM", align: "center", sortable: false,
                    value: "item", width: "15%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "JUMLAH", align: "center", sortable: false,
                    value: "qty", width: "10%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "HARGA", align: "center", sortable: false,
                    value: "price", width: "15%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "DISKON", align: "center", sortable: false,
                    value: "disc", width: "20%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "HARGA SETELAH DISKON", align: "center", sortable: false,
                    value: "disc", width: "15%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "TOTAL", align: "center", sortable: false,
                    value: "disc", width: "15%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "AKSI", align: "center", sortable: false,
                    value: "disc", width: "5%", class: "pa-1 blue lighten-3 white--text",
                },
            ],
            headers_detail: [
                {
                    text: "NAMA PRODUK", align: "center", sortable: false,
                    value: "prod", width: "20%", class: "pa-1 blue lighten-4 black--text",
                },
                {
                    text: "NO REQUEST", align: "center", sortable: false,
                    value: "noreq", width: "20%", class: "pa-1 blue lighten-4 black--text",
                },
                {
                    text: "REQUESTER", align: "center", sortable: false,
                    value: "req", width: "20%", class: "pa-1 blue lighten-4 black--text",
                },
                {
                    text: "JUMLAH", align: "center", sortable: false,
                    value: "qty", width: "10%", class: "pa-1 blue lighten-4 black--text",
                },
                {
                    text: "UNIT", align: "center", sortable: false,
                    value: "unit", width: "10%", class: "pa-1 blue lighten-4 black--text",
                },
                {
                    text: "HARGA", align: "center", sortable: false,
                    value: "price", width: "15%", class: "pa-1 blue lighten-4 black--text",
                },
                {
                    text: "AKSI", align: "center", sortable: false,
                    value: "act", width: "5%", class: "pa-1 blue lighten-4 black--text",
                }
            ],
            type_disc: [{name: 'percent'}, {name: 'absolute'}]
        }
    },
    computed: {
        dialog_formpo: {
            get() {
                return this.$store.state.poservice.dialog_formpo
            },
            set(val) {
                this.$store.commit("poservice/update_dialog_formpo", val)
            }
        },
        form_pojasa: {
            get() {
                return this.$store.state.poservice.form_pojasa
            },
            set(val) {
                this.$store.commit("poservice/update_form_pojasa", val)
            }
        },
        selected_requestjasa: {
            get() {
                return this.$store.state.poservice.selected_requestjasa
            },
            set(val) {
                this.$store.commit("poservice/update_selected_requestjasa", val)
            }
        },
        summary_pojasa: {
            get() {
                return this.$store.state.poservice.summary_pojasa
            },
            set(val) {
                this.$store.commit("poservice/update_summary_pojasa", val)
            }
        },
        formattedPODate() {
            return this.formatDate(this.form_pojasa.podate)
        },
        formattedStartKontrak() {
            return this.formatDate(this.form_pojasa.kontrakstart)
        },
        formattedEndKontrak() {
            return this.formatDate(this.form_pojasa.kontrakend)
        },
        list_supplier() {
            return this.$store.state.poservice.list_supplier
        },
        list_branch() {
            return this.$store.state.poservice.list_branch
        },
        type_kontrak() {
            return this.$store.state.poservice.type_kontrak
        },
        loading_process() {
            return this.$store.state.poservice.loading_process
        }
    },
    methods: {
        formatDate(date) {
            if (!date) return null;
            const [year, month, day] = date.split('-');
            return `${day}-${month}-${year}`;
        },
        formatCurrency(value) {
            const num = parseFloat(value);
            if (isNaN(num)) return 0;
            return num.toFixed(2).replace('.', ',').replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        },
        parseCurrency(value) {
            let cleanValue = String(value).replace(/\./g, '');
            cleanValue = cleanValue.replace(',', '.');
            return parseFloat(cleanValue) || 0;
        },
        handleFocus(item, type) {
            if (type == 'itemprice') {
                const currentval = item.SupplierPrice;
                const parsedval = this.parseCurrency(currentval);
                item.SupplierPrice = parsedval;
            }

            if (type == 'diskon') {
                const currentdisc = item.DiskonAmount;
                const parseddisc = this.parseCurrency(currentdisc);
                item.DiskonAmount = parseddisc;
            }
            
            if (type == 'form') {
                const currdisc = item.valuediskon;
                const parsedisc = this.parseCurrency(currdisc);
                item.valuediskon = parsedisc;

                const currtax = item.valuepajak;
                const parsetax = this.parseCurrency(currtax);
                item.valuepajak = parsetax;
            }
        },
        handleBlur(item, type) {
            if (type == 'itemprice') {
                const currentval = item.SupplierPrice;
                const parsedval = this.parseCurrency(currentval);
                item.SupplierPrice = this.formatCurrency(parsedval);
            }

            if (type == 'diskon') {   
                const currentdisc = item.DiskonAmount;
                const parseddisc = this.parseCurrency(currentdisc);
                item.DiskonAmount = this.formatCurrency(parseddisc);
            }

            if (type == 'form') {
                const currdisc = item.valuediskon;
                const parsedisc = this.parseCurrency(currdisc);
                item.valuediskon = this.formatCurrency(parsedisc);

                const currtax = item.valuepajak;
                const parsetax = this.parseCurrency(currtax);
                item.valuepajak = this.formatCurrency(parsetax);
            }
        },
        changeSupplierCabang() {
            this.selected_requestjasa = []
            this.debounceCalcJasa(this.form_pojasa)
        },
        addReqJasa() {
            this.$store.dispatch("poservice/lookupRequestJasa", 'SR')
            this.$store.commit("poservice/update_dialog_select_itemjasa", true)
        },
        changeTypeTaxDiskon(type) {
            let form = this.form_pojasa
            if (type == 'tax') {
                form.valuepajak = 0
            }

            if (type == 'diskon') {
                form.valuediskon = 0
            }

            if (type == 'kontrak') {
                form.kontrakstart = moment(new Date()).format('YYYY-MM-DD')
                form.kontrakend = moment(new Date()).format('YYYY-MM-DD')
                form.PIOutQty = 1
            }
            this.calcFormJasa(form)
        },
        removeRequestItem(item) {
            let current = JSON.parse(JSON.stringify(this.selected_requestjasa))
            let newly = current.filter(ele => ele.M_ItemCode != item.M_ItemCode)
            
            this.selected_requestjasa = newly
            if (newly.length > 0) {
                newly.forEach(element => {
                    this.calcSummary(element)
                });
            } else {
                this.summary_pojasa = {
                    subtotal: 0,
                    diskon: 0,
                    pajak: 0,
                    total: 0
                }
            }
        },
        removeRequestDetail(item) {
            let current = JSON.parse(JSON.stringify(this.selected_requestjasa))
            
            let change = current.find(ele => ele.M_ItemCode == item.M_ItemCode)
            let newdetail = change.detail.filter(det => det.PurchaseRequestDetailID != item.PurchaseRequestDetailID)
            
            if (newdetail.length > 0) {
                change.detail = newdetail

                this.selected_requestjasa = current
                this.calcSummary(change)
            } else {
                this.removeRequestItem(change)
            }
        },
        changeDiscountPerItem(type, item) {
            if (type == 'percent') {
                item.DiskonType = 'P'
                item.DiskonAmount = 0.00
            } else {
                item.DiskonType = 'R'
                item.DiskonAmount = 0.00
            }
            this.calcSummary(item)
        },
        calcSummary(item) {
            let current = JSON.parse(JSON.stringify(this.selected_requestjasa))
            let change = current.find(ele => ele.M_ItemCode == item.M_ItemCode)
            
            const new_qty = item.detail.reduce((sum, ele) => sum + Number(ele.RequestQty), 0)

            let item_price = this.parseCurrency(change.SupplierPrice)
            let currDisc = 0
            if (item.DiskonType == 'R') {
                currDisc = this.parseCurrency(change.DiskonAmount)
            } 
            if (item.DiskonType == 'P' && Number(change.DiskonAmount) > 0) {
                let percent = Number(change.DiskonAmount)
                currDisc = item_price * percent / 100
            }

            change.RequestQty = new_qty
            change.EndPrice = item_price - currDisc
            change.TempTotal = change.EndPrice * change.RequestQty

            this.selected_requestjasa = current

            /* update footer summary */
            const formjasa = this.form_pojasa
            let summary = JSON.parse(JSON.stringify(this.summary_pojasa))
            
            const subtotal = current.reduce((sum, acc) => sum + Number(acc.TempTotal), 0)
            summary.subtotal = subtotal
            
            this.summary_pojasa = summary
            this.calcFormJasa(formjasa)
        },
        calcFormJasa(form) {
            let summary = JSON.parse(JSON.stringify(this.summary_pojasa))

            /* Calculate discount value */ 
            let valuediskon = this.parseCurrency(form.valuediskon)
            if (form.typediskon == 'percent' && valuediskon > 0) {
                let percent = valuediskon
                let value = (summary.subtotal * percent) / 100
                summary.diskon = value
            } else {
                let absolute = valuediskon
                summary.diskon = absolute
            }

            /* Calculate tax value */ 
            let valuepajak = this.parseCurrency(form.valuepajak);
            if (form.typepajak == 'percent' && valuepajak > 0) {
                let percent = valuepajak
                let value = (summary.subtotal - summary.diskon) * percent / 100
                summary.pajak = value
            } else {
                let absolute = valuepajak
                summary.pajak = absolute
            }

            summary.total = (summary.subtotal - summary.diskon) + summary.pajak
            this.summary_pojasa = summary
        },
        batalPOJasa() {
            this.dialog_formpo = false;
        },
        simpanPOJasa() {
            if (!this.loading_process) {
                let form = JSON.parse(JSON.stringify(this.form_pojasa));
                let detail = JSON.parse(JSON.stringify(this.selected_requestjasa));
                let summary = JSON.parse(JSON.stringify(this.summary_pojasa));

                if (detail.length < 1) {
                    let snac = {color: 'warning', msg: 'item jasa masih kosong', state: true}
                    this.$store.commit('poservice/update_snackbar', snac)
                    return
                }

                /* Pre-process parameter */ 
                form.valuepajak = this.parseCurrency(form.valuepajak);
                form.valuediskon = this.parseCurrency(form.valuediskon);

                detail.forEach(element => {
                    element.SupplierPrice = this.parseCurrency(element.SupplierPrice);
                    element.DiskonAmount = this.parseCurrency(element.DiskonAmount);
                });

                let param = {
                    ...form,
                    detail: detail,
                    summary: summary
                }

                this.$store.dispatch("poservice/createPOJasa", param)
            } else {
                let snac = {color: 'warning', msg: 'proses simpan masih berjalan', state: true}
                this.$store.commit('poservice/update_snackbar', snac)
            }
        }
    },
    watch: {
        dialog_formpo(val) {
            if (val) {
                this.$nextTick(() => {
                    this.form_pojasa = {
                        podate: moment(new Date()).format('YYYY-MM-DD'),
                        reference: "",
                        supplierID: "",
                        typepajak: "percent",
                        valuepajak: 0,
                        typediskon: "percent",
                        valuediskon: 0,
                        branchcode: 0,
                        typekontrak: 'once',
                        kontrakstart: moment(new Date()).format('YYYY-MM-DD'),
                        kontrakend: moment(new Date()).format('YYYY-MM-DD'),
                        PIOutQty: 1,
                        catatan: ""
                    }
                    this.selected_requestjasa = []
                    this.summary_pojasa = {
                        subtotal: 0,
                        diskon: 0,
                        pajak: 0,
                        total: 0
                    }
                })
            }
        },
    },
    created() {
        this.debounceCalcItem = _.debounce((item) => {
            this.calcSummary(item)
        }, 500);
        this.debounceCalcJasa = _.debounce((form) => {
            this.calcFormJasa(form)
        }, 500)
    },
    destroyed() {
        this.debounceCalcItem = null
        this.debounceCalcJasa = null
    },
}
</script>