<template>
    <v-dialog v-model="dialog_handover" persistent width="40vw">
        <v-card>
            <v-card-title class="headline grey lighten-2" primary-title>
                SERAH TERIMA BARANG INVENTARIS
            </v-card-title>

            <v-card-text>
                <p>Apakah Anda yakin ingin melakukan serah terima barang inventaris kepada user pemohon di ruangan <b>{{ selected_ro.M_RuanganName }}</b>?</p>

                <v-form ref="formhandover" lazy-validation v-model="valid_formhandover">
                    <v-layout row mt-2>
                        <v-flex xs6 pr-1>
                            <v-autocomplete
                                label="Staff Penerima*" outline
                                :rules="rules_staff" return-object
                                v-model="selected_staff" :items="list_staff"
                                item-text="M_UserUsername" item-value="M_UserID"
                            ></v-autocomplete>
                        </v-flex>
                    </v-layout>
                </v-form>
            </v-card-text>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="red" flat outline @click="closeHandOver()">Batal</v-btn>
                <v-btn color="green" flat outline @click="simpanHandOver()">Ya, Serahkan Barang</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
module.exports = {
    data() {
        return {
            valid_formhandover: true,
            rules_staff: [v => (v && Object.keys(v).length > 0) || 'Staff harus diisi'], 
        }
    },
    computed: {
        dialog_handover: {
            get() {
                return this.$store.state.ro.dialog_handover
            },
            set(val) {
                this.$store.commit("ro/update_dialog_handover", val)
            }
        },
        selected_staff: {
            get() {
                return this.$store.state.ro.selected_staff
            },
            set(val) {
                this.$store.commit("ro/update_selected_staff", val)
            }
        },
        selected_item_received: {
            get() {
                return this.$store.state.form.selected_item_received
            },
            set(val) {
                this.$store.commit("form/update_selected_item_received", val)
            }
        },
        selected_ro: {
            get() {
                return this.$store.state.ro.selected_ro
            },
            set(val) {
                this.$store.commit("ro/update_selected_ro", val);
            }
        },
        list_staff() {
            return this.$store.state.ro.list_staff
        }
    },
    methods: {
        closeHandOver() {
            this.$store.commit("ro/update_selected_staff", {});
            this.dialog_handover = false
            this.$refs.formhandover.resetValidation();
        },
        async simpanHandOver() {
            if (this.$refs.formhandover.validate()) {
                let prm = {
                    staffID: this.selected_staff.M_UserID,
                    receiveOrderPoID: this.selected_ro.ReceiveOrderPoID,
                    ruanganID: this.selected_ro.M_RuanganID
                }
                await this.$store.dispatch("ro/saveHandover", prm);
                this.$refs.formhandover.resetValidation();
            }
        },
    },
}
</script>