<template>
    <div>
        <v-dialog v-model="dialog_batchitem" persistent width="30vw">
            <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-flex xs12 class="mb-2">
                            <v-autocomplete
                                v-model="form_batchitem" multiple label="Pilih Batch Item" item-text="StockBatchNo"
                                chips outline return-object :items="list_batchitemform.records" hide-details
                            >
                                <template v-slot:selection="data">
                                    <v-chip
                                        :selected="data.selected"
                                        close class="chip--select-multi" 
                                         @input="removeChips(data.item)"
                                    >
                                        {{ data.item.StockBatchNo }}
                                    </v-chip>
                                </template>
                                <template v-slot:item="data">
                                    <v-list-tile-content>
                                        <v-list-tile-title>
                                            Batch {{ data.item.StockBatchNo }}
                                        </v-list-tile-title>
                                        <v-list-tile-sub-title>
                                            Expired: {{ data.item.StockED }}
                                        </v-list-tile-sub-title>
                                    </v-list-tile-content>
                                </template>
                            </v-autocomplete>
                        </v-flex>
                        <v-flex xs12 v-for="(item, index) in form_batchitem" :key="item.StockStockNumber" class="mt-2">
                            <v-layout row wrap>
                                <v-flex xs6 class="pr-2">
                                    <p class="body-2 mb-0">Nomor batch: {{ item.StockBatchNo }}</p>
                                    <p class="body-2 mb-0">Expired: {{ item.StockED }}</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">
                                    <p class="text-xs-center">TF Qty: </p>
                                    <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_batchitem.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 = {
        components: {},
        mounted() {},
        data() {
            return {
                
            }
        },
        computed: {
            dialog_batchitem: {
                get() {
                    return this.$store.state.p_form.dialog_batchitem
                },
                set(val) {
                    this.$store.commit("p_form/update_dialog_batchitem", val)
                }
            },
            buffer_detailitem: {
                get() {
                    return this.$store.state.p_form.buffer_detailitem
                },
                set(val) {
                    this.$store.commit("p_form/update_buffer_detailitem", val)
                }
            },
            list_batchitemform: {
                get() {
                    return this.$store.state.p_form.list_batchitemform
                },
                set(val) {
                    this.$store.commit("p_form/update_list_batchitemform", val)
                }
            },
            form_batchitem: {
                get() {
                    return this.$store.state.p_form.form_batchitem
                },
                set(val) {
                    this.$store.commit("p_form/update_form_batchitem", val)
                }
            },
            form_detail: {
                get() {
                    return this.$store.state.p_form.form_detail
                },
                set(val) {
                    this.$store.commit("p_form/update_form_detail", val)
                }
            }
        },
        methods: {
            batalItem() {
                this.buffer_detailitem = {}
                this.list_batchitemform = {}
                this.form_batchitem = []
                this.dialog_batchitem = false
            },
            simpanItem() {
                let current_detail = this.form_detail
                let current_item = this.buffer_detailitem
                let new_batchitem = this.form_batchitem 

                let qty = 0
                let isError = false
                new_batchitem.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 <0 atau melebihi stock (${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_batchitem
                        element.QtyFilled = qty
                        element.PurchaseRequestFlagQtyRest = qty
                    }
                });

                this.form_detail = current_detail
                this.form_batchitem = []
                this.list_batchitemform = {}
                this.buffer_detailitem = {}
                this.dialog_batchitem = false
            },
            removeChips(data) {
                let tempo = this.form_batchitem.filter(item => item.StockBatchNo !== data.StockBatchNo)
                this.form_batchitem = tempo
            }
        },
    }
</script>