<template>
    <v-layout class="mb-2" column>

        <v-card height="800px" class="pb-5">
            <v-toolbar class="mb-2" dense>

                <v-toolbar-title style="text-align:center!important" class="title">DATA PASIEN</v-toolbar-title>

                <v-spacer></v-spacer>
                <v-btn @click="openList()" title="List Pasien" style="min-width:25px!important" dark small  color="primary">
                    <v-icon dark>list</v-icon>
                </v-btn>
            </v-toolbar>
            <v-layout class="pa-2 mt-6 mb-6" row>
                <v-flex xs3></v-flex>
                <v-flex class="text-xs-right" xs6>
                    <v-card class="mt-2 pa-4" tile>
                        <v-img :src="patient_photo" aspect-ratio="1" class="primary lighten-2 pt-2" contain>
                            <template v-slot:placeholder>
                                <v-layout fill-height align-center justify-center ma-0>
                                    <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                                </v-layout>
                            </template>
                        </v-img>
                    </v-card>
                </v-flex>
                <v-flex class="mb-5" xs3></v-flex>
            </v-layout>

            <v-layout class="pl-4 pr-4 mt-4 pb-2" row>
                <v-flex class="font-weight-bold" xs5>Nomor Registrasi</v-flex>
                <v-flex class="text-xs-right" xs7>{{ patient.orderNumber }}</v-flex>
            </v-layout>
            <v-divider></v-divider>
            <v-layout class="pl-4 pr-4 mt-4 pb-2" row>
                <v-flex class="font-weight-bold" xs5>Tanggal Periksa</v-flex>
                <v-flex class="text-xs-right" xs7>{{ patient.order_date }}</v-flex>
            </v-layout>
            <v-divider></v-divider>
            <v-layout class="pl-4 pr-4 mt-4 pb-2" row>
                <v-flex class="font-weight-bold" xs5>Nama</v-flex>
                <v-flex class="text-xs-right" xs7>{{ patient.M_PatientName }}</v-flex>
            </v-layout>
            <v-divider></v-divider>
            <v-layout class="pl-4 pr-4 mt-4 pb-2" row>
                <v-flex class="font-weight-bold" xs5>Identitas</v-flex>
                <v-flex class="text-xs-right" xs5>{{ patient.M_PatientIDNumber }}</v-flex>
                <v-flex class="text-xs-right" xs2><kbd class="caption">{{ patient.M_IdTypeName }}</kbd></v-flex>
            </v-layout>
            <v-divider></v-divider>
            <v-layout class="pl-4 pr-4 mt-4 pb-2" row>
                <v-flex class="font-weight-bold" xs5>Jenis Kelamin</v-flex>
                <v-flex class="text-xs-right" xs7>{{ patient.M_SexName }}</v-flex>
            </v-layout>
            <v-divider></v-divider>
            <v-layout class="pl-4 pr-4 mt-4 pb-2" row>
                <v-flex class="font-weight-bold" xs5>Umur</v-flex>
                <v-flex class="text-xs-right" xs7>{{ patient_age }}</v-flex>
            </v-layout>
            <v-divider></v-divider>
            <v-layout class="pl-4 pr-4 mt-4 pb-2" row>
                <v-flex class="font-weight-bold" xs5>Pekerjaan</v-flex>
                <v-flex class="text-xs-right" xs7>{{ patient.M_PatientJob }}</v-flex>
            </v-layout>
            <v-divider class="mt-4 mb-2"></v-divider>
            <v-card-actions>
                <v-btn v-if="!_.isEmpty(patient) && patient.orderIsScreening === 'Y'" @click="endSession()" block style="min-height:45px" color="red lighten-2" dark>SELESAI</v-btn>
            </v-card-actions>
        </v-card>


    </v-layout>
</template>

<style scoped>
table,
td,
th {
    border: 1px solid #ddd;
    text-align: left;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 8px;
    padding-right: 5px;
}

</style>

<script>
module.exports = {
    data: () => ({

    }),
    mounted: function() {
   var url_string = window.location.href
   var url = new URL(url_string);
   var id = url.searchParams.get("id")
   if(id){
    this.$store.dispatch("patient/search",{id:id})
    //this.$store.dispatch("patient/getdoctorpj",{orderNumber:id})
   }else{
    this.openList()
   }
   
},
    computed: {
        patient_photo() {
            return this.$store.state.patient.photo_url
        },
        patient() {
         return this.$store.state.patient.selected_patient
        },
        patient_age: {
         get () {
            return this.$store.state.patient.selected_patient.patient_age            
         },

         set (v) {
            return
         }
      },
        pgrs_save() {

            return this.$store.state.patient.pgrs_save
        },
        dialogconfirmationdelete: {
            get() {
                return this.$store.state.patient.dialog_confirmation_delete
            },
            set(val) {
                this.$store.commit("patient/update_dialog_confirmation_delete", val)
            }
        },
        msgconfirmationdelete() {
            return this.$store.state.patient.msg_confirmation_delete
        },
        xact() {
            return this.$store.state.patient.act
        },
        xtitles() {
            return this.$store.state.patient.titles
        },
        xtitle: {
            get() {
                return this.$store.state.patient.selected_title
            },
            set(val) {
                this.$store.commit("patient/update_selected_title", val)
                this.$store.commit("patient/update_no_save", 1)
            }
        },
        xpatientprefix: {
            get() {
                return this.$store.state.patient.patient_prefix
            },
            set(val) {
                this.$store.commit("patient/update_patient_prefix", val)
                this.$store.commit("patient/update_no_save", 1)
            }
        },
        xpatientname: {
            get() {
                return this.$store.state.patient.patient_name
            },
            set(val) {
                this.$store.commit("patient/update_patient_name", val)
                this.$store.commit("patient/update_no_save", 1)
            }
        },
        xpatientsuffix: {
            get() {
                return this.$store.state.patient.patient_suffix
            },
            set(val) {
                this.$store.commit("patient/update_patient_suffix", val)
                this.$store.commit("patient/update_no_save", 1)
            }
        },
        xnorm: {
            get() {
                return this.$store.state.patient.norm
            },
            set(val) {
                this.$store.commit("patient/update_norm", val)
                this.$store.commit("patient/update_no_save", 1)
            }
        },
        xdob: {
            get() {
                return this.$store.state.patient.dob
            },
            set(val) {
                this.$store.commit("patient/update_errors", [])
                var errors = this.$store.state.patient.errors
                var aDOB = moment(val, 'DD-MM-YYYY', true)
                var isValidDOB = aDOB.isValid()
                if (!isValidDOB) {
                    errors.push("wrongformatdob")
                }

                this.$store.commit("patient/update_dob", val)
                this.$store.commit("patient/update_no_save", 1)

            }
        },
        xsexes() {
            return this.$store.state.patient.sexes
        },
        xsex: {
            get() {
                return this.$store.state.patient.selected_sex
            },
            set(val) {
                this.$store.commit("patient/update_selected_sex", val)
                this.$store.commit("patient/update_no_save", 1)
            }
        },
        xreligions() {
            return this.$store.state.patient.religions
        },
        xreligion: {
            get() {
                return this.$store.state.patient.selected_religion
            },
            set(val) {
                this.$store.commit("patient/update_selected_religion", val)
                this.$store.commit("patient/update_no_save", 1)
            }
        },
        xphone: {
            get() {
                return this.$store.state.patient.phone
            },
            set(val) {
                this.$store.commit("patient/update_phone", val)
                this.$store.commit("patient/update_no_save", 1)
            }
        },
        xhp: {
            get() {
                return this.$store.state.patient.hp
            },
            set(val) {
                this.$store.commit("patient/update_hp", val)
                this.$store.commit("patient/update_no_save", 1)
            }
        },
        xemail: {
            get() {
                return this.$store.state.patient.email
            },
            set(val) {
                this.$store.commit("patient/update_email", val)
                this.$store.commit("patient/update_no_save", 1)
            }
        },
        xpob: {
            get() {
                return this.$store.state.patient.pob
            },
            set(val) {
                this.$store.commit("patient/update_pob", val)
                this.$store.commit("patient/update_no_save", 1)
            }
        },
        xkartuidentitass() {
            return this.$store.state.patient.kartuidentitass
        },
        xkartuidentitas: {
            get() {
                return this.$store.state.patient.selected_kartuidentitas
            },
            set(val) {
                this.$store.commit("patient/update_selected_kartuidentitas", val)
                this.$store.commit("patient/update_no_save", 1)
            }
        },
        xnoidentitas: {
            get() {
                return this.$store.state.patient.noidentitas
            },
            set(val) {
                this.$store.commit("patient/update_noidentitas", val)
                this.$store.commit("patient/update_no_save", 1)
            }
        },
        xnote: {
            get() {
                return this.$store.state.patient.note
            },
            set(val) {
                this.$store.commit("patient/update_note", val)
                this.$store.commit("patient/update_no_save", 1)
            }
        },
        xjob: {
            get() {
                return this.$store.state.patient.job
            },
            set(val) {
                this.$store.commit("patient/update_job", val)
                this.$store.commit("patient/update_no_save", 1)
            }
        },
        xnik: {
            get() {
                return this.$store.state.patient.nik
            },
            set(val) {
                this.$store.commit("patient/update_nik", val)
                this.$store.commit("patient/update_no_save", 1)
            }
        },
        xjabatan: {
            get() {
                return this.$store.state.patient.jabatan
            },
            set(val) {
                this.$store.commit("patient/update_jabatan", val)
                this.$store.commit("patient/update_no_save", 1)
            }
        },
        xkedudukan: {
            get() {
                return this.$store.state.patient.kedudukan
            },
            set(val) {
                this.$store.commit("patient/update_kedudukan", val)
                this.$store.commit("patient/update_no_save", 1)
            }
        },
        xpj: {
            get() {
                return this.$store.state.patient.pj
            },
            set(val) {
                this.$store.commit("patient/update_pj", val)
                this.$store.commit("patient/update_no_save", 1)
            }
        },
        xlocation: {
            get() {
                return this.$store.state.patient.location
            },
            set(val) {
                this.$store.commit("patient/update_location", val)
                this.$store.commit("patient/update_no_save", 1)
            }
        },
    },
    methods: {
        endSession(){
            this.$store.dispatch("patient/endsession",this.patient)
        },
        openList(){
            this.$store.commit("patient/update_dialog_list", true)
            this.$store.dispatch("patient/listpatient")
        },
        checkError(value) {
            var errors = this.$store.state.patient.errors
            if (errors.includes(value)) {
                return true
            } else {
                return false
            }
        },
        saveData() {
            this.$store.commit("patient/update_errors", [])
            var errors = this.$store.state.patient.errors
            var aDOB = moment(this.xdob, 'DD-MM-YYYY', true)
            console.log(this.xdob)
            console.log(aDOB)
            var isValidDOB = aDOB.isValid()
            if (!isValidDOB) {
                errors.push("wrongformatdob")
            }
            if (this.xpatientname === '') {
                errors.push("requirename")
            }
            if (this.xdob === '') {
                errors.push("requiredob")
            }
            if (_.isEmpty(this.xsex)) {
                errors.push("requiresex")
            }
            if (_.isEmpty(this.xtitle)) {
                errors.push("requiretitle")
            }
            if (errors.length === 0) {
                var prm = {}
                prm.M_PatientID = this.$store.state.patient.selected_patient.M_PatientID
                prm.M_PatientM_TitleID = this.$store.state.patient.selected_title.M_TitleID
                prm.M_PatientPrefix = this.xpatientprefix
                prm.M_PatientName = this.xpatientname
                prm.M_PatientSuffix = this.xpatientsuffix
                prm.M_PatientDOB = this.xdob
                prm.M_PatientM_SexID = this.$store.state.patient.selected_sex.M_SexID
                prm.M_PatientM_ReligionID = this.$store.state.patient.selected_religion.M_ReligionID
                prm.M_PatientEmail = this.xemail
                prm.M_PatientPOB = this.xpob
                prm.M_PatientHP = this.xhp
                prm.M_PatientPhone = this.xphone
                prm.M_PatientM_IdTypeID = this.$store.state.patient.selected_kartuidentitas.M_IdTypeID
                prm.M_PatientIDNumber = this.xnoidentitas
                prm.M_PatientNote = this.xnote
                prm.M_PatientNIK = this.xnik
                prm.M_PatientJabatan = this.xjabatan
                prm.M_PatientKedudukan = this.xkedudukan
                prm.M_PatientPJ = this.xpj
                prm.M_PatientLocation = this.xlocation
                prm.M_PatientJob = this.xjob
                this.$store.commit("patient/update_pgrs_save", true)
                this.$store.dispatch("patient/save", prm)
            }
        },
        saveNewPatient() {
            this.$store.commit("patient/update_errors", [])
            var errors = this.$store.state.patient.errors
            var aDOB = moment(this.xdob, 'DD-MM-YYYY', true)
            console.log(this.xdob)
            console.log(aDOB)
            var isValidDOB = aDOB.isValid()
            if (!isValidDOB) {
                errors.push("wrongformatdob")
            }
            if (this.xpatientname === '') {
                errors.push("requirename")
            }
            if (this.xdob === '') {
                errors.push("requiredob")
            }
            if (_.isEmpty(this.xsex)) {
                errors.push("requiresex")
            }
            if (_.isEmpty(this.xtitle)) {
                errors.push("requiretitle")
            }
            if (errors.length === 0) {
                var prm = {}
                prm.M_PatientID = 0
                prm.M_PatientM_TitleID = this.$store.state.patient.selected_title.M_TitleID
                prm.M_PatientPrefix = this.xpatientprefix
                prm.M_PatientName = this.xpatientname
                prm.M_PatientSuffix = this.xpatientsuffix
                prm.M_PatientDOB = this.xdob
                prm.M_PatientM_SexID = this.$store.state.patient.selected_sex.M_SexID
                prm.M_PatientM_ReligionID = this.$store.state.patient.selected_religion.M_ReligionID
                prm.M_PatientEmail = this.xemail
                prm.M_PatientPOB = this.xpob
                prm.M_PatientHP = this.xhp
                prm.M_PatientPhone = this.xphone
                prm.M_PatientM_IdTypeID = this.$store.state.patient.selected_kartuidentitas.M_IdTypeID
                prm.M_PatientIDNumber = this.xnoidentitas
                prm.M_PatientNote = this.xnote
                prm.M_PatientNIK = this.xnik
                prm.M_PatientJabatan = this.xjabatan
                prm.M_PatientKedudukan = this.xkedudukan
                prm.M_PatientPJ = this.xpj
                prm.M_PatientLocation = this.xlocation
                prm.M_PatientJob = this.xjob
                this.$store.commit("patient/update_pgrs_save", true)
                this.$store.dispatch("patient/newpatient", prm)
            }
        },
        deleteData() {
            let msg = "Yakin, akan menghapus data pasien " + this.xpatientname + " ?"
            this.$store.commit("patient/update_msg_confirmation_delete", msg)
            this.$store.commit("patient/update_dialog_confirmation_delete", true)
        },
        doDeleteData() {
            var prm = {}
            prm.M_PatientID = this.$store.state.patient.selected_patient.M_PatientID
            prm.M_PatientName = this.xpatientname
            this.$store.commit("patient/update_pgrs_save", true)
            this.$store.dispatch("patient/delete", prm)
        }
    }
}
</script>