<template>
    <div style="width: 100%;">
        <v-layout row wrap>
            <v-flex xs12 fill-height>
                <v-toolbar color="primary" dark>
                <v-toolbar-title class="white--text"
                    >USER</v-toolbar-title
                >
                <!-- <v-spacer></v-spacer>
                <v-btn icon @click="openDialogApproveLevel()">
                    <v-icon>add_box</v-icon>
                </v-btn> -->
                </v-toolbar>
                <v-card class="pa-2">
                        <v-layout>
                            <v-flex xs3 pl-2>
                                <v-text-field
                                    label="Cari..."
                                    placeholder="Nama"
                                    outline
                                    v-model="xsearch"
                                    hide-details
                                ></v-text-field>
                            </v-flex>
                            <v-flex pl-2 pr-2>
                                <v-btn
                                    dark
                                    color="primary"
                                    style="min-width: 50px; height: 50px; margin: 0"
                                    @click="mainTableSearch()"
                                    >
                                    <v-icon>search</v-icon>
                                </v-btn>
                            </v-flex>
                        </v-layout>
                </v-card>
                <v-card class="pa-2 mt-2">
                    <v-layout row style="max-height: 600px; overflow: auto">
                        <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                            <v-data-table
                                :items="users"
                                :headers="headers"
                                :loading="isLoading"
                                hide-actions
                                class="elevation-1"
                            >
                                <template slot="items" slot-scope="props">
                                    <td
                                        class="text-xs-center pa-2"
                                    >{{ props.item.M_UserFullName }}</td>
                                    <td
                                        class="text-xs-center pa-2"
                                    >{{ props.item.M_StaffName }}</td>
                                </template>
                            </v-data-table>
                        </v-flex>
                    </v-layout>
                    <v-divider></v-divider>
                    <v-pagination
                        style="margin-top: 10px; margin-bottom: 10px"
                        v-model="curr_page" :length="xtotal_page"
                    ></v-pagination>
                </v-card>
            </v-flex>
        </v-layout>

    </div>
</template>

<style scoped>
.date-type-table {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.table.v-table tbody td,
table.v-table tbody th {
  height: 40px;
}

.table.v-table thead tr {
  height: 40px;
}

.scroll-container {
  scroll-padding: 50px 0 0 50px;
}
</style>

<script>
module.exports = {
    components: {
        "dialog-form-voucher": httpVueLoader("./dialogFormVoucher.vue"),
        "one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue"),
        "one-dialog-error": httpVueLoader("../../common/oneDialogError.vue")
    },
    data() {
        return {
            xname: "",
            xstartTotal: 0,
            xendTotal: 0,
            xid: 0,
            dialogdeletealert: false,
            msgalertname: "",
            codeDepartment: "",
            headers: [
                {
                    text: "NAMA USER",
                    align: "center",
                    sortable: false,
                    value: "date",
                    width: "50%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "NAMA STAFF",
                    align: "center",
                    sortable: false,
                    value: "total",
                    width: "50%",
                    class: "blue lighten-3 white--text",
                }
            ],
        }
    },
    mounted() {
        
    },
    computed: {
        users() {
            return this.$store.state.approveuser.users
        },
        isLoading() {
            return this.$store.state.approveuser.search_status == 1
        },
        xsearch: {
            get() {
                return this.$store.state.approveuser.xsearch
            },
            set(val) {
                this.$store.commit("approveuser/update_xsearch", val)
            }
        },
        curr_page: {
            get() {
                return this.$store.state.approveuser.current_page
            },
            set(val) {
                this.$store.commit("approveuser/update_current_page", val)
                this.$store.commit("approveuser/update_last_id", -1)
                this.$store.dispatch("approveuser/getUser", {
                    approveId: this.$store.state.approve.selected_approvelevel.M_ApproveLevelID,
                    current_page: this.$store.state.approveuser.current_page,
                    search: this.$store.state.approveuser.xsearch,
                })
            }
        },
        xtotal_page: {
            get() {
                return this.$store.state.approveuser.total_page
            },
            set(val) {
                this.$store.commit("approveuser/update_total_page", val)
            }
        },
    },
    methods: {
        thr_search: _.debounce(function () {
            this.$store.dispatch("approveuser/search")
        }, 1000),
        mainTableSearch() {
            this.$store.dispatch("approveuser/getUser", {
                approveId: this.$store.state.approve.selected_approvelevel.M_ApproveLevelID,
                current_page: this.$store.state.approveuser.current_page,
                search: this.$store.state.approveuser.xsearch,
            })
        },
    },
    watch: {
        // xsearch(val, old) {
        //     this.xsearch = val
        //     this.thr_search()
        // },
    }
}
</script>