<template>
    <v-dialog v-model="dialog_riwayat" persistent max-width="40%">
        <v-card>
            <v-card-title class="headline grey lighten-2" primary-title>
                Riwayat Stock Request Item
            </v-card-title>

            <v-card-text>
                <v-data-table
                    :headers="headers" :items="riwayat_item.records" 
                    hide-actions class="elevation-1"
                >
                    <template slot="items" slot-scope="props">
                        <tr>
                            <td class="text-xs-center pa-2">{{ props.item.PurchaseRequestDetailCreated }}</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.PurchaseRequestDetailQty }}</td>
                            <td class="text-xs-center pa-2">{{ props.item.PurchaseRequestStatus }}</td>
                        </tr>
                    </template>
                </v-data-table>
            </v-card-text>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="error" flat @click="closeDialog()">
                    Tutup
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
module.exports = {
    mounted() {},
    data() {
        return {
            headers: [
                {
                    text: "TANGGAL", align: "center", sortable: false,
                    value: "no", width: "20%", class: "blue lighten-3 white--text",
                },
                {
                    text: "ITEM", align: "center", sortable: false,
                    value: "item", width: "30%", class: "blue lighten-3 white--text",
                },
                {
                    text: "UNIT", align: "center", sortable: false,
                    value: "unit", width: "20%", class: "blue lighten-3 white--text",
                },
                {
                    text: "QTY", align: "center", sortable: false,
                    value: "qty", width: "15%", class: "blue lighten-3 white--text",
                },
                {
                    text: "STATUS", align: "center", sortable: false,
                    value: "status", width: "15%", class: "blue lighten-3 white--text",
                }
            ]
        }
    },
    computed: {
        dialog_riwayat: {
            get() {
                return this.$store.state.requester.dialog_riwayat
            },
            set(val) {
                this.$store.commit("requester/update_dialog_riwayat", val)
            }
        },
        riwayat_item: {
            get() {
                return this.$store.state.requester.riwayat_item
            },
            set(val) {
                this.$store.commit("requester/update_riwayat_item", val)
            }
        }
    },
    methods: {
        closeDialog() {
            this.riwayat_item = {}
            this.dialog_riwayat = false
        }
    },
}
</script>