<template>
    <v-layout class="fill-height" column>
        <v-dialog v-model="dialogsuccess" persistent max-width="290">
            <v-card>
                <v-card-title color="success" class="headline">Berhasil !</v-card-title>
                <v-card-text>
                    {{msgsuccess}}
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="green darken-1" flat @click="closeDialogSuccess">OK</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-card class="mb-2 pa-2 searchbox">
            <v-layout>
                <v-text-field class="xs6 ma-1" label="NIK" @keyup.enter="searchStaff" outline v-model="snik" hide-details></v-text-field>

                <v-text-field class="xs6 ma-1" label="Nama" @keyup.enter="searchStaff" outline v-model="name" hide-details></v-text-field>
                <!--<v-select class="xs6 mini-select ma-1" :items="xstatuses" 
                  item-text="label"
@change="searchStaff()"
                  return-object
                  v-model="xselectedstatus"
                  label="Status" outline   hide-details></v-select>-->
                <!--<v-btn class="xs3 ma-1" color="success" @click="searchStaff">Cari</v-btn>-->
                <span  @click="setNewStaff"  class="icon-medium-fill-base xs1 white--text primary  ml-1 icon-add"></span>
            </v-layout>
        </v-card>
        <v-card>
            <v-layout row>
                <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                    <v-data-table :headers="headers" :items="staffs" :loading="isLoading" :pagination.sync="pagination" class="elevation-1">
                        <template slot="items" slot-scope="props">
                            <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.M_StaffName }}</td>
                            <td class="text-xs-center pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.M_StaffNIK}}</td>
                            <td class="text-xs-center pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.M_StaffHP}}</td>
                            <td class="text-xs-center pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.M_PositionName}}</td>
                            <td class="text-xs-center pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.iskurir}}</td>
                        </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>
        <one-dialog-alert :status="openalertconfirmation" :msg="msgalertconfirmation" @forget-dialog-alert="forgetAlertConfirmation()"
            @close-dialog-alert="closeAlertConfirmation()"></one-dialog-alert>
    </v-layout>
</template>

<style scoped>
    .searchbox .v-input.v-text-field .v-input__slot {
        min-height: 60px;
    }

    .searchbox .v-btn {
        min-height: 60px;
    }

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

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

<script>
    module.exports = {
        components: {
            'one-dialog-info': httpVueLoader('../../common/oneDialogInfo.vue'),
            'one-dialog-alert': httpVueLoader('../../common/oneDialogAlert.vue')
        },
        mounted() {
            this.$store.dispatch("staff/getsexreg")
            this.$store.dispatch("staff/search", {
                name: this.name,
                snik: this.snik,
                status: this.xselectedstatus.value,
                lastid: -1
            })
        },
        methods: {
            isSelected(p) {
                return p.M_StaffID == this.$store.state.staff.selected_staff.M_StaffID
            },
            searchStaff() {             
                this.$store.dispatch("staff/search", {
                    name: this.name,
                    snik: this.snik,
                    status: this.xselectedstatus.value,
                    lastid: -1
                })
            },
            selectMe(sta) {
                if (this.$store.state.staff.no_save == 0) {
                    this.$store.commit("staff/update_selected_staff", sta)
                    this.$store.commit("staff/update_selected_branch", {
                        M_BranchID: sta.M_StaffM_BranchID,
                        M_BranchName: sta.M_BranchName
                    })
                    this.$store.commit("staff/update_staff_name", sta.M_StaffName)
                    this.$store.commit("staff/update_dob", sta.M_StaffDOBx)
                    this.$store.commit("staff/update_selected_sex", {
                        M_SexID: sta.M_StaffM_SexID,
                        m_sexname: sta.m_sexname
                    })
                    this.$store.commit("staff/update_address", sta.M_StaffAddress)
                    this.$store.commit("staff/update_cities",[{M_CityID:sta.M_StaffM_CityID,M_CityName:sta.M_CityName}])
                    this.$store.commit("staff/update_city_address",{M_CityID:sta.M_StaffM_CityID,M_CityName:sta.M_CityName})
                    this.$store.commit("staff/update_subareas",[{M_SubareaID:sta.M_StaffM_SubareaID,M_SubareaName:sta.M_SubareaName}])
                    this.$store.commit("staff/update_subarea_address",{M_SubareaID:sta.M_StaffM_SubareaID,M_SubareaName:sta.M_SubareaName})            
                            
                    this.$store.commit("staff/update_phone", sta.M_StaffPhone)
                    this.$store.commit("staff/update_hp", sta.M_StaffHP)
                    this.$store.commit("staff/update_selected_religion", {
                        M_ReligionID: sta.M_StaffM_ReligionID,
                        M_ReligionName: sta.M_ReligionName
                    })
                    this.$store.commit("staff/update_startdate", sta.M_StaffStartDate)
                    this.$store.commit("staff/update_enddate", sta.M_StaffEndDate)
                    this.$store.commit("staff/update_selected_position", {
                        M_PositionID: sta.M_StaffM_PositionID,
                        M_PositionName: sta.M_PositionName
                    })
                    this.$store.commit("staff/update_nik", sta.M_StaffNIK)
                    this.$store.commit("staff/update_timework", sta.M_StaffTimeWork)
                    this.$store.commit("staff/update_timeworksaturday", sta.M_StaffTimeWorkSaturday)
                    this.$store.commit("staff/update_blood", sta.M_StaffBlood)
                    this.$store.commit("staff/update_study", sta.M_StaffStudy)
                    this.$store.commit("staff/update_iscourier",sta.M_StaffIsCourier)
                    this.$store.commit("staff/update_ihsnumber", sta.OHStaffMapIhsNumber)
                    this.$store.commit("staff/update_act", 'edit')
                } else {
                    this.$store.commit("staff/update_open_alert_confirmation", true)
                }

            },
            closeAlertConfirmation() {
                this.$store.commit("staff/update_open_alert_confirmation", false)
            },
            forgetAlertConfirmation() {
                this.$store.commit("staff/update_no_save", 0)
                this.$store.commit("staff/update_open_alert_confirmation", false)
            },
            updateAlert_success(val) {
                this.$store.commit("staff/update_alert_success", val)
            },
            setNewStaff() {
                this.$store.commit("staff/update_selected_staff", {})
                this.$store.commit("staff/update_selected_branch", {})
                this.$store.commit("staff/update_staff_name", '')
                this.$store.commit("staff/update_dob", '')
                this.$store.commit("staff/update_selected_sex", {})
                this.$store.commit("staff/update_address", '')
                this.$store.commit("staff/update_city_address", {})
                this.$store.commit("staff/update_subarea_address", {})
                this.$store.commit("staff/update_phone", '')
                this.$store.commit("staff/update_hp", '')
                this.$store.commit("staff/update_selected_religion", {})
                this.$store.commit("staff/update_startdate", '')
                this.$store.commit("staff/update_enddate", '')
                this.$store.commit("staff/update_selected_position", {})
                this.$store.commit("staff/update_nik", '')
                this.$store.commit("staff/update_timework", '')
                this.$store.commit("staff/update_timeworksaturday", '')
                this.$store.commit("staff/update_blood", '')
                this.$store.commit("staff/update_study", '')
                this.$store.commit("staff/update_ihsnumber", '')

                this.$store.commit("staff/update_act", 'new')
            },
            closeDialogSuccess() {
                let arrstaff = this.$store.state.staff.staffs
                var idx = _.findIndex(arrstaff, item => item.M_StaffID === this.$store.state.staff.last_id)
                console.log(idx)
                this.$store.dispatch("staff/search", {
                    name: this.name,
                    snik: this.snik,
                    status: this.xselectedstatus.value,
                    lastid: idx
                })
                this.$store.commit("staff/update_dialog_success", false)
            }
        },
        computed: {
            dialogsuccess: {
                get() {
                    return this.$store.state.staff.dialog_success
                },
                set(val) {
                    this.$store.commit("staff/update_dialog_success", val)
                }
            },
            msgsuccess() {
                return this.$store.state.staff.msg_success
            },
            snackbar: {
                get() {
                    return this.$store.state.staff.alert_success
                },
                set(val) {
                    this.$store.commit("staff/update_alert_success", val)
                }
            },
            isLoading() {
                return this.$store.state.staff.search_status == 1
            },
            xstatuses() {
                return this.$store.state.staff.statuses
            },
            xselectedstatus: {
                get() {
                    return this.$store.state.staff.selected_status
                },
                set(val) {
                    this.$store.commit("staff/update_selected_status", val)
                }
            },
            staffs() {
                return this.$store.state.staff.staffs
            },
            openalertconfirmation: {
                get() {
                    return this.$store.state.staff.open_alert_confirmation
                },
                set(val) {
                    this.$store.commit("staff/update_open_alert_confirmation", val)
                }
            }
        },
        data() {
            return {
                msgalertconfirmation: "Perubahan yang telah dilakukan belum disimpan dong !",
                items: [],
                name: '',
                snik: '',
                page: 1,
                headers: [{
                        text: "NAMA",
                        align: "left",
                        sortable: false,
                        value: "mr",
                        width: "25%",
                        class: "pa-2 blue lighten-3 white--text"
                    },
                    {
                        text: "NIK",
                        align: "center",
                        sortable: false,
                        value: "lab",
                        width: "10%",
                        class: "pa-2 blue lighten-3 white--text"
                    },
                    {
                        text: "HP",
                        align: "center",
                        sortable: false,
                        value: "name",
                        width: "10%",
                        class: "pa-2 blue lighten-3 white--text"
                    },

                    {
                        text: "POSISI",
                        align: "left",
                        sortable: false,
                        value: "status",
                        width: "15%",
                        class: "pa-2 blue lighten-3 white--text"
                    },
                    {
                        text: "SEBAGAI KURIR",
                        align: "left",
                        sortable: false,
                        value: "status",
                        width: "10%",
                        class: "pa-2 blue lighten-3 white--text"
                    }
                ],
                pagination: {
                    descending: false,
                    page: 1,
                    rowsPerPage: 5,
                    sortBy: 'M_StaffName',
                    totalItems: this.$store.state.staff.total_staffs
                }
            };
        }
    }
</script>