<template>
<div style="width: 100%;">
    <v-toolbar dark class="blue lighten-3 white--text">
        <v-toolbar-title class="white--text">DAFTAR VERIFIKASI EDIT JURNAL</v-toolbar-title>
        <v-spacer></v-spacer>
    </v-toolbar>

    <v-card class="pa-2">
        <v-layout row align-center>
            <v-flex grow>
                <span>
                    <v-chip outline color="red">
                        {{ selected_periode.periodeStartDate }} - {{ selected_periode.periodeEndDate }}
                    </v-chip>
                </span>
            </v-flex>
            <v-flex xs2 pl-2>
                <v-menu
                    v-model="menuFilterDate" offset-y lazy min-width="290px"
                    transition="scale-transition" max-width="290px" full-width
                    :nudge-right="40" :close-on-content-click="false"
                >
                    <template v-slot:activator="{ on }">
                        <v-text-field
                            v-model="filterDateFormatted" label="Tanggal Awal"
                            hide-details readonly v-on="on" outline
                        ></v-text-field>
                    </template>
                    <v-date-picker
                        v-model="filter.startdate" no-title
                        @input="menuFilterDate = false"
                    ></v-date-picker>
                </v-menu>
            </v-flex>
            <v-flex xs2 pl-2>
                <v-menu
                    v-model="menuFilterEndDate" offset-y lazy min-width="290px"
                    transition="scale-transition" max-width="290px" full-width
                    :nudge-right="40" :close-on-content-click="false"
                >
                    <template v-slot:activator="{ on }">
                        <v-text-field
                            v-model="filterEndDateFormatted" label="Tanggal Akhir"
                            hide-details readonly v-on="on" outline
                        ></v-text-field>
                    </template>
                    <v-date-picker
                        v-model="filter.enddate" no-title
                        @input="menuFilterEndDate = false"
                    ></v-date-picker>
                </v-menu>
            </v-flex>
            <v-flex xs2 pl-2>
                <v-autocomplete
                    :items="list_jurnaltype" v-model="filter.typejournal_id" outline hide-details
                    item-text="JurnalTypeName" label="Tipe jurnal" item-value="JurnalTypeID"
                ></v-autocomplete>
            </v-flex>
            <v-flex xs2 pl-2>
                <v-text-field 
                    v-model="filter.search" hide-details
                    label="Cari Nomor Jurnal" outline
                ></v-text-field>
            </v-flex>
            <v-flex shrink pl-2>
                <v-btn
                    dark color="info" @click="searchJurnal()"
                    style="min-width: 50px; height: 50px; margin: 0;"
                >
                    <v-icon>search</v-icon>
                </v-btn>
            </v-flex>
            <v-flex text-xs-right>
                <v-btn
                    color="orange" class="white--text"
                    @click="choosePeriode()"
                >Accounting Period</v-btn>
            </v-flex>
        </v-layout>
    </v-card>

    <v-card class="pa-2 mt-2">
        <v-data-table
            :headers="headers" :items="listjournal.records" 
            hide-actions class="elevation-1"
        >
            <template slot="items" slot-scope="props">
                <tr>
                    <td class="text-xs-center pa-2">
                        {{ props.item.jurnalDate }}
                    </td>
                    <td class="text-xs-center pa-2">
                        {{ props.item.jurnalNo }}
                    </td>
                    <td class="text-xs-left pa-2">
                        {{ props.item.jurnalTitle }}
                    </td>
                    <td class="text-xs-left pa-2">
                        {{ props.item.jurnalDescription }}
                    </td>
                    <td class="text-xs-center pa-2">
                        {{ props.item.JurnalRequestEditStaffName }}
                    </td>
                    <td class="text-xs-center pa-2">
                        <div>
                            <v-chip color="info" outline small>
                                {{ props.item.JurnalRequestEditStatusRequest }}
                            </v-chip> <br>
                            <p 
                                v-if="props.item.JurnalRequestEditStatusRequest == 'approved'" 
                                class="ml-0 mb-0"
                            >Approved by: {{ props.item.RequestApprovedBy }}</p>
                        </div>
                    </td>
                    <td class="text-xs-center pa-2">
                        <div>
                            <v-chip color="info" outline small>
                                {{ props.item.JurnalRequestEditStatusEdit }}
                            </v-chip> <br>
                            <p 
                                v-if="props.item.JurnalRequestEditStatusEdit == 'approved'" 
                                class="ml-0 mb-0"
                            >Approved by: {{ props.item.EditApprovedBy }}</p>
                        </div>
                    </td>
                    <td class="text-xs-center pa-2">
                        <v-btn
                            outline small color="primary"
                            @click="openDetailJurnal(props.item)"
                        > DETAIL</v-btn>
                    </td>
                </tr>
            </template>
        </v-data-table>
        <v-divider class="my-1"></v-divider>
        <div class="pa-2 mt-1 text-xs-center"> 
            <v-pagination v-model="currpage" :length="pagilength" :total-visible="10"></v-pagination>
        </div>
    </v-card>

    <dialog-verifikasi></dialog-verifikasi>
    <dialog-periode></dialog-periode>
    <dialog-request></dialog-request>
    <v-snackbar 
        v-model="snacbar.active" multi-line top
        :timeout="3000" :color="snacbar.color"
    >
        {{ snacbar.message }}
        <v-btn class="ml-2" round flat @click="snacbar.active = false">
            Tutup
        </v-btn>
    </v-snackbar>
</div>
</template>

<script>
module.exports = {
    components: {
        'dialog-verifikasi': httpVueLoader('./dialogVerfikasiEdit.vue'),
        'dialog-periode': httpVueLoader('./dialogSelectPeriode.vue'),
        'dialog-request': httpVueLoader('./dialogRequestEdit.vue')
    },
    mounted() {
        this.$store.dispatch("journal/getListTypeJurnal")
        this.$store.dispatch("journal/getListPeriode")
            .then(() => {
                this.$store.dispatch("journal/getListJournalEdit")
            })
    },
    data: () => ({
        menuFilterDate: false,
        menuFilterEndDate: false,
        headers: [
            {
                text: "JOURNAL DATE", align: "center", sortable: false,
                value: "action", width: "10%", class: "pa-1 blue lighten-3 white--text",
            },
            {
                text: "JOURNAL NO", align: "center", sortable: false,
                value: "action", width: "10%", class: "pa-1 blue lighten-3 white--text",
            },
            {
                text: "JOURNAL", align: "center", sortable: false,
                value: "action", width: "20%", class: "pa-1 blue lighten-3 white--text",
            },
            {
                text: "JOURNAL DESCRIPTION", align: "center", sortable: false,
                value: "action", width: "25%", class: "pa-1 blue lighten-3 white--text",
            },
            {
                text: "STAFF", align: "center", sortable: false,
                value: "action", width: "10%", class: "pa-1 blue lighten-3 white--text",
            },
            {
                text: "STATUS REQUEST", align: "center", sortable: false,
                value: "action", width: "10%", class: "pa-1 blue lighten-3 white--text",
            },
            {
                text: "STATUS EDIT", align: "center", sortable: false,
                value: "action", width: "10%", class: "pa-1 blue lighten-3 white--text",
            },
            {
                text: "ACTION", align: "center", sortable: false,
                value: "action", width: "5%", class: "pa-1 blue lighten-3 white--text",
            }
        ]
    }),
    computed: {
        listjournal() {
            return this.$store.state.journal.listjournal
        },
        list_jurnaltype() {
            return this.$store.state.journal.list_jurnaltype
        },
        list_periode() {
            return this.$store.state.journal.list_periode
        },
        currpage: {
            get() {
                return this.$store.state.journal.currpage
            },
            set(val) {
                this.$store.commit("journal/update_currpage", val)
                this.$store.dispatch("journal/getListJournalEdit")
            }
        },
        pagilength() {
            let total = this.listjournal.total
            if (total == undefined || total < 1) return 1
            return Math.ceil(total/10)
        },
        snacbar: {
            get() {
                return this.$store.state.journal.snacbar
            },
            set(val) {
                this.$store.commit("journal/update_snacbar", val)
            }
        },
        filter: {
            get() {
                return this.$store.state.journal.filter
            },
            set(val) {
                this.$store.commit("journal/update_filter", val)
            }
        },
        filterDateFormatted() {
            return this.formatDate(this.filter.startdate)
        },
        filterEndDateFormatted() {
            return this.formatDate(this.filter.enddate)
        },
        selected_periode() {
            return this.$store.state.journal.selected_periode
        }
    },
    methods: {
        formatDate(date) {
            if (!date) return null;
            const [year, month, day] = date.split('-');
            return `${day}-${month}-${year}`;
        },
        openDetailJurnal(item) {
            this.$store.commit("journal/update_selected_jurnal", item)
            
            if (item.JurnalRequestEditStatusRequest == 'request') {
                this.$store.commit("journal/update_dialog_edit_request", true)
            } else {
                this.$store.dispatch("journal/getDetailJournalEdit", item.jurnalID)
                this.$store.commit("journal/update_dialog_verifikasi", true)
            }
        },
        searchJurnal() {
            this.$store.dispatch("journal/getListJournalEdit")
        },
        choosePeriode() {
            this.$store.commit("journal/update_dialog_pick_periode", true)
        }
    },
    watch: {}
}
</script>
