<template>
    <v-layout class="fill-height" column>
        <v-card>
            <v-layout row>
                <v-flex xs-12>
                    <v-card-title>
                        <span class="title">Daftar Tipe R/K</span>
                        <v-spacer></v-spacer>
                        <v-text-field append-icon="search" label="Search" single-line hide-details v-model="xsearch"></v-text-field>
                    </v-card-title>
                </v-flex>
            </v-layout>
            <v-layout row>
                <v-flex xs-12 pl-2 pr-2 pt-2 pb-2>
                    <v-data-table :headers="headers" :items="xtypelist" :loading="isLoading" :pagination.sync="pagination" class="elevation-1">
                        <template slot="items" slot-scope="props">
                            <tr :class="{'amber lighten-4':isSelected(props.item)}" @click="selectType(props.item)">
                                <td class="text-xs-center pa-2">{{ props.item.rownumber }}</td>
                                <td class="text-xs-center pa-2">{{ props.item.Rk_TypeCode }}</td>
                                <td class="text-xs-center pa-2">{{ props.item.Rk_TypeName }}</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("rktype/getList");
        },
        data() {
            return {
                page: 1,
                pagination: {
                    descending: false,
                    page: 1,
                    rowsPerPage: 5,
                    sortBy: 'rownumber',
                    totalItems: this.$store.state.rktype.typelist,
                },
                headers: [
                    {
                        text: "NO",
                        align: "center",
                        sortable: false,
                        value: "no",
                        width: "20%",
                        class: "pa-2 blue lighten-3 white--text"
                    },
                    {
                        text: "KODE",
                        align: "center",
                        sortable: false,
                        value: "no",
                        width: "40%",
                        class: "pa-2 blue lighten-3 white--text"
                    },
                    {
                        text: "NAMA",
                        align: "center",
                        sortable: false,
                        value: "no",
                        width: "40%",
                        class: "pa-2 blue lighten-3 white--text"
                    },
                ]
            }
        },
        computed: {
            xtypelist() {
                return this.$store.state.rktype.typelist;
            },
            selected_type: {
                get() {
                    return this.$store.state.rktype.selected_type;
                },
                set(data) {
                    this.$store.commit('rktype/update_selected_type', data)
                }
            },
            isLoading() {
                return this.$store.state.rktype.status_get == 1;
            },
            xsearch: {
                get() {
                    return this.$store.state.rktype.search;
                },
                set(data) {
                    this.$store.commit('rktype/update_search', data)
                }
            },
        },
        methods: {
            isSelected(row) {
                return row.Rk_TypeID == this.$store.state.rktype.selected_type.Rk_TypeID
            },
            selectType(selected) {
                this.$store.commit('rktype/update_selected_type', selected);
                this.$store.commit("rktype/update_errors", [])
                this.$store.commit("rktype/update_act", "edit")
            },
            thr_search: _.debounce(function () {
                this.$store.dispatch("rktype/getList")
            }, 500),
        },
        watch: {
            xsearch(val, old) {
                this.xsearch = val
                this.thr_search()
            },
        }
    }
</script>