<template>
    <v-layout column fill-height>
        <!-- <v-flex xs12> -->
            <v-card class="pa-1 mb-2">
                <v-card-text class="pa-0">
                    <v-layout row wrap>
                        <v-flex xs12>
                            <patient-search-box></patient-search-box>
                        </v-flex>
                    </v-layout>
                </v-card-text>

                <!-- <v-card-actions class="text-xs-right">
                
                <v-btn color="orange" class="white--text">Lanjut</v-btn>
                </v-card-actions> -->
                
            </v-card>
        <!-- </v-flex> -->

        <!-- <v-flex xs12 grow> -->
            <v-card class="pa-1 p-left-side mb-2" grow>
                <v-card-text class="pa-0">
                    <v-layout row wrap>

                        <v-flex xs12>
                           <patient-detail></patient-detail>
                        </v-flex>

                        <!-- <v-flex xs12>
                           <patient-notes></patient-notes> 
                        </v-flex> -->
                    </v-layout>
                </v-card-text>

                
            </v-card>

            <v-card class="pa-1 p-left-side mb-2 grow">
                <v-card-text class="pa-0">
                    <v-layout>
                        <v-flex xs12 pa-1>
                            <v-select
                                v-model="selected_doctor"
                                :items="doctors"
                                item-text="M_DoctorName"
                                label="Dokter Klinik"
                                return-object
                            ></v-select>
                        </v-flex>
                    </v-layout>
                </v-card-text>
            </v-card>

            <v-card class="pa-1 p-left-side grow">
                <v-card-text class="pa-0">
                    <v-layout>
                        <v-flex xs12 pa-1>
                            <v-textarea
                                label="Keluhan Pasien"
                                rows="3"
                                v-model="complaints"
                            ></v-textarea>
                            
                        </v-flex>

                    </v-layout>
                </v-card-text>
            </v-card>
    </v-layout>
    
</template>

<style scoped>
/* .p-left-side {
    min-height: 500px;
} */
</style>

<script>
module.exports = {
	components : {
        'patient-search-box' : httpVueLoader('./patientSearchBox.vue'),
        'patient-detail': httpVueLoader('./patientDetail.vue'),
        'patient-notes' : httpVueLoader('./patientNotes.vue')
    },
    
    computed : {
        selected_doctor: {
            get() {
                return this.$store.state.doctor.selected_doctor
            },
            set(val) {
                this.$store.commit('doctor/update_selected_doctor',val)
            }
        },
        doctors() {
            return this.$store.state.doctor.doctors
        },
        complaints : {
            get () {
                return this.$store.state.order.order.complaint
            },
            set (v) {
                this.$store.commit('order/update_complaint', v)
            }
            
        }
    },

    mounted () {
        this.$store.dispatch('doctor/search')
    }
}
</script>
