<template>
    <v-dialog v-model="dialog_batch_item" persistent width="30vw">
        <v-card>
           <v-card-title class="headline grey lighten-2" primary-title>
               EDIT QTY, BATCH, dan ED {{ selected_item_forbatch.M_ItemCode }}
               {{ selected_item_forbatch.M_ItemDesc }}
           </v-card-title>

           <v-card-text>
                <p class="font-weight-bold">
                    Jumlah item yang dapat diterima : {{ selected_item_forbatch.qty }} 
                  {{ selected_item_forbatch.ItemUnitName }}
                </p>
                <div v-for="(item, index) in item_batch_temp" class="mt-2" :key="index">
                    <v-layout row wrap>
                        <v-flex xs2 class="pr-1">
                            <v-text-field
                                v-model.number="item.qty" type="number" min="0"
                                hide-details label="qty" outline step="1"
                            ></v-text-field>
                        </v-flex>
                        <v-flex xs5 class="pr-1">
                            <v-text-field
                                v-model="item.batchno" outline 
                                hide-details label="batch number"
                            ></v-text-field>
                        </v-flex>
                        <v-flex xs4 class="pr-1">
                            <v-menu
                                v-model="item.menuDate" lazy offset-y 
                                :close-on-content-click="false" transition="scale-transition"
                                :nudge-right="40" max-width="290px" min-width="290px"
                            >
                                <template v-slot:activator="{ on }">
                                    <v-text-field
                                        :value="item.expiredate" label="Expired"
                                        hide-details outline v-on="on" readonly
                                    ></v-text-field>
                                </template>
                                <v-date-picker
                                    v-model="item.expiredate" no-title 
                                    @input="item.menuDate = false" hide-details
                                ></v-date-picker>
                            </v-menu>
                        </v-flex>
                        <v-flex xs1>
                            <v-tooltip bottom>
                                <template v-slot:activator="{ on }">
                                    <v-btn 
                                        outline small @click="removeInputRow(index)" 
                                        color="red lighten-2" icon
                                    >
                                        <v-icon small color="red" v-on="on">remove_circle</v-icon>
                                    </v-btn>
                                </template>
                                <span>Hapus</span>
                            </v-tooltip>
                        </v-flex>
                    </v-layout>
                    <v-divider v-if="index + 1 < item_batch_temp.length" :key="`divider-${index}`" class="mt-1"></v-divider>
                </div>
                <v-btn flat block @click="addInputRow()" color="primary" outline>
                    Tambah
                </v-btn>
           </v-card-text>

           <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="red" flat @click="tutupDialog()">Tutup</v-btn>
                <v-btn color="green" flat @click="simpanBatch()">Simpan</v-btn>
           </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
module.exports = {
    data() {
        return {
            
        }
    },
    computed: {
        dialog_batch_item: {
            get() {
                return this.$store.state.form.dialog_batch_item;
            },
            set(val) {
                this.$store.commit("form/update_dialog_batch_item", val);
            }
        },
        selected_item_forbatch: {
            get() {
                return this.$store.state.form.selected_item_forbatch;
            },
            set(val) {
                this.$store.commit("form/update_selected_item_forbatch", val);
            }
        },
        item_batch_temp: {
            get() {
                return this.$store.state.form.item_batch_temp;
            },
            set(val) {
                this.$store.commit("form/update_item_batch_temp", val);
            }
        },
        form_receive_item: {
            get() {
                return this.$store.state.form.form_receive_item;
            },
            set(val) {
                this.$store.commit("form/update_form_receive_item", val);
            }
        }
    },
    methods: {
        tutupDialog() {
            this.selected_item_forbatch = {};
            this.item_batch_temp = [];
            this.dialog_batch_item = false;
        },
        simpanBatch() {
            const temp = this.item_batch_temp;
            let curr_item = JSON.parse(JSON.stringify(this.selected_item_forbatch));
            let final_arr = [];

            const maxQty = Number(curr_item.qty);
            let total = 0;
            let isError = false;

            temp.forEach(item => {
                if (curr_item.M_ItemItem_CategoryID == '1') {
                    if (item.batchno != '' && item.qty > 0) {
                        total = Number(item.qty) + total;
                        final_arr.push(item);
                    } else {
                        isError = true;
                    }
                } else {
                    if (Number(item.qty) > 0) {
                        total = Number(item.qty) + total;
                        final_arr.push(item);
                    }
                }
            });

            if (total > maxQty || total <= 0 || isError) {
                this.$store.commit("ro/update_snackbar", {
                    color: 'error',
                    msg: 'Jumlah total melebihi jumlah yang dapat diterima',
                    isOpen: true
                });
                return;
            }

            let item_received = JSON.parse(JSON.stringify(this.form_receive_item));
            item_received.forEach(obj => {
                if (obj.keyID === curr_item.keyID) {
                    obj.batchlist = final_arr;
                    obj.receivedQty = total;
                }
            });
            this.form_receive_item = item_received;

            this.selected_item_forbatch = {};
            this.item_batch_temp = [];
            this.dialog_batch_item = false;
        },
        addInputRow() {
            const input = {
                qty: 0,
                batchno: '',
                expiredate: moment(new Date()).format('YYYY-MM-DD'),
                menuDate: false
            };
            this.item_batch_temp.push(input);
        },
        reAddInputRow(data) {
            if (!data.batchlist) {
                return;
            }

            data.batchlist.forEach(element => {
                let inputrow = {
                    qty: element.qty,
                    batchno: element.batchno,
                    expiredate: element.expiredate,
                    menuDate: false
                };
                this.item_batch_temp.push(inputrow);
            });
        },
        removeInputRow(index) {
            this.item_batch_temp.splice(index, 1)
        }
    },
    watch: {
        selected_item_forbatch(val, old) {
            if (val == old) return;
            if (!val) return;
            this.reAddInputRow(val)
        }
    },
}
</script>