<template>
        <v-layout column pb-2>
            <v-card >
                <v-layout row>
                    <v-flex md6>
                        <v-layout row pl-2>
                            <v-flex md5>
                                <div class="font-weight-bold text-fajrihm">Nomor Lab</div>
                            </v-flex>
                            <v-flex md7>
                                <div class="font-weight-regular text-fajrihm text-md-right">{{ order_no }}</div>
                            </v-flex>
                        </v-layout>
                        <v-layout row pl-2>
                            <v-flex md5>
                                <div class="font-weight-bold text-fajrihm">Tangal Periksa</div>
                            </v-flex>
                            <v-flex md7>
                                <div class="font-weight-regular text-fajrihm text-md-right">{{ order_date }}</div>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                    <v-flex md6>
                        <v-layout row pl-2>
                            <v-flex md5>
                                <div class="font-weight-bold text-fajrihm">MR</div>
                            </v-flex>
                            <v-flex md7>
                                <div class="font-weight-regular text-fajrihm text-md-right">{{ patient_mr }}</div>
                            </v-flex>
                        </v-layout>
                        <v-layout row pl-2>
                            <v-flex md5>
                                <div class="font-weight-bold text-fajrihm">Nama Pasien</div>
                            </v-flex>
                            <v-flex md7>
                                <div class="font-weight-regular text-fajrihm text-md-right">{{ patient_name }}</div>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-layout>
                <v-layout row>
                    <v-flex md6>
                        <v-layout row pl-2>
                            <v-flex md5>
                                <div class="font-weight-bold text-fajrihm">Company</div>
                            </v-flex>
                            <v-flex md7>
                                <div class="font-weight-regular text-fajrihm text-md-right">{{ order_company }}</div>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                    <v-flex md6>
                        <v-layout row pl-2>
                            <v-flex md5>
                                <div class="font-weight-bold text-fajrihm">MOU</div>
                            </v-flex>
                            <v-flex md7>
                                <div class="font-weight-regular text-fajrihm text-md-right">{{ order_mou }}</div>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-layout>
                <v-layout row mb-2>
                    <v-flex md6>
                        <v-layout row pl-2>
                            <v-flex md5>
                                <div class="font-weight-bold text-fajrihm">Dokter Pengirim</div>
                            </v-flex>
                            <v-flex md7>
                                <div class="font-weight-regular text-fajrihm text-md-right">{{ doctor_sender }}</div>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                    <v-flex md6>
                        <v-layout row pl-2>
                            <v-flex md5>
                                <div class="font-weight-bold text-fajrihm">Alamat Dokter</div>
                            </v-flex>
                            <v-flex md7>
                                <div class="font-weight-regular text-fajrihm text-md-right">{{ doctor_sender_address }}</div>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-layout>
                <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
                <v-layout row mb-2 wrap>
                    <v-flex v-for="(dlv, n) in order_delivery" xs6 v-bind:key="n">
                        <v-layout row wrap pl-2>
                            <v-flex xs4 class="label-delivery font-weight-bold">
                                {{ dlv.label }}
                            </v-flex>
                            <v-flex xs8 class="text-delivery text-xs-right">
                                {{ dlv.desc }}
                            </v-flex>
                        </v-layout>
                    </v-flex>
                    <!-- <v-flex xs6>
                        <v-layout row wrap pl-2>
                            <v-flex xs4 class="label-delivery font-weight-bold">
                                Kirim Pasien
                            </v-flex>
                            <v-flex xs8 class="text-delivery text-xs-right">
                                Jl. Simas Margarin Dapur No. 456
                                Tegal Barat
                            </v-flex>
                        </v-layout>
                    </v-flex> -->
                </v-layout>
                <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
                <v-layout row pa-2>
                    <table>
                        <tr>
                        <th class="text-md-center pt-2 pb-2"> NO. </th>
                        <th class="text-md-center pt-2 pb-2">PEMERIKSAAN</th>
                        <th class="text-md-center pt-2 pb-2">BRUTO</th>
                        <th class="text-md-center pt-2 pb-2">DISKON</th>
                        <th class="text-md-center pt-2 pb-2">TOTAL</th>

                        </tr>
                        <tr v-for="(t, idx) in order_detail" v-bind:key="t.d_id">
                        <td class="text-md-center"> {{ idx + 1 }} </td>
                        <td class="text-md-left pl-3">{{ t.t_name }}</td>
                        <td class="text-md-right pr-2">{{ one_money(t.t_price) }}</td>
                        <td class="text-md-right pr-2">{{ one_money(t.t_disctotal) }}</td>
                        <td class="text-md-right pr-2">{{ one_money(t.t_total) }}</td>

                        </tr>
                        
                        <tfoot>
                        <tr>
                            <th style="background:#03a9f43d" colspan="3" class="text-md-right pr-2 pt-1 pb-1">SUB TOTAL</th>
                            <th style="background:#03a9f43d" class="text-md-right pr-2 pt-2 pb-2" colspan="2">{{ one_money(order_subtotal) }}</th>

                        </tr>
                        <tr>
                            <th colspan="3"  class="text-md-right pr-2 pt-1 pb-1">DISKON PEMBULATAN</th>
                            <th class="text-md-right pr-2 pt-1 pb-1"  colspan="2">{{ one_money(order_rounding) }}</th>

                        </tr>
                        <tr>
                            <th style="background:#03a9f43d" colspan="3"  class="text-md-right pr-2 pt-2 pb-2">TOTAL</th>
                            <th style="background:#03a9f43d" class="text-md-right pr-2 pt-1 pb-1"  colspan="2">{{ one_money(order_total) }}</th>

                        </tr>
                        </tfoot>
                    </table>
                </v-layout>
                <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-2 mb-2></v-layout>
                

               
</template>

<style scoped>
.text-fajrihm{
    padding: 3px 20px 3px 0;
    text-align:left;
    font-size: 13px;
    font-family: open sans, tahoma, sans-serif;
}

.label-delivery{
     font-size: 11px;
     padding: 3px 20px 3px 0;
     font-family: open sans, tahoma, sans-serif;
}
.text-delivery{
     font-size: 12px;
     padding: 3px 20px 3px 0;
     font-family: open sans, tahoma, sans-serif;
}

.nota {
   font-size: 2em;
   font-weight: bold;
   text-align: left;
}
.total {
   min-height:76px;
}
table {
   font-family: arial, sans-serif;
   border-collapse: collapse;
   width: 100%;
   background:white;
   border: 0px;
}

th, td {
   border: 1px solid black;
   border-collapse: collapse;
   padding-top: 2px;
   padding-bottom: 2px;
}
table>tr>td {
   padding: 8px;
}
table>tr>td:first {
   padding-left:15px!important;
}
</style>
<script>
module.exports = {
    mounted() {
        this.$store.dispatch("patient/getinitialpatient")
    },
    methods : {
        one_money(p) {
            return window.one_money(p)
        },
    },

    data() {
        return {

        }
    },

    computed : {
        order_no() {
            return this.$store.state.payment.selected_patient.order_no
        },
        
        order_date() {
            let x
            try {
                let z = this.$store.state.payment.selected_patient.order_date
                let y = z.split(' ')
                x = y[0].split('-').reverse().join('-') + ' ' + (y[1] ? y[1] : '')
            } catch (e) { x = '-' }
            
            return x
        },

        order_mou() {
            return this.$store.state.payment.selected_patient.order_mou
        },

        order_company() {
            return this.$store.state.payment.selected_patient.order_company
        },

        patient_name() {
            return this.$store.state.payment.selected_patient.patient_name
        },

        patient_mr() {
            return this.$store.state.payment.selected_patient.patient_mr
        },

        doctor_sender() {
            return this.$store.state.payment.selected_patient.doctor_sender
        },

        doctor_sender_address() {
            return this.$store.state.payment.selected_patient.doctor_sender_address
        },

        doctor_pj() {
            return this.$store.state.payment.selected_patient.doctor_pj
        },

        order_detail() {
            return this.$store.state.payment.order_detail
        },

        order_subtotal() {
            return this.$store.state.payment.order_subtotal
        },

        order_rounding() {
            return this.$store.state.payment.order_rounding
        },

        order_total() {
            return this.$store.state.payment.order_total
        },

        order_delivery() {
            return this.$store.state.payment.order_delivery
        }
    }
}
</script>
