<template>
    <v-layout class="fill-height" column>
        <v-card>
            <v-layout row>
                <v-flex xs-12 pl-2 pr-2 pt-2 pb-2>
                    <v-data-table :headers="headers" :items="l_periode" :loading="isLoading" :pagination.sync="pagination" class="elevation-1">
                        <template slot="items" slot-scope="props">
                            <tr :class="{'amber lighten-4':isSelected(props.item)}" @click="selectPeriode(props.item)">
                                <td class="text-xs-center pa-2">{{ props.item.periodeID }}</td>
                                <td class="text-xs-center pa-2">{{ props.item.periodeName }}</td>
                                <td class="text-xs-center pa-2">{{ props.item.periodeStartDate }}</td>
                                <td class="text-xs-center pa-2">{{ props.item.periodeEndDate }}</td>
                                <td v-if="props.item.periodeIsClosed === 'Y'" class="text-xs-center pa-2">YA</td>
                                <td v-else class="text-xs-center pa-2">TIDAK</td>
                            </tr>
                        </template>
                        <template>
                            <div class="text-xs-center">
                                <v-pagination v-model="page" :length="15" :total-visible="7"></v-pagination>
                            </div>
                        </template>
                    </v-data-table>
                </v-flex>
            </v-layout>
        </v-card>
    </v-layout>
</template>

<style scoped>
    table.v-table tbody td,
    table.v-table tbody th {
        height: 40px;
    }

    table.v-table thead tr {
        height: 40px;
    }
</style>

<script>
    module.exports =  {
        mounted() {
            this.$store.dispatch("periode/getList");
        },
        data() {
            return {
                page: 1,
                pagination: {
                    descending: false,
                    page: 1,
                    rowsPerPage: 5,
                    sortBy: 'periodeID',
                    totalItems: this.$store.state.periode.total_list,
                },
                headers: [
                    {
                        text: "NO",
                        align: "center",
                        sortable: false,
                        value: "no",
                        width: "20%",
                        class: "pa-2 blue lighten-3 white--text"
                    },
                    {
                        text: "PERIODE",
                        align: "center",
                        sortable: false,
                        value: "no",
                        width: "20%",
                        class: "pa-2 blue lighten-3 white--text"
                    },
                    {
                        text: "START DATE",
                        align: "center",
                        sortable: false,
                        value: "no",
                        width: "20%",
                        class: "pa-2 blue lighten-3 white--text"
                    },
                    {
                        text: "END DATE",
                        align: "center",
                        sortable: false,
                        value: "no",
                        width: "20%",
                        class: "pa-2 blue lighten-3 white--text"
                    },
                    {
                        text: "CLOSED",
                        align: "center",
                        sortable: false,
                        value: "no",
                        width: "20%",
                        class: "pa-2 blue lighten-3 white--text"
                    },
                ]
            }
        },
        computed: {
            l_periode() {
                return this.$store.state.periode.periode;
            },
            selected: {
                get() {
                    return this.$store.state.periode.selected;
                },
                set(data) {
                    this.$store.commit('periode/update_selected', data)
                }
            },
            isLoading() {
                return this.$store.state.periode.status_get == 1;
            }
        },
        methods: {
            isSelected(row) {
                return row.periodeID == this.$store.state.periode.selected.periodeID
            },
            selectPeriode(per) {
                const selRow = {...per};
                this.selected = selRow;
            }
        },
    }
</script>