<template>
    <v-dialog v-model="dialog_pick_periode" persistent max-width="35vw">
        <v-card>
            <v-card-title class="headline grey lighten-2" primary-title>
                PILIH PERIODE
            </v-card-title>
            <v-card-text>
                <v-autocomplete
                    v-model="temp_periode" :items="list_periode"
                    outline hide-details label="Periode Jurnal"
                    item-text="periodeName" return-object
                >
                    <template slot="item" slot-scope="{ item }">
                        <v-list-tile-content>
                            <v-list-tile-title v-text="item.periodeName"></v-list-tile-title>
                            <v-list-tile-sub-title>
                                {{ item.periodeStartDate }} - {{ item.periodeEndDate }}
                            </v-list-tile-sub-title>
                        </v-list-tile-content>
                    </template>
                </v-autocomplete>
            </v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="error" flat @click="closeDialogPeriode()">TUTUP</v-btn>
                <v-btn color="primary" @click="choosePeriode()">PILIH</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
module.exports = {
    data() {
        return {
            temp_periode: {}
        }
    },
    computed: {
        list_periode() {
            return this.$store.state.journal.list_periode
        },
        dialog_pick_periode: {
            get() {
                return this.$store.state.journal.dialog_pick_periode
            },
            set(val) {
                this.$store.commit("journal/update_dialog_pick_periode", val)
            }
        },
        selected_periode: {
            get() {
                return this.$store.state.journal.selected_periode
            },
            set(val) {
                this.$store.commit("journal/update_selected_periode", val)
            }
        }
    },
    methods: {
        closeDialogPeriode() {
            this.temp_periode = {}
            this.dialog_pick_periode = false
        },
        choosePeriode() {
            var periode = this.temp_periode
            let filter = this.$store.state.journal.filter
            
            if (!periode || periode.periodeID == '') {
                return
            }

            this.selected_periode = periode
            filter.periode_id = periode.periodeID
            this.$store.commit("journal/update_filter", filter)
            
            this.temp_periode = {}
            this.dialog_pick_periode = false
        }
    },
    watch: {
        dialog_pick_periode(val) {
            if (val) {
                this.$nextTick(() => {
                    this.temp_periode = this.selected_periode
                })
            }
        }
    },
}
</script>