<template>
    <div>
        <v-dialog v-model="dialog_detailform" persistent width="70vw">
            <v-card>
                <v-card-title class="headline grey lighten-2" primary-title>
                    DAFTAR PERMINTAAN ITEM
                </v-card-title>
    
                <v-card-text>
                    <v-data-table
                        class="elevation-1 mb-2" hide-actions xs12
                        v-model="temp_item" item-key="PurchaseRequestFlagID"
                        :headers="headers" :items="list_detailform.records"
                    >
                        <template v-slot:items="props">
                            <tr>
                                <td class="text-xs-center pa-2">{{ props.item.PurchaseRequestNumber }}</td> 
                                <td class="text-xs-center pa-2">{{ props.item.M_ItemDesc }}</td> 
                                <td class="text-xs-center pa-2">{{ props.item.ItemUnitName }}</td> 
                                <td class="text-xs-center pa-2">{{ props.item.StockGudang }}</td> 
                                <td class="text-xs-center pa-2">{{ props.item.PurchaseRequestFlagQty }}</td> 
                                <td class="text-xs-center pa-2">
                                    <v-checkbox 
                                        hide-details primary class="d-inline-flex"
                                        v-model="props.selected"
                                    ></v-checkbox>
                                </td>
                            </tr>
                        </template>
                    </v-data-table>

                    <div class="text-xs-center mt-2">
                        <v-pagination v-model="list_detailform_page" :length="detail_length" :total-visible="5"></v-pagination>
                    </div>
                </v-card-text>
    
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="error" flat @click="batalPick()">BATAL</v-btn>
                    <v-btn color="primary" @click="simpanPick()">TAMBAH</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </div>
</template>

<style scoped>
    .flex-centered {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>


<script>
    module.exports = {
        data() {
            return {
                temp_item: [],
                headers: [
                    {
                        text: "NO REQUEST", align: "center", sortable: false,
                        value: "no", width: "20%", class: "blue lighten-3 white--text",
                    },
                    {
                        text: "ITEM", align: "center", sortable: false,
                        value: "no", width: "30%", class: "blue lighten-3 white--text",
                    },
                    {
                        text: "UNIT", align: "center", sortable: false,
                        value: "no", width: "10%", class: "blue lighten-3 white--text",
                    },
                    {
                        text: "STOK GUDANG", align: "center", sortable: false,
                        value: "no", width: "15%", class: "blue lighten-3 white--text",
                    },
                    {
                        text: "JUMLAH", align: "center", sortable: false,
                        value: "no", width: "15%", class: "blue lighten-3 white--text",
                    },
                    {
                        text: "AKSI", align: "center", sortable: false,
                        value: "no", width: "10%", class: "blue lighten-3 white--text",
                    },
                ]
            }
        },
        computed: {
            dialog_detailform: {
                get() {
                    return this.$store.state.np_form.dialog_detailform
                },
                set(val) {
                    this.$store.commit("np_form/update_dialog_detailform", val)
                }
            },
            list_detailform: {
                get() {
                    return this.$store.state.np_form.list_detailform
                },
                set(val) {
                    this.$store.commit("np_form/update_list_detailform", val)
                }
            },
            list_detailform_page: {
                get() {
                    return this.$store.state.np_form.list_detailform_page
                },
                set(val) {
                    this.$store.commit("np_form/update_list_detailform_page", val)
                    this.$store.dispatch("np_form/getListItemDetail")
                }
            },
            form_detail: {
                get() {
                    return this.$store.state.np_form.form_detail
                },
                set(val) {
                    this.$store.commit("np_form/update_form_detail", val)
                }
            },
            detail_length() {
                const total = this.list_detailform.total
                if (total == undefined || total == 0) {
                    return 1
                }
                return Math.ceil(total/5)
            }
        },
        methods: {
            batalPick() {
                this.temp_item = []
                this.dialog_detailform = false
            },
            simpanPick() {
                const current_detail = this.form_detail
                const new_detail = this.temp_item

                new_detail.forEach(element => {
                    element['PurchaseRequestFlagQtyRest'] = 0;
                    element['ItemRequest'] = [];
                });

                const merge = current_detail.concat(new_detail)
                this.temp_item = []
                this.form_detail = merge
                this.dialog_detailform = false
            }
        },
    }
</script>