<template>
    <v-layout class="fill-height" column>
        <v-snackbar v-model="snackbar.isOpen" :timeout="5000" :multi-line="false" :vertical="false" :top="true" :color="snackbar.color">
            {{ snackbar.msg }}
            <v-btn flat @click="closeSnackbar(false)">Tutup</v-btn>
        </v-snackbar>
        <v-card>
            <v-layout row wrap class="pa-2">
                <v-flex xs12 class="text-xs-right pr-0">
                    <v-btn flat icon color="primary" @click="openDialogAdd()">
                        <v-icon medium>add_box</v-icon>
                    </v-btn>
                </v-flex>
                <v-divider></v-divider>
                <v-flex xs12>
                    <v-data-table
                        :headers="headers_precab"
                        :loading="loading_precab"
                        :items="tabel_precab.records"
                        class="elevation-1"
                        hide-actions
                        xs12
                    >
                        <template v-slot:items="props">
                            <tr @click="selectPrecab(props.item)" :class="{'yellow lighten-4':isTypeSelected(props.item.BranchFaPercentID)}">
                                <td>{{ props.index + 1 }}</td>
                                <td class="text-xs-center pa-2">{{ props.item.BranchFaPercentType }}</td>
                                <td class="text-xs-center pa-2">
                                    <v-icon
                                        small
                                        class="mr-2"
                                        @click="openDialogEdit(props.item)"
                                    >edit</v-icon>
                                    <v-icon
                                        small
                                        @click="openDialogDel(props.item)"
                                    >delete</v-icon>
                                </td>
                            </tr>
                        </template>
                    </v-data-table>
                    <div class="text-xs-center pt-2">
                        <v-pagination v-model="pagination_precab" :length="pages" :total-visible="5"></v-pagination>
                    </div>
                </v-flex>
            </v-layout>
        </v-card>
        <v-dialog persistent width="500" v-model="dialogFormType">
            <v-card>
                <v-card-title class="headline grey lighten-2" primary-title>
                    {{ simpan_state == "delete" ? "DELETE TIPE" : "FORM TIPE"}}
                </v-card-title>
                <v-card-text>
                    <v-subheader v-if="simpan_state == 'delete'">Apa anda yakin akan menghapus tipe berikut: </v-subheader>
                    <v-text-field
                        v-model="input_precab.typename"
                        label="Nama Tipe"
                        outline
                        :disabled="simpan_state == 'delete'"
                    ></v-text-field>
                </v-card-text>
                <v-divider></v-divider>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn
                        color="error"
                        flat
                        @click="dialogFormType = false"
                    >Batal</v-btn>
                    <v-btn
                        color="primary"
                        @click="crudType()"
                        :disabled="input_precab.typename == ''"
                    >{{ simpan_state == "delete" ? "Yakin" : "Simpan"}}</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-layout>
</template>

<style scoped></style>

<script>
    module.exports = {
        components: {

        },
        mounted() {
            this.$store.dispatch("presentase/get_listing_type", {currpages: 1})
        },
        data() {
            return {
                headers_precab: [
                    {
                        text: "NO",
                        align: "left",
                        sortable: false,
                        value: "no",
                        width: "10%",
                        class: "blue lighten-3 white--text",
                    },
                    {
                        text: "TIPE",
                        align: "center",
                        sortable: false,
                        value: "type",
                        width: "60%",
                        class: "blue lighten-3 white--text",
                    },
                    {
                        text: "AKSI",
                        align: "center",
                        sortable: false,
                        value: "aksi",
                        width: "30%",
                        class: "blue lighten-3 white--text",
                    },
                ],
                simpan_state: 'add'
            }
        },
        computed: {
            loading_api() {
                return this.$store.state.presentase.loading_api;
            },
            tabel_precab() {
                return this.$store.state.presentase.tabel_precab;
            },
            loading_precab() {
                return this.$store.state.presentase.loading_precab;
            },
            selected_precab: {
                get() {
                    return this.$store.state.presentase.selected_precab;
                },
                set(data) {
                    this.$store.commit("presentase/update_selected_precab", data)
                }
            },
            pages() {
                let total_data = this.tabel_precab.total;
                if (total_data == undefined) {
                    return 1
                } 

                return Math.ceil(total_data / 10);
            },
            pagination_precab: {
                get() {
                    return this.$store.state.presentase.pagination_precab
                },
                set(data) {
                    this.$store.commit("presentase/update_pagination_precab", data)
                    this.$store.dispatch("presentase/get_listing_type", {currpages: data})
                }
            },
            snackbar: {
                get() {
                    return this.$store.state.presentase.snackbar
                },
                set(data) {
                    this.$store.commit("presentase/update_snackbar", data)
                }
            },
            input_precab: {
                get() {
                    return this.$store.state.presentase.input_precab
                },
                set(data) {
                    this.$store.commit("presentase/update_input_precab", data)
                }
            },
            dialogFormType: {
                get() {
                    return this.$store.state.presentase.dialogFormType
                },
                set(data) {
                    this.$store.commit("presentase/update_dialog_form", data)
                }
            },
        },
        methods: {
            openDialogAdd() {
                this.input_precab = {typeid: 0, typename: ''};
                this.simpan_state = "add";
                this.dialogFormType = true;
            },
            openDialogEdit(data) {
                this.input_precab = {typeid: data.BranchFaPercentID, typename:data.BranchFaPercentType};
                this.simpan_state = "edit";
                this.dialogFormType = true;
            },
            openDialogDel(data) {
                this.input_precab = {typeid: data.BranchFaPercentID, typename:data.BranchFaPercentType};
                this.simpan_state = "delete";
                this.dialogFormType = true;
            },
            selectPrecab(data) {
                this.selected_precab = data;
                this.$store.dispatch("presentase/get_listing_reg", { presentasecabangid: data.BranchFaPercentID, currpages: 1 });
            },
            isTypeSelected(id) {
                return id == this.$store.state.presentase.selected_precab.BranchFaPercentID;
            },
            closeSnackbar(bool) {
                let snac = {
                    isOpen: bool,
                    color: "error",
                    msg: ""
                };
                this.snackbar = snac;
            },
            crudType() {
                if (this.loading_api) {
                    let snac = {
                        isOpen: true,
                        color: "warning",
                        msg: "Loading proses lain ...."
                    };
                    this.snackbar = snac;
                    return;
                }

                if (this.simpan_state == "add") {
                    let params = { typename: this.input_precab.typename };
                    this.$store.dispatch("presentase/insert_type_presentase", params);
                } else if (this.simpan_state == "edit") {
                    let params = { typename: this.input_precab.typename,  typeid: this.input_precab.typeid};
                    this.$store.dispatch("presentase/edit_type_presentase", params);
                } else if (this.simpan_state == "delete") {
                    let params = { typeid: this.input_precab.typeid};
                    this.$store.dispatch("presentase/delete_type_presentase", params);
                }
            }
        },
    }
</script>