<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-dialog v-model="dialogsuccessorder" persistent max-width="290">
            <v-card>
                <v-card-title color="success" class="headline">Berhasil !</v-card-title>
                <v-card-text>
                    
                    <h1>{{nomor_order}}</h1>
                </v-card-text>
                <v-card-actions>
                    <v-btn color="grey darken-1" flat @click="dialogsuccessorder = false">Tutup</v-btn>
                    <v-spacer></v-spacer>
                    <v-btn color="green darken-1" flat @click="goToPay()">Bayar</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-card class="mb-2 pa-2 searchbox">
            <v-layout row>
                <v-flex xs1>
                    <span @click="setNewPatient" class="icon-medium-fill-base xs1 white--text primary  ml-1 icon-add"></span>
                </v-flex>
                <v-flex xs3>
                    <v-text-field class="xs3 ma-1" label="PID" outline @keyup.enter="searchPatient" v-model="snorm" hide-details></v-text-field>
                </v-flex>
                <v-flex xs8>
                    <v-text-field class="xs6 ma-1" label="Nama + HP + DOB + Alamat + NIK" outline @keyup.enter="searchPatient" v-model="name" hide-details></v-text-field>
                </v-flex>
                

                <!-- <span @click="searchPatient"  class="icon-medium-fill-base xs1 white--text success iconsearch-search"></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  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 v-bind:class="{'blue lighten-4':props.item.divider === 'Y','amber lighten-4':props.item.selected,'amber lighten-4':isSelected(props.item)}" class="text-xs-left pa-2"  @click="selectMe(props.item)">{{ props.item.M_PatientNoReg}}</td>
                            <td v-bind:class="{'blue lighten-4':props.item.divider === 'Y','amber lighten-4':props.item.selected,'amber lighten-4':isSelected(props.item)}" class="text-xs-left pa-2"  @click="selectMe(props.item)">{{ props.item.M_PatientName}}</td>
                            <td v-bind:class="{'blue lighten-4':props.item.divider === 'Y','amber lighten-4':props.item.selected,'amber lighten-4':isSelected(props.item)}" class="text-xs-center pa-2" @click="selectMe(props.item)">{{ props.item.M_PatientHP}}</td>
                            <td v-bind:class="{'blue lighten-4':props.item.divider === 'Y','amber lighten-4':props.item.selected,'amber lighten-4':isSelected(props.item)}" class="text-xs-left pa-2" @click="selectMe(props.item)">{{ props.item.M_SexName}}</td>
                        </template>
                    </v-data-table>
                    <div class="text-xs-center pt-2">
                        <v-btn  :loading="isLoading" dark v-if="show_more" @click="showMore()" small color="blue darken-3">
                            Tampilkan lebih banyak
                            <template v-slot:loader>
                            sedang memuat ...
                            </template>
                        </v-btn>
                        <v-btn depressed v-if="!show_more" small color="grey lighten-2">Tidak ada lagi data</v-btn>
                    </div>
                    <!--<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>
        <v-card class="mt-2 mb-2">
            <v-layout class="pa-2" row>
                <v-flex xs12>
                    <v-textarea
                        
                        auto-grow
                        rows="1"
                        v-model="keluhan"
                        label="Keluhan"
                        hide-details
                        >
                    </v-textarea>
                </v-flex>
            </v-layout>
        </v-card>
        <v-card>
            <v-layout class="pa-2" row>
                <v-flex xs12>
                    <v-btn @click="saveOrder()" v-if="!_.isEmpty(selected_patient)" :disabled="pgrs_save || _.isEmpty(selected_patient)" block dark color="red lighten-2">Simpan</v-btn>
                    <v-btn  color="grey" v-if="_.isEmpty(selected_patient)" dark block >Simpan</v-btn>
                </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/getprovinces')
                this.$store.dispatch("patient/getsexreg")
                this.$store.dispatch("patient/search", {
                    search: this.name,
                    snorm: this.snorm,
                    current_page: this.curr_page,
                    lastid: -1
                })
            },
            methods: {
                goToPay(){
                    this.dialogsuccessorder = false
                    location.replace("/one-ui/test/vuex/one-fo-cashier-klinik/?id="+this.nomor_order)
                    
                },
                saveOrder(){
                    this.$store.commit('patient/update_pgrs_save', true)
                    this.$store.dispatch("patient/saveorder", {
                        patient:this.selected_patient,
                        keluhan:this.keluhan
                    })
                },
                showMore(){
                    if(!this.isLoading){
                        this.$store.commit('patient/update_search_status', true)
                        var xnow = this.curr_page
                        this.curr_page = xnow + 1
                    }
                    
                },
                isSelected(p) {
                    return p.M_PatientID == this.$store.state.patient.selected_patient.M_PatientID
                },
                searchPatient() {
                    console.log(this.name)

                    this.$store.dispatch("patient/search", {
                        search: this.name,
                        snorm: this.snorm,
                        current_page: 1,
                        lastid: -1
                    })
                    this.$store.commit("patient/update_current_page", 1)
                },
                selectMe(pat) {
                    // Photo module
                    

                    if (this.$store.state.patient.no_save == 0) {
                        this.$store.commit('photo/update_patient_id', pat.M_PatientID)
                        if (pat.M_PatientPhoto == null || pat.M_PatientPhoto == "")
                            this.$store.commit('photo/update_photo_url', this.$store.state.photo.default_photo_url)
                        else
                        this.$store.commit('photo/update_photo_url', pat.M_PatientPhoto + "?r=" + Math.round(Math.random() * 1000000000))

                        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.dispatch("patient/getaddress", {
                            id: pat.M_PatientID
                        })
                        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.commit("patient/update_errors", [])
                        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_address", '')
                    this.$store.commit("patient/update_selected_patient", {})
                    this.$store.commit('photo/update_photo_url', this.$store.state.photo.default_photo_url)
                    this.$store.commit("patient/update_no_save", 0)
                },
                closeDialogSuccess() {
                    this.setNewPatient()
                    this.$store.commit("patient/update_patients", [])
                    this.$store.dispatch("patient/getsexreg")
                    this.$store.dispatch("patient/search", {
                        search: this.name,
                        snorm: this.snorm,
                        current_page: 1,
                        lastid: -1
                    })
                    this.dialogsuccess = false
                }
            },
            computed: {
                dialogsuccessorder: {
                    get() {
                        return this.$store.state.patient.dialogsuccessorder
                    },
                    set(val) {
                        this.$store.commit("patient/update_dialogsuccessorder", val)
                    }
                },
                nomor_order: {
                    get() {
                        return this.$store.state.patient.nomor_order
                    },
                    set(val) {
                        this.$store.commit("patient/update_nomor_order", val)
                    }
                },
                selected_patient: {
                    get() {
                        return this.$store.state.patient.selected_patient
                    },
                    set(val) {
                        this.$store.commit("patient/update_selected_patient", val)
                    }
                },
                keluhan: {
                    get() {
                        return this.$store.state.patient.keluhan
                    },
                    set(val) {
                        this.$store.commit("patient/update_keluhan", val)
                    }
                },
                pgrs_save(){
                    return this.$store.state.patient.pgrs_save
                },
                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", {
                            search: 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)
                    }
                },
                show_more() {
                    return this.$store.state.patient.show_more
                },

            },
            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 darken-2 white--text"
                            },
                            {
                                text: "NAMA",
                                align: "left",
                                sortable: false,
                                value: "lab",
                                width: "25%",
                                class: "pa-2 blue darken-2 white--text"
                            },
                            {
                                text: "NO HP",
                                align: "center",
                                sortable: false,
                                value: "name",
                                width: "15%",
                                class: "pa-2 blue darken-2 white--text"
                            },

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