<template>
    <div>
        <v-dialog v-model="dialog_batchitem" persistent width="25vw">
            <v-card>
                <v-card-title class="headline grey lighten-2" primary-title>
                    Transfer Item
                </v-card-title>

                <v-card-text>
                    <v-layout row wrap>
                        <v-autocomplete
                            v-model="form_barnote" multiple label="Pilih Stock Item" item-text="StockStockNumber"
                            chips outline return-object :items="list_barnote.records" hide-details
                        >
                            <template v-slot:selection="data">
                                <v-chip
                                    :selected="data.selected"
                                    close class="chip--select-multi"
                                    @input="removeChips(data.item)"
                                > {{ data.item.StockStockNumber }} </v-chip>
                            </template>
                            <template v-slot:item="data">
                                <v-list-tile-content>
                                    <v-list-tile-title>
                                        Nomor {{ data.item.StockStockNumber }}
                                    </v-list-tile-title>
                                    <v-list-tile-sub-title>
                                        {{ data.item.WarehouseName }}
                                    </v-list-tile-sub-title>
                                </v-list-tile-content>
                            </template>
                        </v-autocomplete>

                        <v-flex xs12 class="mt-2" v-for="(item, index) in form_barnote" :key="item.StockStockNumber">
                            <v-layout row wrap>
                                <v-flex xs6 class="pr-2">
                                    <p class="body-2 mb-0">Nomor: {{ item.StockStockNumber }}</p>
                                    <p class="body-2 mb-0">{{ item.WarehouseName }}</p>
                                </v-flex>
                                <v-flex xs3 class="pr-1">
                                    <p class="body-2 mb-0">Stock:</p>
                                    <p class="body-2 mb-0">{{ item.StockQty }} {{ item.ItemUnitName }}</p>
                                </v-flex>
                                <v-flex xs3 class="pl-1">
                                    <v-text-field
                                        single-line 
                                        type="number" min="0" step="1" 
                                        label="Jumlah" v-model="item.QtyReq"
                                        outline hide-details
                                    ></v-text-field>
                                </v-flex>
                            </v-layout>
                            <v-divider v-if="index + 1 < form_barnote.length" :key="`divider-${index}`" class="mt-2"></v-divider>
                        </v-flex>
                    </v-layout>
                </v-card-text>

                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="error" @click="batalItem()">BATAL</v-btn>
                    <v-btn color="primary" @click="simpanItem()">SIMPAN</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </div>
</template>

<script>
    module.exports = {
        data() {
            return {
                totalrequest: 0
            }
        },
        computed: {
            dialog_batchitem: {
                get() {
                    return this.$store.state.np_form.dialog_batchitem
                },
                set(val) {
                    this.$store.commit("np_form/update_dialog_batchitem", val)
                }
            },
            buffer_detailitem: {
                get() {
                    return this.$store.state.np_form.buffer_detailitem
                },
                set(val) {
                    this.$store.commit("np_form/update_buffer_detailitem", val)
                }
            },
            list_barnote: {
                get() {
                    return this.$store.state.np_form.list_barnote
                },
                set(val) {
                    this.$store.commit("np_form/update_list_barnote", val)
                }
            },
            form_barnote: {
                get() {
                    return this.$store.state.np_form.form_barnote
                },
                set(val) {
                    this.$store.commit("np_form/update_form_barnote", val)
                }
            },
            form_detail: {
                get() {
                    return this.$store.state.np_form.form_detail
                },
                set(val) {
                    this.$store.commit("np_form/update_form_detail", val)
                }
            }
        },
        methods: {
            batalItem() {
                this.buffer_detailitem = {}
                this.form_barnote = []
                this.dialog_batchitem = false
            },
            simpanItem() {
                let current_detail = this.form_detail
                let current_item = this.buffer_detailitem
                let new_note = this.form_barnote

                let qty = 0
                let isError = false
                new_note.forEach(element => {
                    let req = Number(element.QtyReq)
                    let stock = Number(element.StockQty)
                    if (!req || req <= 0 || req > stock) {
                        isError = true
                        const snac = { isOpen: true, color: "error", msg: "[Error] Jumlah tidak boleh melebihi Stock" }
                        this.$store.commit("p_data/update_snackbar", snac, { root: true })
                        return
                    }

                    qty = qty + req
                });
                if (isError) {
                    return
                }

                current_detail.forEach(element => {
                    if (element.PurchaseRequestFlagID == current_item.PurchaseRequestFlagID) {
                        element.ItemRequest = new_note
                        element.QtyFilled = qty
                        element.PurchaseRequestFlagQtyRest = qty
                    }
                });

                this.form_detail = current_detail
                this.form_barnote = []
                this.buffer_detailitem = {}
                this.dialog_batchitem = false
            },
            removeChips(data) {
                let temp = this.form_barnote.filter(item => item.StockStockNumber !== data.StockStockNumber)
                this.form_barnote = temp
            }
        },
    }
</script>