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

           <v-card-text>
               <v-layout row wrap>
                   <v-flex xs12 v-for="(item, index) in receive_items" :key="item.StockStockNumber">
                        <v-layout row wrap>
                            <v-flex v-if="s_suratjalan.i_tftype === 'Persediaan'" 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>
                            </v-flex>
                            <v-flex v-else xs6 class="pr-2">
                                <p class="body-2 mb-0">Nomor: {{ item.StockStockNumber }}</p>
                            </v-flex>
                            <v-flex xs3 class="pr-1">
                                <p class="body-2 mb-0">Quantity:</p>
                                <p class="body-2 mb-0">{{ item.QtyReq }} {{ item.ItemUnitName }}</p>
                            </v-flex>
                            <v-flex xs3 class="pl-1">
                                <v-text-field
                                    single-line type="number" outline hide-details
                                    label="Jumlah" v-model="item.QtyReceive"
                                ></v-text-field>
                            </v-flex>
                        </v-layout>
                        <v-divider v-if="index + 1 < receive_items.length" :key="`divider-${index}`" class="mt-2 mb-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 {
                
            }
        },
        computed: {
            dialog_receive: {
                get() {
                    return this.$store.state.suratjalan.dialog_receive
                },
                set(val) {
                    this.$store.commit("suratjalan/update_dialog_receive", val)
                }
            },
            receive_items: {
                get() {
                    return this.$store.state.suratjalan.receive_items
                },
                set(val) {
                    this.$store.commit("suratjalan/update_receive_items", val)
                }
            },
            buffer_item: {
                get() {
                    return this.$store.state.suratjalan.buffer_item
                },
                set(val) {
                    this.$store.commit("suratjalan/update_buffer_item", val)
                }
            },
            s_suratjalan: {
                get() {
                    return this.$store.state.suratjalan.s_suratjalan
                },
                set(val) {
                    this.$store.commit("suratjalan/update_s_suratjalan", val)
                }
            },
        },
        methods: {
            batalItem() {
                this.receive_items = []
                this.buffer_item = {}
                this.dialog_receive = false
            },
            simpanItem() {
                let current = this.s_suratjalan
                let buffer_item = this.buffer_item
                let new_item = this.receive_items

                let qty = 0
                let isError = false
                new_item.forEach(element => {
                    let req = Number(element.QtyReq)
                    let rec = Number(element.QtyReceive)

                    if (rec <= 0 || rec > req) {
                        isError = true
                    }

                    qty = qty + rec
                });
                if (isError) {
                    let sn = { isOpen: true, color: "error", msg: "[Error] cek jumlah barang yang diterima" }
                    this.$store.commit("suratjalan/update_snackbar", sn)
                    return
                }

                current.detail.forEach(obj => {
                    if (obj.SuratJalanDetailID === buffer_item.SuratJalanDetailID) {
                        obj.ItemRequest = new_item
                        obj.SuratJalanDetailQtyReceived = qty
                    }
                });

                this.s_suratjalan = current
                this.receive_items = []
                this.buffer_item = {}
                this.dialog_receive = false
            }
        },
    }
</script>