<template>
    <v-layout class="mb-2" column>
        <v-snackbar v-model="snackbar" :timeout="5000" :multi-line="false" :vertical="false" :top="true">
            {{ msgsnackbar }}
            <v-btn flat @click="openSnackBar(false)">Tutup</v-btn>
        </v-snackbar>
        <v-card>
            <v-layout row>
                <v-flex xs12>
                    <v-subheader>DETAIL PERIODE
                        <v-flex text-md-right pa-1>
                            <span @click="periodeTambah()" class="ml-1 primary icon-add icon-medium-fill-base white--text xs1"></span>
                        </v-flex>
                    </v-subheader>
                    <v-divider></v-divider>
                    <v-layout row wrap>
                        <v-flex xs12 pa-2>
                            <v-layout row>
                                <v-flex xs4 pa-1>
                                    <v-text-field v-model="selected.periodeName" label="Nama Periode"></v-text-field>
                                </v-flex>
                                <v-flex xs4 pa-1>
                                    <!-- <v-text-field v-model="selected.periodeMonth" label="Bulan Periode" type="number"></v-text-field> -->
                                    <v-select item-text="name" item-value="periodeMonth" :items="bulan" v-model="selected.periodeMonth" label="Bulan Periode"></v-select>
                                </v-flex>
                                <v-flex xs4 pa-1>
                                    <v-text-field v-model="selected.periodeYear" label="Tahun Periode" type="number"></v-text-field>
                                </v-flex>
                            </v-layout>
                            <v-layout row>
                                <v-flex xs6 pa-1>
                                     <v-menu 
                                        ref="menustartdate" v-model="menustartdate" 
                                        :close-on-content-click="false" :nudge-right="0" lazy transition="scale-transition"
                                        offset-y full-width max-width="290px" min-width="290px">
                                        <template v-slot:activator="{ on }">
                                            <v-text-field v-model="startComputedDateFormatted" label="Start Date" readonly v-on="on" @blur="date = deFormatedDate(startComputedDateFormatted)"></v-text-field>
                                        </template>
                                        <v-date-picker v-model="selected.periodeStartDate" no-title @input="menustartdate = false"></v-date-picker>
                                     </v-menu>
                                </v-flex>
                                <v-flex xs6 pa-1>
                                    <v-menu 
                                        ref="menuenddate" v-model="menuenddate" 
                                        :close-on-content-click="false" :nudge-right="0" lazy transition="scale-transition"
                                        offset-y full-width max-width="290px" min-width="290px">
                                        <template v-slot:activator="{ on }">
                                            <v-text-field v-model="endComputedDateFormatted" label="End Date" readonly v-on="on" @blur="date = deFormatedDate(endComputedDateFormatted)"></v-text-field>
                                        </template>
                                        <v-date-picker v-model="selected.periodeEndDate" no-title @input="menuenddate = false"></v-date-picker>
                                    </v-menu>
                                </v-flex>
                            </v-layout>
                            <v-layout row>
                                <v-flex pa-1 text-md-right>
                                    <v-btn small color="error" @click="periodeDelete()">Hapus</v-btn>
                                    <v-btn small color="primary" @click="periodeSimpan()">Simpan</v-btn>
                                </v-flex>
                            </v-layout>
                        </v-flex>
                    </v-layout>
                </v-flex>
            </v-layout>
        </v-card>
    </v-layout>
</template>

<script>
    module.exports = {
        data: () => ({
            menustartdate: false,
            menuenddate: false,
            date: new Date().toISOString().substr(0, 10),
            bulan: [
                {
                    periodeMonth: "1",
                    name: "Januari"
                },
                {
                    periodeMonth: "2",
                    name: "Februari"
                },
                {
                    periodeMonth: "3",
                    name: "Maret"
                },
                {
                    periodeMonth: "4",
                    name: "April"
                },
                {
                    periodeMonth: "5",
                    name: "Mei"
                },
                {
                    periodeMonth: "6",
                    name: "Juni"
                },
                {
                    periodeMonth: "7",
                    name: "Juli"
                },
                {
                    periodeMonth: "8",
                    name: "Agustus"
                },
                {
                    periodeMonth: "9",
                    name: "September"
                },
                {
                    periodeMonth: "10",
                    name: "Oktober"
                },
                {
                    periodeMonth: "11",
                    name: "November"
                },
                {
                    periodeMonth: "12",
                    name: "Desember"
                },
            ]
        }),
        computed: {
            selected: {
                get() {
                    return this.$store.state.periode.selected;
                },
                set(data) {
                    this.$store.commit('periode/update_selected', data)
                }
            },
            snackbar: {
                get() {
                    return this.$store.state.periode.snackbar;
                },
                set(bool) {
                    this.$store.commit("periode/open_snackbar", bool)
                }
            },
            msgsnackbar() {
                return this.$store.state.periode.message_snack;
            },
            startComputedDateFormatted() {
                return this.formatDate(this.selected.periodeStartDate)
            },
            endComputedDateFormatted() {
                return this.formatDate(this.selected.periodeEndDate)
            },
        },
        methods: {
            formatDate(date) {
                if (!date) return null

                const [year, month, day] = date.split('-')
                return `${day}-${month}-${year}`
            },
            deFormatedDate(date) {
                if (!date) return null

                const [day, month, year] = date.split('-')
                return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
            },
            periodeDelete() {
                this.$store.dispatch("periode/deletePeriode")
            },
            periodeSimpan() {
                this.$store.dispatch("periode/checkNewOrEdit")
            },
            periodeTambah() {
                this.$store.commit("periode/update_selected", {})
            },
            openSnackBar(bool) {
                this.$store.commit("periode/update_message_snack", "");
                this.$store.commit("periode/open_snackbar", bool);
            },
            setMonthText(id) {
                const targetMonth = this.bulan.find((month) => month.id === id);

                if (targetMonth) {
                    this.selected.periodeMonth = targetMonth;
                }
            }
        },
    }
</script>