<template>
    <div>
        <v-layout class="mb-2 " column>
            <v-card height="650px" >
                <v-toolbar class="mb-2" dense>

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

                    <v-spacer></v-spacer>

                </v-toolbar>
                    <div style="height:60px">
                        <v-layout class="ml-2 mr-2 mb-4 mt-2" row>
                        <v-flex xs12>
                            <v-autocomplete
                                label="Dokter Pemeriksa"
                                v-model="selected_doctor"
                                :items="doctors"
                                no-filter
                                item-text="name"
                                return-object
                                no-data-text="Pilih Dokter Pemeriksa"
                                >
                            </v-autocomplete>
                        </v-flex>
                    </v-layout>
                    </div>
                    
                    <v-divider class="mt-2 mb-1"></v-divider>
                    <div style="height:416px">
                        <v-layout  v-for="(tab,idx) in tabs" :key="idx" row>
                        <v-flex class="pl-2 pr-2 pb-0 mb-1" xs12>
                            <v-btn v-if="!isSelected(tab.id)" @click="changeButton(tab)"  small block large>{{tab.name}}</v-btn>
                            <v-btn v-if="isSelected(tab.id)" @click="changeButton(tab)" color="primary" small block depressed large>{{tab.name}}</v-btn>
                        </v-flex>
                    </v-layout>
                    </div>
                    
                    <v-divider class="mt-2 mb-1"></v-divider>
                    <v-card-actions>
                               <v-btn class="mt-2" v-if="!_.isEmpty(selected_patient) && selected_patient.orderIsCheck === 'Y'" @click="endSession()" block style="min-height:45px" color="red lighten-2" dark>SELESAI</v-btn>
                            </v-card-actions>
            </v-card>
        </v-layout>
       
        
       
       
     
      
    </div>
</template>

<style scoped>
.div_bottom {
    position: absolute;
right:    0;
bottom:   0;
}
</style>

<script>
module.exports = {
    mounted() {
      //  this.$store.dispatch('patient/get_data')
    },
    data: () => ({

    }),
    computed: {
        doctors: {
            get() {
                return this.$store.state.patient.doctors
            },
            set(val) {
                this.$store.commit("patient/update_doctors", val)
            }
        },
        selected_doctor: {
            get() {
                return this.$store.state.patient.selected_doctor
            },
            set(val) {
                this.$store.commit("patient/update_selected_doctor", val)
            }
        },
        selected_patient: {
            get() {
                return this.$store.state.patient.selected_patient
            },
            set(val) {
                this.$store.commit("patient/update_selected_patient", val)
            }
        },
        doctor_pj() {

return this.$store.state.patient.doctor_pj
},
        tabs() {
            return this.$store.state.patient.tabs
        },
        selected_tab: {
            get() {
                return this.$store.state.patient.selected_tab
            },
            set(val) {
                this.$store.commit("patient/update_selected_tab", val)
            }
        },
        pgrs_save() {

            return this.$store.state.patient.pgrs_save
        },
        active() {
            return this.$store.state.button_active
        },
        dialogconfirmationdelete: {
            get() {
                return this.$store.state.patient.dialog_confirmation_delete
            },
            set(val) {
                this.$store.commit("patient/update_dialog_confirmation_delete", val)
            }
        }
    },
    methods: {
        endSession(){
            this.$store.dispatch("patient/endsession",this.selected_patient)
        },
        isSelected(id){
            return id == this.selected_tab.id
        },
        changeButton(tab) {
            this.selected_tab = tab
            this.$store.commit("patient/update_header_tab", 0)
            
            if(tab.id !== "VITAL"){
                this.$store.commit("patient/update_type_field", "TEXT")
            }

            this.$store.dispatch("patient/get_data")

            if(tab.id !== 'ADDITIONAL'){
                let difftest = this.compareSelectedTest()
                if(difftest){
                    this.$store.commit("patient/update_msginfo", "Anda belum melakukan simpan")
                    this.$store.commit("patient/update_dialoginfo", true)
                    this.selected_tab = {id:'ADDITIONAL',name:'Pemeriksaan Penunjang'}
                }
            }
        },
        checkError(value) {
            var errors = this.$store.state.patient.errors
            if (errors.includes(value)) {
                return true
            } else {
                return false
            }
        },
        compareSelectedTest(){
            let seltest = this.$store.state.patient.selected_test
            let seltest_before = this.$store.state.patient.selected_test_before
            let found_diff = false
            seltest.forEach( function(test) {
                let exist_test = seltest_before.filter(function(item) {
                return item.T_TestID === test.T_TestID
                })
                if(exist_test.length === 0)
                found_diff = true
            })

            return found_diff
        
        },
    }
}
</script>