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

                    <v-flex xs2>
                        <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 xs10 pl-2>
                        <v-layout row wrap>
                            <v-flex xs6>
                                <v-layout column>
                                    <v-flex>
                                        <h5 class="headline">{{ labno }}</h5>
                                    </v-flex>
                                    <v-flex pt-3>
                                        <v-text-field
                                            v-model="mr"
                                            label="No RM"
                                            readonly
                                            hide-details
                                        >
                                        </v-text-field>
                                    </v-flex>
                                    <v-flex>
                                        <v-text-field
                                            v-model="name"
                                            label="Nama"
                                            readonly
                                            hide-details
                                        >
                                        </v-text-field>
                                    </v-flex>
                                    
                                    
                                    
                                </v-layout>
                            </v-flex>

                            <v-flex xs6 pl-2>
                                <v-layout column>
                                    <v-flex>
                                        <v-layout row>
                                            <v-flex xs6>
                                                <v-text-field
                                                    v-model="dob"
                                                    label="Tanggal lahir"
                                                    readonly
                                                    hide-details
                                                >
                                                </v-text-field>
                                            </v-flex>
                                            <v-flex xs6 pl-1>
                                                <v-text-field
                                                    v-model="age"
                                                    label="Umur"
                                                    readonly
                                                    hide-details
                                                >
                                                </v-text-field>
                                            </v-flex>
                                        </v-layout>
                                        
                                    </v-flex>

                                    <v-flex>
                                        <v-text-field
                                            v-model="phone"
                                            label="HP"
                                            readonly
                                            hide-details
                                        >
                                        </v-text-field>
                                    </v-flex>
                                </v-layout>
                            </v-flex>

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

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

            <!-- <v-flex xs12 pt-1>
                <v-layout row>
                    <v-flex xs2>
                        <one-field-verification
                            label="Foto sesuai dengan pasien"
                        >
                        </one-field-verification>
                    </v-flex>
                    <v-flex xs5 pl-1>
                        <v-textarea
                            auto-grow
                            label="Catatan FO"
                            rows="1"
                            :value="note_fo"
                            readonly
                            outline
                            class="mb-0"
                            hide-details
                        ></v-textarea>
                    </v-flex>

                    <v-flex xs5 pl-1>
                        <v-textarea
                            auto-grow
                            label="Catatan Sampling"
                            rows="1"
                            :value="note_sampling"
                            outline
                            hide-details
                        ></v-textarea>
                    </v-flex>
                </v-layout>
                
            </v-flex>             -->
        </v-layout>
    </v-card>
                
    
</template>

<style scoped>
.v-text-field--outline>.v-input__control>.v-input__slot {
    min-height: 62px;
}
</style>

<script>
module.exports = {
    
	components : {
        'one-field-verification' : httpVueLoader('./../../common/oneFieldVerification.vue')
    },
    
    data () {
      return {
        sex : 'Laki - laki',

        note_fo : 'Tidak ada catatan',
        note_sampling : '-'
      }
    },

    computed : {
        labno () {
            return this.$store.state.patient.selected_patient.C_OrderHeaderNumber
        },

        mr () {
            return this.$store.state.patient.selected_patient.mr;
        },
        name () {
            return this.$store.state.patient.selected_patient.name;
        },
        dob () {
            try {
                return this.$store.state.patient.selected_patient.dob.split('-').reverse().join('-');
            } catch(e) {
                console.log(e.message)
                return '-';
            }
            
        },
        phone () {
            return this.$store.state.patient.selected_patient.phone;
        },

        age () {
            return this.$store.state.patient.selected_patient.C_OrderHeaderM_PatientAge;
        }
    }
}
</script>
