<template>
    <v-layout row wrap>
        <v-flex xs12>
            <v-card class="pa-2" v-show="!detail">
                <v-layout row wrap>
                    <v-flex xs3>
                        <div class="caption font-weight-light">No Reg / Tanggal</div>
                        <div class="subheading">{{selected_patient.T_OrderHeaderLabNumber}} / {{order_date}}</div>
                    </v-flex>
                    <v-flex xs3>
                        <div class="caption font-weight-light">Nama / Jenis Kelamin</div>
                        <div class="subheading">{{selected_patient.M_PatientName}} / {{selected_patient.M_SexName}}</div>
                    </v-flex> 
                    <v-flex xs3>
                        <div class="caption font-weight-light">DOB / Umur</div>
                        <div class="subheading">{{dob_date}} / {{age}}</div>
                    </v-flex> 
                    <v-flex xs3>
                        <div class="caption font-weight-light">Pengirim</div>
                        <div class="subheading">{{selected_patient.doctor_sender_name}}&nbsp;</div>
                    </v-flex>
                </v-layout>
                <v-btn absolute dark top right
                    color="black" flat depressed
                    @click="detail=!detail"
                    class="btn-detail"
                >
                    <v-icon>keyboard_arrow_up</v-icon>
                </v-btn>
            </v-card>
        </v-flex>
        <v-flex xs12 v-show="detail">
            <v-card class="pa-2">
                <v-layout row wrap>
                    <v-flex xs6>
                        <div class="caption font-weight-light">No Reg / Tanggal</div>
                        <div class="subheading">{{selected_patient.T_OrderHeaderLabNumber}} / {{order_date}}</div>

                        <div class="caption font-weight-light mt-2">Nama / Jenis Kelamin</div>
                        <div class="subheading">{{selected_patient.M_PatientName}} / {{selected_patient.M_SexName}}</div>

                        <div class="caption font-weight-light mt-2">DOB / Umur</div>
                        <div class="subheading">{{dob_date}} / {{age}}</div>

                        <div class="caption font-weight-light mt-2">Phone / Janji hasil</div>
                        <div class="subheading">{{selected_patient.M_PatientHP}} / {{selected_patient.order_promise?selected_patient.order_promise.join(', '):''}}</div>
                        <div class="caption font-weight-light mt-2">Diagnose</div>
                        <div class="subheading">{{selected_patient.T_OrderHeaderDiagnose}}</div>
                    </v-flex>
                    <v-flex xs6>
                        <div class="caption font-weight-light">Kel. Pelanggan</div>
                        <div class="subheading">{{selected_patient.M_CompanyName}} &nbsp;</div>

                        <div class="caption font-weight-light mt-2">Pengirim</div>
                        <div class="subheading">{{selected_patient.doctor_sender_name}}&nbsp;</div>

                        <div class="caption font-weight-light mt-2">Pengiriman Hasil</div>
                        <div class="subheading">{{selected_patient.delivery?selected_patient.delivery.join(", "):''}}&nbsp;</div>

                        <div class="caption font-weight-light mt-2">Format Hasil</div>
                        <div class="subheading">{{langs}}&nbsp;</div>
                    </v-flex>  
                </v-layout>

                <v-layout row v-show="false">
                    <v-flex xs3>
                        <v-layout row wrap pr-2>
                            <v-flex xs7 pr-2>
                                
                                <v-text-field
                                    label="Nomor Lab"
                                    v-model="selected_patient.T_OrderHeaderLabNumber"
                                    readonly
                                ></v-text-field>
                            </v-flex>

                            <v-flex xs5>
                                <v-text-field
                                    label="Tanggal"
                                    v-model="order_date"
                                    readonly
                                ></v-text-field>
                            </v-flex>

                            <v-flex xs12>
                                <v-text-field
                                    label="Nama"
                                    v-model="selected_patient.M_PatientName"
                                    readonly
                                ></v-text-field>
                            </v-flex>
                        </v-layout>
                        
                    </v-flex>

                    <v-flex xs3>
                        <v-layout row wrap pl-2>
                            <v-flex xs5 pr-2>
                                <v-text-field
                                    label="DOB"
                                    v-model="dob_date"
                                    readonly
                                ></v-text-field>
                            </v-flex>

                            <v-flex xs7 pl-2>
                                <v-text-field
                                    label="Umur"
                                    v-model="age"
                                    readonly
                                ></v-text-field>
                            </v-flex>

                            <v-flex xs12>
                                <v-text-field
                                    label="Jenis Kelamin"
                                    v-model="selected_patient.M_SexName"
                                    readonly
                                ></v-text-field>
                            </v-flex>
                        </v-layout>

                    </v-flex>

                    <v-flex xs3>
                        <v-layout row wrap pl-2>
                            <v-flex xs12>
                                <v-text-field
                                    label="Dokter"
                                    v-model="selected_patient.doctor_pj_name"
                                    readonly
                                ></v-text-field>
                            </v-flex>

                            <v-flex xs12>
                                <v-text-field
                                    label="Company"
                                    v-model="selected_patient.M_CompanyName"
                                    readonly
                                ></v-text-field>
                            </v-flex>
                        </v-layout>

                    </v-flex>

                    <v-flex xs3>
                        <v-layout row wrap pl-2>
                            <v-flex xs12 mb-3>
                                <v-text-field
                                    label="No HP"
                                    v-model="selected_patient.M_PatientHP"
                                    readonly
                                    hide-details
                                ></v-text-field>
                            </v-flex>

                            <v-flex xs12>
                                <v-text-field
                                    label="Catatan Pasien"
                                    outline
                                    readonly
                                    hide-details
                                    v-model="selected_patient.M_PatientNote"
                                ></v-text-field>
                            </v-flex>
                        </v-layout>

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

                <v-layout row wrap v-show="false">
                    <v-flex xs4 pr-2>
                        <v-text-field
                            label="Catatan FO"
                            outline
                            readonly
                            hide-details
                            v-model="selected_patient.T_OrderHeaderFoNote"
                        ></v-text-field>
                    </v-flex>

                    <v-flex xs4 pr-2>
                        <v-text-field
                            label="Catatan Sampling"
                            outline
                            readonly
                            hide-details
                            v-model="selected_patient.T_OrderHeaderSamplingNote"
                        ></v-text-field>
                    </v-flex>

                    <v-flex xs4>
                        <v-text-field
                            label="Catatan Sample Handling"
                            outline
                            readonly
                            hide-details
                            v-model="selected_patient.T_OrderHeaderResultNote"
                        ></v-text-field>
                    </v-flex>
                </v-layout>

                <v-btn
                    absolute
                    dark
                    top
                    right
                    color="black"
                    flat
                    depressed
                    @click="detail=!detail"
                    class="btn-detail"
                >
                    <v-icon>keyboard_arrow_down</v-icon>
                </v-btn>
            </v-card>
        </v-flex>
    </v-layout>
</template>

<style scoped>
    .btn-detail {
        min-width: 0px !important;
        height: auto;
        padding: 0px;
        top: 5px;
        right: 5px;
    }
</style>

<script>
module.exports = {
    data() {
        return {
            detail: false
        }
    },

    computed : {
        selected_patient () {
            let x = this.$store.state.re_patient.selected_patient
            if (x) 
                return x
            return {}
        },

        order_date() {
            let d = this.selected_patient.T_OrderHeaderDate
            let e = ''
            try {
                e = d.substr(0,10).split('-').reverse().join('-')
            } catch(e) { /*console.log(e.message)*/ }
            
            return e
        },

        dob_date() {
            let d = this.selected_patient.M_PatientDOB
            let e = ''
            try {
                e = d.substr(0,10).split('-').reverse().join('-')
            } catch(e) { /*console.log(e.message)*/ }
            
            return e
        },

        age() {
            let d = this.selected_patient.T_OrderHeaderM_PatientAge
            return d
            let e = ''
            try {
                e = d.replace(/tahun/, 'th').replace(/bulan/, 'bl').replace(/hari/, 'hr')
            } catch(e) { /*console.log(e.message)*/ }
            
            return e
        },

        langs() {
            let x = this.selected_patient
            if (!x) return ''

            let si_01 = x.T_OrderHeaderLangIsSI == 'Y' ? ' (SI)' : ''
            let si_02 = x.T_OrderHeaderAddOnSecondLangIsSI == 'Y' ? ' (SI)' : ''

            if (!x.SecondM_LangID) return x.M_LangName + si_01

            return x.M_LangName + si_01 + ', ' + x.SecondM_LangName + si_02
        }
    },

    methods : {
        
    }
}
</script>
