<template>
<v-dialog v-model="dialog_inspeksi" persistent width="40vw">
    <v-card>
        <v-card-title class="headline grey lighten-2" primary-title>
            FORM INSPEKSI JASA
        </v-card-title>
        <v-card-text>
            <v-layout row wrap>
                <v-flex xs12>
                    <v-radio-group
                        v-model="form_inspeksi.hasil_pengerjaan" row
                        label="Hasil Pengerjaan" hide-details
                    >
                        <v-radio label="Baik" value="good"></v-radio>
                        <v-radio label="Tidak Baik" value="bad"></v-radio>
                    </v-radio-group>
                    <v-text-field
                        v-if="form_inspeksi.hasil_pengerjaan == 'bad'" outline  
                        v-model="form_inspeksi.catatan_pengerjaan" class="mt-2"
                        label="Catatan Pengerjaan" hide-details 
                    ></v-text-field>
                </v-flex>
                <v-flex xs12 mt-2>
                    <v-radio-group
                        v-model="form_inspeksi.kesimpulan" row
                        label="Kesimpulan" hide-details
                    >
                        <v-radio label="Diterima" value="accept"></v-radio>
                        <v-radio label="Ditolak" value="reject"></v-radio>
                        <v-radio label="Diterima dengan catatan" value="acceptnote"></v-radio>
                    </v-radio-group>
                </v-flex>
                <v-flex xs12 mt-2>
                    <v-textarea
                        v-if="form_inspeksi.kesimpulan != 'accept'" outline
                        v-model="form_inspeksi.catatan_kesimpulan" rows="1"
                        label="Catatan" auto-grow hide-details
                    ></v-textarea>
                </v-flex>
            </v-layout>

            <v-layout row mt-2>
                <v-flex xs6 pr-1>
                    <v-autocomplete
                        label="Staff Pemeriksa" outline hide-details
                        v-model="form_inspeksi.pemeriksa" :items="list_staff" 
                        item-text="M_UserUsername" item-value="M_UserID"
                    ></v-autocomplete>
                </v-flex>
                <v-flex xs6 pl-1>
                    <v-text-field
                        label="Petugas Pengerjaan" hide-details
                        v-model="form_inspeksi.pekerja" outline
                    ></v-text-field>
                </v-flex>
            </v-layout>
        </v-card-text>
        <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn class="white--text" color="error" @click="tutupInspeksi()">Tutup</v-btn>
            <v-btn 
                v-if="!dialog_confirm_ro"
                class="white--text" color="primary" @click="saveInspeksi()"
            >Simpan</v-btn>
        </v-card-actions>
    </v-card>
</v-dialog>
</template>

<script>
module.exports = {
    data() {
        return {
            
        }
    },
    computed: {
        list_staff() {
            return this.$store.state.roservice.list_staff
        },
        dialog_confirm_ro() {
            return this.$store.state.roservice.dialog_confirm_ro
        },
        dialog_inspeksi: {
            get() {
                return this.$store.state.roservice.dialog_inspeksi
            },
            set(val) {
                this.$store.commit("roservice/update_dialog_inspeksi", val)
            }
        },
        form_inspeksi: {
            get() {
                return this.$store.state.roservice.form_inspeksi
            },
            set(val) {
                this.$store.commit("roservice/update_form_inspeksi", val)
            }
        },
        selected_jasainspek: {
            get() {
                return this.$store.state.roservice.selected_jasainspek
            },
            set(val) {
                this.$store.commit("roservice/update_selected_jasainspek", val)
            }
        },
        data_rojasa: {
            get() {
                return this.$store.state.roservice.data_rojasa
            },
            set(val) {
                this.$store.commit("roservice/update_data_rojasa", val)
            }
        }
    },
    methods: {
        tutupInspeksi() {
            this.selected_jasainspek = {}
            this.dialog_inspeksi = false
        },
        saveInspeksi() {
            const form = JSON.parse(JSON.stringify(this.form_inspeksi));
            let detail = JSON.parse(JSON.stringify(this.data_rojasa));
            let data = JSON.parse(JSON.stringify(this.selected_jasainspek));

            detail.forEach(element => {
                if (element.PODetailID === data.PODetailID) {
                    element.inspeksi = form
                }
            });

            this.$store.commit('roservice/update_data_rojasa', detail)
            this.selected_jasainspek = {}
            this.dialog_inspeksi = false;
        }
    },
    watch: {
        dialog_inspeksi(val) {
            if (!val) {
                this.$nextTick(() => {
                    this.form_inspeksi = {
                        hasil_pengerjaan: "good",
                        catatan_pengerjaan: "",
                        kesimpulan: "accept",
                        catatan_kesimpulan: "",
                        pemeriksa: "",
                        pekerja: ""
                    }
                })
            }
        }
    },
}
</script>