<template>
    <v-layout row wrap>
        <v-flex xs12>

            <v-layout>
                <v-flex xs3 pa-2>
                    <v-layout row wrap>
                        <v-flex xs12>
                            <v-img
                                src="https://www.sgm-inc.com/wp-content/uploads/2014/06/no-profile-male-img.gif"
                                aspect-ratio="1"
                                class="grey lighten-2 elevation-2"
                            >
                        </v-flex>

                        <v-flex xs12>
                            <v-btn
                                color="green"
                                dark
                                block
                                
                            >
                                Update Foto
                            </v-btn>
                        </v-flex>

                        <v-flex xs12>
                            <patient-history-dialog></patient-history-dialog>
                        </v-flex>
                    </v-layout>
                    

                    
                </v-flex>

                <v-flex xs9>
                    <v-flex xs12>
                        <v-layout>
                            <v-flex xs7 pa-1>
                                <v-text-field
                                    label="Nama"
                                    placeholder=""
                                    :value="p_name"
                                    readonly
                                ></v-text-field>
                            </v-flex>
                            <v-flex xs5 pa-1>
                                <v-text-field
                                    label="RM"
                                    placeholder=""
                                    :value="p_mr"
                                    readonly
                                ></v-text-field>
                            </v-flex>
                        </v-layout>
                        
                    </v-flex>

                    <v-flex xs12 pa-1>
                        <v-textarea
                            auto-grow
                            label="Alamat"
                            rows="5"
                            :value="p_address"
                            readonly
                        ></v-textarea>
                        
                    </v-flex>

                    <v-flex xs12 pa-1>
                        <v-text-field
                            label="Telepon / HP"
                            placeholder=""
                            :value="p_phone"
                            readonly
                        ></v-text-field>
                    </v-flex>

                    <v-flex xs12>
                        <v-layout>
                            <v-flex xs7 pa-1>
                                <v-text-field
                                    label="Tanggal Lahir"
                                    placeholder=""
                                    :value="p_dob"
                                    readonly
                                ></v-text-field>
                            </v-flex>

                            <v-flex xs5 pa-1>
                                <v-text-field
                                    label="Umur"
                                    placeholder=""
                                    :value="p_age"
                                    readonly
                                ></v-text-field>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                    

                    
                </v-flex>
            </v-layout>

        </v-flex>


        <v-flex xs12>
            <v-divider></v-divider>
            <v-layout row wrap>
                <v-flex xs12 class="pt-3 pl-2">
                    <v-textarea
                        auto-grow
                        label="Catatan Pasien"
                        rows="3"
                        :value="p_note"
                    ></v-textarea>
                </v-flex>
            </v-layout>
        </v-flex>
    </v-layout>
    

</template>

<style scoped>
.v-messages { display:none; }
.v-input__slot {
    margin-bottom: 0px;
}
</style>

<script>
module.exports = {
    components : {
        'patient-search-dialog': httpVueLoader('./patientSearchDialog.vue'),
        'patient-history-dialog': httpVueLoader('./patientHistoryDialog.vue')
    },

    data() {
        return {
            p_name : 'HERI SURYAWAN ST.',
            p_address : `KPA Regency 221 Klipang\nSendangmulyo Semarang`,
            p_phone : '0898-5945-837',
            p_note : `Pasien ini agak bawel, tidak usah ditanggapi kalau sedang ngomel - ngomel`,
            p_dob : '19-09-1999',
            p_age : '20th 3bl 2hr',
            p_mr : 'MR-1902020001'
        }
    }
}
</script>