<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="PID" outline @keyup.enter="searchPatient" v-model="snorm" hide-details></v-text-field>
                <v-text-field class="xs6 ma-1" label="Nama" outline @keyup.enter="searchPatient" v-model="name" hide-details></v-text-field>

                <!-- <span @click="searchPatient"  class="icon-medium-fill-base xs1 white--text success iconsearch-search"></span>-->
                <span @click="setNewPatient" class="icon-medium-fill-base xs1 white--text primary  ml-1 icon-add"></span>
            </v-layout>
            <v-layout row v-if="onsearch"><v-progress-linear :indeterminate="true"></v-progress-linear></v-layout>
        </v-card>
        <v-card>
            <v-layout style="height:650px;overflow: auto;" row>
                <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                    <v-data-table :headers="headers" :items="patients" :loading="isLoading" hide-actions 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_PatientNoReg}}</td>
                            <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.M_PatientName}}</td>
                            <td class="text-xs-center pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.M_PatientHP}}</td>
                            <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.M_SexName}}</td>
                        </template>
                    </v-data-table>
                    <!--<v-pagination  style="margin-top:10px;margin-bottom:10px" :total-visible="15" v-model="curr_page" :length="xtotal_page"></v-pagination>-->
                </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("patient/getsexreg")
                this.$store.dispatch("patient/search", {
                    name: this.name,
                    snorm: this.snorm,
                    current_page: this.curr_page,
                    lastid: -1
                })
            },
            methods: {
                isSelected(p) {
                    return p.M_PatientID == this.$store.state.patient.selected_patient.M_PatientID
                },
                searchPatient() {
                    this.$store.dispatch("patient/search", {
                        name: this.name,
                        snorm: this.snorm,
                        current_page: 1,
                        lastid: -1
                    })
                    this.$store.commit("patient/update_current_page", 1)
                },
                selectMe(pat) {
                    if (this.$store.state.patient.no_save == 0) {
                        this.$store.commit("patient/update_selected_patient", pat)
                        this.$store.commit("patient/update_norm", pat.M_PatientNoReg)
                        this.$store.commit("patient/update_patient_prefix", pat.M_PatientPrefix)
                        this.$store.commit("patient/update_patient_name", pat.M_PatientName)
                        this.$store.commit("patient/update_patient_suffix", pat.M_PatientSuffix)
                        this.$store.commit("patient/update_selected_title", {
                            M_TitleID: pat.M_PatientM_TitleID,
                            M_TitleName: pat.M_TitleName
                        })
                        this.$store.commit("patient/update_selected_sex", {
                            M_SexID: pat.M_PatientM_SexID,
                            m_sexname: pat.M_SexName
                        })
                        this.$store.commit("patient/update_selected_religion", {
                            M_ReligionID: pat.M_PatientM_ReligionID,
                            M_ReligionName: pat.M_ReligionName
                        })
                        this.$store.commit("patient/update_dob", pat.M_PatientDOB)
                        this.$store.commit("patient/update_hp", pat.M_PatientHP)
                        this.$store.commit("patient/update_phone", pat.M_PatientPhone)
                        this.$store.commit("patient/update_email", pat.M_PatientEmail)
                        this.$store.commit("patient/update_pob", pat.M_PatientPOB)
                        this.$store.commit("patient/update_selected_kartuidentitas", {
                            M_IdTypeID: pat.M_PatientM_IdTypeID,
                            M_IdTypeName: pat.M_IdTypeName
                        })
                        this.$store.commit("patient/update_noidentitas", pat.M_PatientIDNumber)
                        this.$store.commit("patient/update_note", pat.M_PatientNote)
                        this.$store.commit("patient/update_nik", pat.M_PatientNIK)
                        this.$store.commit("patient/update_jabatan", pat.M_PatientJabatan)
                        this.$store.commit("patient/update_kedudukan", pat.M_PatientKedudukan)
                        this.$store.commit("patient/update_pj", pat.M_PatientPJ)
                        this.$store.commit("patient/update_location", pat.M_PatientLocation)
                        this.$store.commit("patient/update_job", pat.M_PatientJob)
                        this.$store.dispatch("patient/getaddress", {
                            id: pat.M_PatientID
                        })
                        this.$store.commit("patient/update_act", 'edit')
                    } else {
                        this.$store.commit("patient/update_open_alert_confirmation", true)
                    }

                },
                closeAlertConfirmation() {
                    this.$store.commit("patient/update_open_alert_confirmation", false)
                },
                forgetAlertConfirmation() {
                    this.$store.commit("patient/update_no_save", 0)
                    this.$store.commit("patient/update_open_alert_confirmation", false)
                },
                updateAlert_success(val) {
                    this.$store.commit("patient/update_alert_success", val)
                },
                setNewPatient() {
                    this.$store.commit("patient/update_selected_patient", {})
                    this.$store.commit("patient/update_norm", '')
                    this.$store.commit("patient/update_patient_name", '')
                    this.$store.commit("patient/update_selected_title", {})
                    this.$store.commit("patient/update_selected_sex", {})
                    this.$store.commit("patient/update_selected_religion", {})
                    this.$store.commit("patient/update_dob", '')
                    this.$store.commit("patient/update_hp", '')
                    this.$store.commit("patient/update_phone", '')
                    this.$store.commit("patient/update_email", '')
                    this.$store.commit("patient/update_pob", '')
                    this.$store.commit("patient/update_selected_kartuidentitas", {})
                    this.$store.commit("patient/update_noidentitas", '')
                    this.$store.commit("patient/update_note", '')
                    this.$store.commit("patient/update_nik", '')
                        this.$store.commit("patient/update_jabatan", '')
                        this.$store.commit("patient/update_kedudukan", '')
                        this.$store.commit("patient/update_pj", '')
                        this.$store.commit("patient/update_location", '')
                        this.$store.commit("patient/update_job", '')
                    this.$store.commit("patient/update_addresses", [])

                    this.$store.commit("patient/update_act", 'new')
                },
                closeDialogSuccess() {
                    let arrpatient = this.$store.state.patient.patients
                    var idx = _.findIndex(arrpatient, item => item.M_PatientID === this.$store.state.patient.last_id)
                    console.log(idx)
                    this.$store.dispatch("patient/search", {
                        name: this.name,
                        snorm: this.snorm,
                        current_page: this.curr_page,
                        lastid: idx
                    })
                    this.$store.commit("patient/update_dialog_success", false)
                }
            },
            computed: {
                onsearch(){
                    return this.$store.state.patient.onsearch
                },
                dialogsuccess: {
                    get() {
                        return this.$store.state.patient.dialog_success
                    },
                    set(val) {
                        this.$store.commit("patient/update_dialog_success", val)
                    }
                },
                msgsuccess() {
                    return this.$store.state.patient.msg_success
                },
                snackbar: {
                    get() {
                        return this.$store.state.patient.alert_success
                    },
                    set(val) {
                        this.$store.commit("patient/update_alert_success", val)
                    }
                },
                isLoading() {
                    return this.$store.state.patient.search_status == 1
                },
                patients() {
                    return this.$store.state.patient.patients
                },
                totalpatient() {
                    return this.$store.state.patient.total_patient
                },
                curr_page: {
                    get() {
                        return this.$store.state.patient.current_page
                    },
                    set(val) {
                        this.$store.commit("patient/update_current_page", val)
                        this.$store.dispatch("patient/search", {
                            name: this.name,
                            snorm: this.snorm,
                            current_page: val,
                            lastid: -1
                        })
                    }
                },
                xtotal_page: {
                    get() {
                        return this.$store.state.patient.total_patient
                    },
                    set(val) {
                        this.$store.commit("patient/update_total_patient", val)
                    }
                },
                openalertconfirmation: {
                    get() {
                        return this.$store.state.patient.open_alert_confirmation
                    },
                    set(val) {
                        this.$store.commit("patient/update_open_alert_confirmation", val)
                    }
                },

            },
            data() {
                return {
                    msgalertconfirmation: "Perubahan yang telah dilakukan belum disimpan dong !",
                    items: [],
                    name: '',
                    snorm: '',
                    page: 1,
                    headers: [{
                            text: "PID",
                            align: "left",
                            sortable: false,
                            value: "mr",
                            width: "10%",
                            class: "pa-2 blue lighten-3 white--text"
                        },
                        {
                            text: "NAMA",
                            align: "left",
                            sortable: false,
                            value: "lab",
                            width: "25%",
                            class: "pa-2 blue lighten-3 white--text"
                        },
                        {
                            text: "NO HP",
                            align: "center",
                            sortable: false,
                            value: "name",
                            width: "15%",
                            class: "pa-2 blue lighten-3 white--text"
                        },

                        {
                            text: "JENIS KELAMIN",
                            align: "left",
                            sortable: false,
                            value: "status",
                            width: "15%",
                            class: "pa-2 blue lighten-3 white--text"
                        }
                    ],
                    pagination: {
                        descending: false,
                        page: 1,
                        rowsPerPage: 5,
                        sortBy: 'M_PatientName',
                        totalItems: this.$store.state.patient.total_patients
                    }
                };
            }
        }
    </script>