<template>
  <v-layout row justify-center>
    <v-dialog v-model="dialog" scrollable max-width="80%">
      <v-card>
        <v-card-title>GARIS WAKTU ORDER</v-card-title>
        <v-divider class="mb-1"></v-divider>
        <v-card-text style="padding:0;height: 560px;">
            <v-layout row>
                <v-flex xs3 pa-2>
                    <v-card>
                        <v-card-title style="background:#f5f5f5;"></v-card-title>
                        <v-divider></v-divider>
                        <v-layout row>
                            <v-flex text-xs-center pa-2 xs12>
                                
                               <img
                           :src="header.M_PatientPhoto"
                           width="100%" 
             
                        >
                  
                        </img>
                            </v-flex>
                        </v-layout>
                        <v-divider></v-divider>
                        <v-layout align-center row>
                            <v-flex  class="text-xs-center" xs12>
                                <p style="border-bottom:1px dashed black" class="pa-2 mb-0 font-weight-black">{{header.M_PatientNoReg}}</p>
                                <p class="pa-2 mb-0">{{header.M_PatientName}}</p>
                                <p class="pa-2 mb-0">{{header.M_PatientHP}}</p>
                                <p class="pa-2 mb-0">{{header.M_PatientEmail}}</p>
                            </v-flex>
                        </v-layout>
                        <v-divider></v-divider>
                        <v-layout v-if="header && header.patient_address && header.patient_address.length > 0" align-center row>
                            <v-flex  class="text-xs-center" xs12>
                                <p v-for="address in header.patient_address" 
                                    style="border-bottom:1px dashed black" class="pa-2 mb-0 font-weight-black">
                                    {{address.M_PatientAddressDescription}} {{address.M_DistrictName}} {{address.M_CityName}}
                                </p>
                            </v-flex>
                        </v-layout>
                    </v-card>
                </v-flex>
                <v-flex xs9 pa-2>
                    <v-card>
                        <v-card-title style="background:#f5f5f5;"></v-card-title>
                        <v-divider></v-divider>
                        <v-container style="max-width: 600px;">
                            <v-timeline dense clipped>
                            <v-timeline-item
                                fill-dot
                                class="white--text mb-5"
                                color="#616161"
                                large
                            >
                                <template v-slot:icon>
                                    <v-avatar>
                                        <img :src="header.M_PatientPhotoThumb">
                                    </v-avatar>
                                </template>
                                <v-layout row>
                                    <v-flex xs12>
                                        <v-btn style="font-family: Roboto,sans-serif;margin:0px;padding:0 16px;font-size:11px" small color="#616161" dark> {{header.T_OrderHeaderLabNumber}}</v-btn>
                                    </v-flex>
                                </v-layout>
                            </v-timeline-item>
                            <div v-for="data in datas">
                                <v-timeline-item
                                    class="mb-3"
                                    color="grey"
                                    icon-color="grey lighten-2"
                                    small
                                    v-if="data.type === 'REGISTER'"
                                >
                                    <v-layout row>
                                        <v-flex xs12>
                                            <p class="mb-0 black--text mono">{{data.xdatetime}}</p>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout row>
                                        <v-flex xs12>
                                            <p class="mb-1 font-weight-black caption black--text">
                                                Order diterima oleh {{data.username}}
                                            </p>
                                        </v-flex>
                                    </v-layout>
                                    <v-divider></v-divider>
                                    <v-layout row>
                                        <v-flex pa-1 xs12>
                                            <v-layout row>
                                                <v-flex xs5><p class="mb-0 caption">Nama Pasien</p></v-flex>
                                                <v-flex text-xs-right xs8><p class="mb-0 caption">{{header.M_PatientName}}</p></v-flex>
                                            </v-layout>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout row>
                                        <v-flex pa-1 xs12>
                                            <v-layout row>
                                                <v-flex xs5><p class="mb-0 caption">Alamat</p></v-flex>
                                                <v-flex text-xs-right xs8><p class="mb-0 caption">{{header.M_PatientAddress}}</p></v-flex>
                                            </v-layout>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout row>
                                        <v-flex pa-1 xs12>
                                            <v-layout row>
                                                <v-flex xs5><p class="mb-0 caption">Usia</p></v-flex>
                                                <v-flex text-xs-right xs8><p class="mb-0 caption">{{header.T_OrderHeaderM_PatientAge}}</p></v-flex>
                                            </v-layout>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout row>
                                        <v-flex pa-1 xs12>
                                            <v-layout row>
                                                <v-flex xs5><p class="mb-0 caption">Departement / NPK</p></v-flex>
                                                <v-flex text-xs-right xs8><p class="mb-0 caption">{{header.M_PatientDepartement}} / {{header.M_PatientNIP}}</p></v-flex>
                                            </v-layout>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout row>
                                        <v-flex pa-1 xs12>
                                            <v-layout row>
                                                <v-flex xs5><p class="mb-0 caption">Corporate</p></v-flex>
                                                <v-flex text-xs-right xs8><p class="mb-0 caption">{{header.CorporateName}}</p></v-flex>
                                            </v-layout>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout row>
                                        <v-flex pa-1 xs12>
                                            <v-layout row>
                                                <v-flex xs5><p class="mb-0 caption">Nama Project</p></v-flex>
                                                <v-flex text-xs-right xs8><p class="mb-0 caption">{{header.Mgm_McuLabel}}</p></v-flex>
                                            </v-layout>
                                        </v-flex>
                                    </v-layout>
                                    <v-divider class="mb-1"></v-divider>
                                    <v-layout row>
                                        <v-flex xs12>
                                            <v-layout style="font-size:12px;background:#64b2cd;color:white" pl-2 pt-2 pr-2 pb-2 row>
                                                <v-flex xs6>
                                                    Pemeriksaan
                                                </v-flex>
                                                <v-flex text-xs-right xs2>
                                                    Bruto
                                                </v-flex>
                                                <v-flex text-xs-right xs2>
                                                    Diskon
                                                </v-flex>
                                                <v-flex text-xs-right xs2>
                                                    Total
                                                </v-flex>
                                            </v-layout>
                                            <v-layout v-for="detail in data.data.details_after" style="border-bottom:1px dashed black;font-size:12px;background:#d7d7d799;" pl-2 pt-1 pr-2 pb-1  row>
                                                <v-flex xs6>
                                                    {{detail.T_OrderDetailT_TestName}}
                                                </v-flex>
                                                <v-flex text-xs-right class="mono" xs2>
                                                    {{one_money(detail.T_OrderDetailPrice)}}
                                                </v-flex>
                                                <v-flex text-xs-right class="mono" xs2>
                                                    {{one_money(detail.T_OrderDetailDiscTotal)}}
                                                </v-flex>
                                                <v-flex text-xs-right class="mono" xs2>
                                                    {{one_money(detail.T_OrderDetailTotal)}}
                                                </v-flex>
                                            </v-layout>
                                            <v-layout style="background:#82b1ffba;" pl-2 pt-2 pr-2 pb-2 row>
                                            <v-flex style="font-size:12px;" xs6>
                                                Grand Total
                                            </v-flex>
                                            <v-flex style="font-size:12px;" text-xs-right class="mono" xs2>
                                                {{totalbruto(data.data.details_after)}}
                                            </v-flex>
                                            <v-flex style="font-size:12px;" text-xs-right class="mono" xs2>
                                                {{totaldiscount(data.data.details_after)}}
                                            </v-flex>
                                            <v-flex style="font-size:12px;" text-xs-right class="mono" xs2>
                                                {{total(data.data.details_after)}}
                                            </v-flex>
                                        </v-layout>
                                        </v-flex>
                                    </v-layout>
                                    <!-- <v-divider class="mb-1 mt-1"></v-divider>
                                    <v-layout v-for="delivery in data.data.deliveries" row>
                                        <v-flex pa-1 xs12>
                                            <v-layout row>
                                                <v-flex xs3><p class="mb-0 caption">{{delivery.delivery_code}}</p></v-flex>
                                                <v-flex text-xs-right xs9>
                                                    <p class="mb-0 caption">{{delivery.note}}</p>
                                                    <p v-if="delivery.noteplus !== ''" class="mb-0 caption warning--text">{{delivery.noteplus}}</p>
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                    </v-layout>
                                    <v-divider class="mb-1 mt-1"></v-divider>
                                    <v-layout v-if="data.data.promises" row>
                                        <v-flex pa-1 xs8>
                                            <v-layout wrap>
                                                <v-flex xs4>
                                                    <p class="mb-0 caption">Janji Hasil</p>
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                        <v-flex pa-1 text-xs-right xs8>
                                            <kbd class="ml-1 mr-1" v-for="promise in data.data.promises">{{dtFormat(promise.T_OrderPromiseDateTime)}}</kbd>
                                        </v-flex>
                                    </v-layout> -->
                                </v-timeline-item>

                                <v-timeline-item
                                    class="mb-3"
                                    color="grey"
                                    icon-color="grey lighten-2"
                                    small
                                    v-if="data.type === 'req_change_dob' || data.type === 'change_dob'"
                                >
                                    <v-layout row>
                                        <v-flex xs12>
                                            <p class="mb-0 black--text mono">{{data.xdatetime}}</p>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout row>
                                        <v-flex xs12>
                                            <p class="mb-1 font-weight-black caption black--text">
                                                <span v-if="data.type === 'req_change_dob'">Request ganti tanggal lahir</span><span v-if="data.type === 'change_dob'">Ganti tanggal lahir</span> oleh {{data.username}}
                                            </p>
                                        </v-flex>
                                    </v-layout>
                                    <v-divider></v-divider>
                                    <v-layout  row>
                                        <v-flex xs12>
                                            <p v-if="data.data && data.data.old" class="mt-1 mb-1">Tanggal Lahir sebelumnya <kbd>{{dFormat(data.data.old.name)}}</kbd> diubah menjadi <kbd v-if="data.data && data.data.new" style="background:#3DC094">{{dFormat(data.data.new.name)}}</kbd></p>
                                        </v-flex>
                                    </v-layout>
                                </v-timeline-item>

                                <v-timeline-item
                                    class="mb-3"
                                    color="grey"
                                    icon-color="grey lighten-2"
                                    small
                                    v-if="data.type === 'spv_order_doctor'"
                                >
                                    <v-layout row>
                                        <v-flex xs12>
                                            <p class="mb-0 black--text mono">{{data.xdatetime}}</p>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout row>
                                        <v-flex xs12>
                                            <p class="mb-1 font-weight-black caption black--text">
                                                Pergantian dokter / alamat dokter oleh {{data.username}}
                                            </p>
                                        </v-flex>
                                    </v-layout>
                                    <v-divider></v-divider>
                                    <v-layout row>
                                        <v-flex xs12>
                                            <p v-if="data.data && data.data.old" class="mt-1 mb-1">Pergantian dokter / alamat dokter dari <span class="caption font-weight-black">{{getname(data.data.old.name)}}</span> dengan alamat <span class="caption font-weight-black">{{getaddress(data.data.old.name)}}</span></p>
                                            <p v-if="data.data && data.data.new" class="mt-1 mb-1">Diganti menjadi <span style="color:#3DC094" class="caption font-weight-black">{{getname(data.data.new.name)}}</span> dengan alamat <span style="color:#3DC094" class="caption font-weight-black">{{getaddress(data.data.new.name)}}</span></p>
                                        </v-flex>
                                    </v-layout>
                                </v-timeline-item>

                                <v-timeline-item
                                    class="mb-3"
                                    color="grey"
                                    icon-color="grey lighten-2"
                                    small
                                    v-if="data.type === 'spv_order_company'"
                                >
                                    <v-layout row>
                                        <v-flex xs12>
                                            <p class="mb-0 black--text mono">{{data.xdatetime}}</p>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout row>
                                        <v-flex xs12>
                                            <p class="mb-1 font-weight-black caption black--text">
                                                Pergantian Kel. Pelanggan oleh {{data.username}}
                                            </p>
                                        </v-flex>
                                    </v-layout>
                                    <v-divider></v-divider>
                                    <v-layout row>
                                        <v-flex xs12>
                                            <p v-if="data.data && data.data.old" class="mt-1 mb-1">Pergantian Kel. Pelanggan dari <span class="caption font-weight-black">{{getname(data.data.old.name)}}</span></p>
                                            <p v-if="data.data && data.data.new" class="mt-1 mb-1">Diganti menjadi <span style="color:#3DC094" class="caption font-weight-black">{{getname(data.data.new.name)}}</span> </p>
                                        </v-flex>
                                    </v-layout>
                                </v-timeline-item>

                                <v-timeline-item
                                    class="mb-3"
                                    color="grey"
                                    icon-color="grey lighten-2"
                                    small
                                    v-if="data.type === 'spv_test'"
                                >
                                    <v-layout row>
                                        <v-flex xs12>
                                            <p class="mb-0 black--text mono">{{data.xdatetime}}</p>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout row>
                                        <v-flex xs12>
                                            <p class="mb-1 font-weight-black caption black--text">
                                                Perubahan pemeriksaan oleh {{data.username}}
                                            </p>
                                        </v-flex>
                                    </v-layout>
                                    <v-divider></v-divider>
                                    <v-layout row>
                                        <v-flex xs12>
                                            <v-layout align-center style="font-size:12px;background:#64b2cd;color:white" pl-2 pt-2 pr-2 pb-2 row>
                                                <v-flex xs6>
                                                    Pemeriksaan
                                                </v-flex>
                                                <v-flex text-xs-right xs2>
                                                    Bruto
                                                </v-flex>
                                                <v-flex text-xs-right xs2>
                                                    Diskon
                                                </v-flex>
                                                <v-flex text-xs-right xs2>
                                                    Total
                                                </v-flex>
                                            </v-layout>
                                            <v-layout v-for="detail in data.data" align-center style="border-bottom:1px dashed black;font-size:12px;background:#d7d7d799;" pl-2 pt-1 pr-2 pb-1  row>
                                                <v-flex pl-2 xs1>
                                                    <v-icon v-if="detail.action === 'delete'" small>delete</v-icon>
                                                    <v-icon v-if="detail.action === 'add'" small>add</v-icon>
                                                    <v-icon v-if="detail.action === 'edit'" small>edit</v-icon>
                                                </v-flex>
                                                <v-flex xs5>
                                                    {{detail.pxname}}
                                                </v-flex>
                                                <v-flex text-xs-right class="mono" xs2>
                                                    <p class="mb-0" style="text-decoration:line-through" v-if="detail.action === 'edit'" class="mb-0">{{one_money(detail.bf_bruto)}}</p>
                                                    <p class="mb-0">{{one_money(detail.bruto)}}</p>
                                                </v-flex>
                                                <v-flex text-xs-right class="mono" xs2>
                                                    <p class="mb-0" style="text-decoration:line-through" v-if="detail.action === 'edit'" class="mb-0">{{one_money(detail.bf_discounttotal)}}</p>
                                                    <p class="mb-0">{{one_money(detail.discounttotal)}}</p>
                                                </v-flex>
                                                <v-flex  text-xs-right class="mono" xs2>
                                                    <p class="mb-0" style="text-decoration:line-through" v-if="detail.action === 'edit'" class="mb-0">{{one_money(detail.bf_total)}}</p>
                                                    <p class="mb-0">{{one_money(detail.total)}}</p>
                                                </v-flex>
                                            </v-layout>
                                            
                                        </v-flex>
                                    
                                    </v-layout>
                                </v-timeline-item>

                                <v-timeline-item
                                    class="mb-3"
                                    color="grey"
                                    icon-color="grey lighten-2"
                                    small
                                    v-if="data.type === 'update_mou' && data.data.mou.old && data.data.mou.new"
                                >
                                    <v-layout row>
                                        <v-flex xs12>
                                            <p class="mb-0 black--text mono">{{data.xdatetime}}</p>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout row>
                                        <v-flex xs12>
                                            <p class="mb-1 font-weight-black caption black--text">
                                                Perubahan pemeriksaan oleh {{data.username}}
                                            </p>
                                        </v-flex>
                                    </v-layout>
                                    <v-divider></v-divider>
                                    <v-layout row>
                                        <v-flex xs12>
                                            <v-layout mt-2 row>
                                                <v-flex xs12>
                                                    <p class="mb-0">Perubahan Kel.Pelanggan / Aggrement dari <span class="caption font-weight-black">{{data.data.mou.old.M_CompanyName}} : {{data.data.mou.old.M_MouName}}</span> menjadi <span style="color:#3DC094" class="caption font-weight-black">{{data.data.mou.new.M_CompanyName}} : {{data.data.mou.new.M_MouName}}</span></p>
                                                </v-flex>
                                            </v-layout>
                                            <v-layout mt-1 row>
                                                <v-flex xs12>
                                                    <v-layout align-center style="font-size:12px;background:#64b2cd;color:white" pl-2 pt-2 pr-2 pb-2 row>
                                                        <v-flex xs6>
                                                            Pemeriksaan
                                                        </v-flex>
                                                        <v-flex text-xs-right xs2>
                                                            Bruto
                                                        </v-flex>
                                                        <v-flex text-xs-right xs2>
                                                            Diskon
                                                        </v-flex>
                                                        <v-flex text-xs-right xs2>
                                                            Total
                                                        </v-flex>
                                                    </v-layout>
                                                    <v-layout v-for="detail in data.data.data" align-center style="border-bottom:1px dashed black;font-size:12px;background:#d7d7d799;" pl-2 pt-1 pr-2 pb-1  row>
                                                        <v-flex xs6>
                                                            {{detail.pxname}}
                                                        </v-flex>
                                                        <v-flex text-xs-right class="mono" xs2>
                                                            <p style="text-decoration:line-through" class="mb-0 caption">{{one_money(detail.bf_bruto)}}</p>
                                                            <p class="caption mb-0">{{one_money(detail.bruto)}}</p>
                                                        </v-flex>
                                                        <v-flex text-xs-right class="mono" xs2>
                                                            <p style="text-decoration:line-through" class="caption mb-0">{{one_money(detail.bf_discounttotal)}}</p>
                                                            <p class="caption mb-0">{{one_money(detail.discounttotal)}}</p>
                                                        </v-flex>
                                                        <v-flex text-xs-right class="mono" xs2>
                                                            <p style="text-decoration:line-through" class="mb-0 caption">{{one_money(detail.bf_total)}}</p>
                                                            <p class="mb-0 caption">{{one_money(detail.total)}}</p>
                                                        </v-flex>
                                                    </v-layout>
                                                </v-flex>
                                            
                                            </v-layout>
                                        </v-flex>
                                    
                                    </v-layout>
                                </v-timeline-item>

                                <v-timeline-item
                                    class="mb-3"
                                    color="grey"
                                    icon-color="grey lighten-2"
                                    small
                                    v-if="data.type === 'order_delivery'"
                                >
                                    <v-layout row>
                                        <v-flex xs12>
                                            <p class="mb-0 black--text mono">{{data.xdatetime}}</p>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout row>
                                        <v-flex xs12>
                                            <p class="mb-1 font-weight-black caption black--text">
                                                Perubahan pengiriman hasil oleh {{data.username}}
                                            </p>
                                        </v-flex>
                                    </v-layout>
                                    <v-divider></v-divider>
                                    <v-layout mb-1 row>
                                        <v-flex xs12>
                                            <v-layout style="color:#fff;font-size:12px;background:#616161;" pl-2 pt-2 pr-2 pb-2 row>
                                                <v-flex xs12>
                                                    Pengiriman Hasil Lama
                                                </v-flex>
                                            </v-layout>
                                            <v-layout v-if="data.data && data.data.old" v-for="detail in data.data.old" pb-1 style="font-size:12px;background:#d7d7d799;" pl-2 pt-1 pr-2 pb-1  row>
                                                <v-flex xs3>
                                                   {{detail.label}}
                                                </v-flex>
                                                <v-flex text-xs-right class="mono" xs9>
                                                    <p v-if="detail.destination != ''" class="mb-0">{{detail.destination}}</p>
                                                    <p v-if="detail.note != ''" class="caption orange--text mb-0">catatan : {{detail.note}}</p>
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                    
                                    </v-layout>
                                    <v-layout row>
                                        <v-flex xs12>
                                            <v-layout style="color:#fff;font-size:12px;background:#3DC094;" pl-2 pt-2 pr-2 pb-2 row>
                                                <v-flex xs12>
                                                    Pengiriman Hasil Baru
                                                </v-flex>
                                            </v-layout>
                                            <v-layout v-if="data.data && data.data.new" v-for="detail in data.data.new" pb-1  style="font-size:12px;background:#d7d7d799;" pl-2 pt-1 pr-2 pb-1  row>
                                                <v-flex xs3>
                                                   {{detail.label}}
                                                </v-flex>
                                                <v-flex text-xs-right class="mono" xs9>
                                                    <p v-if="detail.destination != ''" class="mb-0">{{detail.destination}}</p>
                                                    <p v-if="detail.note != ''"  class="caption orange--text mb-0">catatan : {{detail.note}}</p>
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                    
                                    </v-layout>
                                </v-timeline-item>

                                <v-timeline-item
                                    class="mb-3"
                                    color="grey"
                                    icon-color="grey lighten-2"
                                    small
                                    v-if="data.type === 'payment'"
                                >
                                    <v-layout row>
                                        <v-flex xs12>
                                            <p class="mb-0 black--text mono">{{data.xdatetime}}</p>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout row>
                                        <v-flex xs12>
                                            <p class="mb-1 font-weight-black caption black--text">
                                                Pembayaran diterima oleh {{data.username}}
                                            </p>
                                        </v-flex>
                                    </v-layout>
                                    <v-divider></v-divider>
                                    <v-layout row>
                                        <v-flex xs12>
                                            <v-layout mt-1 row>
                                                <v-flex xs12>
                                                    <v-layout align-center style="font-size:12px;background:#e16262;color:white" pl-2 pt-2 pr-2 pb-2 row>
                                                        <v-flex xs8>
                                                            JUMLAH PEMBAYARAN [ <span class="font-weight-black">{{data.data.header.F_PaymentNumber}}</span> ]
                                                        </v-flex>
                                                        <v-flex class="font-weight-bold mono" text-xs-right xs4>
                                                            {{one_money(data.data.header.F_PaymentTotal)}}
                                                        </v-flex>
                                                    </v-layout>
                                                    <v-layout v-for="detail in data.data.details" align-center style="border-bottom:1px dashed black;font-size:12px;background:#d7d7d799;" pl-2 pt-1 pr-2 pb-1  row>
                                                        <v-flex xs8>
                                                            <p class="mb-0">{{getPaymentType(detail.name)}}</p>
                                                            <p v-if="detail.M_PaymentTypeCode === 'DEBIT' || detail.M_PaymentTypeCode === 'CREDIT'" class="mb-0 caption" style="font-size:small;color:#e37e00">{{getPaymentNote(detail.name)}}</p>
                                                        </v-flex>
                                                        <v-flex text-xs-right class="mono" xs4>
                                                            <p color="red" v-if="detail.M_PaymentTypeCode === 'CASH'" style="color:#82b1ff;text-decoration:line-through" class="mb-0 caption">{{one_money(detail.F_PaymentDetailActual)}}</p>
                                                            <p class="caption mb-0">{{one_money(detail.F_PaymentDetailAmount)}}</p>
                                                        </v-flex>
                                                    </v-layout>
                                                </v-flex>
                                            
                                            </v-layout>
                                        </v-flex>
                                    
                                    </v-layout>
                                </v-timeline-item>

                                <v-timeline-item
                                    class="mb-3"
                                    color="grey"
                                    icon-color="grey lighten-2"
                                    small
                                    v-if="data.type === 'fo_verification'"
                                >
                                    <v-layout row>
                                        <v-flex xs12>
                                            <p class="mb-0 black--text mono">{{data.xdatetime}}</p>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout row>
                                        <v-flex xs12>
                                            <p class="mb-1 font-weight-black caption black--text">
                                                Verifikasi FO oleh {{data.username}}
                                            </p>
                                        </v-flex>
                                    </v-layout>
                                    <v-divider></v-divider>
                                    <v-layout mt-1 align-center row>
                                        <v-flex xs12>
                                            <v-layout v-for="detail in data.data" pb-1  style="font-size:12px;border-bottom:1px dashed black;background:#d7d7d799;" pl-2 pt-1 pr-2 pb-1  row>
                                                <v-flex text-xs-center xs1>
                                                   <v-icon small v-if="detail.Fo_VerificationsValueCheck === 'Y'">check</v-icon>
                                                   <v-icon small v-if="detail.Fo_VerificationsValueCheck === 'N'">close</v-icon>
                                                </v-flex>
                                                <v-flex  class="mono" xs11>
                                                    <p class="mb-0">{{detail.Fo_VerificationsLabelName}}</p>
                                                    <p v-if="detail.Fo_VerificationsValueCheck === 'N'"  class="caption orange--text mb-0">catatan : {{detail.Fo_VerificationsValueNote}}</p>
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                    
                                    </v-layout>
                                </v-timeline-item>

                                <v-timeline-item
                                    class="mb-3"
                                    color="grey"
                                    icon-color="grey lighten-2"
                                    small
                                    v-if="data.type === 'change_promise'"
                                >
                                    <v-layout row>
                                        <v-flex xs12>
                                            <p class="mb-0 black--text mono">{{data.xdatetime}}</p>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout row>
                                        <v-flex xs12>
                                            <p class="mb-1 font-weight-black caption black--text">
                                                Perubahan janji hasil oleh {{data.username}}
                                            </p>
                                        </v-flex>
                                    </v-layout>
                                    <v-divider></v-divider>
                                    <v-layout mb-1 align-center row>
                                        <v-flex xs12>
                                            <v-layout style="background:#ffdab9;" pl-2 pt-1 pr-2 pb-1 row>
                                                <v-flex xs4>
                                                    <p class="caption mb-0">Janji Hasil Lama</p>
                                                </v-flex>
                                                <v-flex  text-xs-right xs8>
                                                    <kbd v-if="data.data && data.data.old" class="ml-1 mr-1" v-for="promise in data.data.old">{{dtFormat(promise.T_OrderPromiseDateTime)}}</kbd>
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout align-center mb-1 row>
                                        <v-flex xs12>
                                            <v-layout style="background:#cfecde;" pl-2 pt-1 pr-2 pb-1 row>
                                                <v-flex xs4>
                                                    <p class="caption mb-0">Janji Hasil Baru</p>
                                                </v-flex>
                                                <v-flex  text-xs-right xs8>
                                                    <kbd v-if="data.data && data.data.new" class="ml-1 mr-1" v-for="promise in data.data.new">{{dtFormat(promise.T_OrderPromiseDateTime)}}</kbd>
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                    </v-layout>
                                </v-timeline-item>

                                
                            </div>
                        </v-container>
                    </v-card>
                </v-flex>
            </v-layout>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
            <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="dialog = false">Tutup</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  
    <v-dialog v-model="dialog_sample" scrollable max-width="60%">
        <v-card>
            <v-card-title>GARIS WAKTU SAMPLING</v-card-title>
            <v-divider class="mb-1"></v-divider>
            <v-card-text style="padding:0;height: 560px;">
                <v-layout row>
                    <v-flex xs3 pa-2>
                        <v-card>
                            <v-card-title style="background:#f5f5f5;"></v-card-title>
                            <v-divider></v-divider>
                            <v-layout row>
                                <v-flex xs12>
                                    <v-img :src="header.M_PatientPhotoThumb" aspect-ratio="1.7"></v-img>
                                </v-flex>
                            </v-layout>
                            <v-divider></v-divider>
                            <v-layout align-center row>
                                <v-flex  class="text-xs-center" xs12>
                                    <p style="border-bottom:1px dashed black" class="pa-2 mb-0 font-weight-black">{{header.M_PatientNoReg}}</p>
                                    <p class="pa-2 mb-0">{{header.M_PatientName}}</p>
                                </v-flex>
                            </v-layout>
                        </v-card>
                    </v-flex>
                    <v-flex xs9>
                        <v-layout mt-2 pr-2 mb-2 row>
                            <v-flex xs12>
                                <v-card >
                                    <v-card-title style="background:#f5f5f5;"></v-card-title>
                                    <v-divider class="mb-1"></v-divider>   
                                    <v-layout v-for="resume in data_sample.resume" pl-2 pr-2 row>
                                        <v-flex v-if="resume.sampling_status == 'N'"  style="background: #64b5f6;" xs12 pa-1 mb-1 >
                                            <v-layout class="mono" style="font-size:12px" row>
                                                <v-flex pl-2 xs12>
                                                    {{resume.barcode}} | {{resume.sample_name}}
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                        <v-flex v-if="resume.sampling_status == 'Y' && resume.reveice_status == 'N'"  style="background: #FFDF36;" xs12 pa-1 mb-1 >
                                            <v-layout class="mono" style="font-size:12px" row>
                                                <v-flex pl-2 xs4>
                                                    {{resume.barcode}} | {{resume.sample_name}}
                                                </v-flex>
                                                <v-flex pr-2 xs8 text-xs-right>
                                                    <kbd>{{resume.sampling_username}} | {{resume.sampling_date}} {{resume.sampling_time}}</kbd>
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                        <v-flex v-if="resume.sampling_status == 'Y' && resume.reveice_status == 'Y'"  style="background: #1cbaab;" xs12 pa-1 mb-1 >
                                            <v-layout class="mono" style="font-size:12px" row>
                                                <v-flex pl-2 xs4>
                                                    {{resume.barcode}} | {{resume.sample_name}}
                                                </v-flex>
                                                <v-flex pr-2 xs8 text-xs-right>
                                                    <kbd>{{resume.sampling_username}} | {{resume.sampling_date}} {{resume.sampling_time}}</kbd>
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout v-for="resume in data_sample.resume" pl-2 pr-2 row>
                                        <v-flex v-if="resume.sampling_status == 'N'"  style="background: #64b5f6;" xs12 pa-1 mb-1 >
                                            <v-layout class="mono" style="font-size:12px" row>
                                                <v-flex pl-2 xs12>
                                                    {{resume.barcode}} | {{resume.sample_name}}
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                        <v-flex v-if="resume.sampling_status == 'Y' && resume.reveice_status == 'N'"  style="background: #FFDF36;" xs12 pa-1 mb-1 >
                                            <v-layout class="mono" style="font-size:12px" row>
                                                <v-flex pl-2 xs4>
                                                    {{resume.barcode}} | {{resume.sample_name}}
                                                </v-flex>
                                                <v-flex pr-2 xs8 text-xs-right>
                                                    <kbd>{{resume.receive_username}} | {{resume.receive_date}} {{resume.receive_time}}</kbd>
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                        <v-flex v-if="resume.sampling_status == 'Y' && resume.reveice_status == 'Y'"  style="background: #FFDF36;" xs12 pa-1 mb-1 >
                                            <v-layout class="mono" style="font-size:12px" row>
                                                <v-flex pl-2 xs4>
                                                    {{resume.barcode}} | {{resume.sample_name}}
                                                </v-flex>
                                                <v-flex pr-2 xs8 text-xs-right>
                                                    <kbd>{{resume.receive_username}} | {{resume.receive_date}} {{resume.receive_time}}</kbd>
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                    </v-layout>
                                </v-card>
                            </v-flex>
                        </v-layout>
                        <v-layout pr-2 row>
                            <v-flex xs12>
                                <v-card>
                                    <v-card-title style="background:#f5f5f5;"></v-card-title>
                                    <v-layout row>
                                        <v-container style="max-width: 600px;">
                                            <v-timeline dense clipped>
                                                <v-timeline-item
                                                    fill-dot
                                                    class="white--text mb-5"
                                                    color="#616161"
                                                    large
                                                >
                                                    <template v-slot:icon>
                                                        <v-avatar>
                                                            <img :src="header.M_PatientPhotoThumb">
                                                        </v-avatar>
                                                    </template>
                                                    <v-layout row>
                                                        <v-flex xs12>
                                                            <v-btn style="font-family: Roboto,sans-serif;margin:0px;padding:0 16px;font-size:11px" small color="#616161" dark> {{header.T_OrderHeaderLabNumber}}</v-btn>
                                                        </v-flex>
                                                    </v-layout>
                                                </v-timeline-item>
                                                <v-timeline-item
                                                    class="mb-3"
                                                    color="grey"
                                                    icon-color="grey lighten-2"
                                                    small
                                                    v-for="detail in data_sample.details"
                                                >
                                                    <v-layout row>
                                                        <v-flex xs12>
                                                            <p class="mb-0">{{dtFormat(detail.datetime)}}</p>
                                                            <p v-if="detail.status === 'SAMPLING.Sampling.Unsampled'" class="mb-0">Pembuatan barcode oleh sistem</p>
                                                            <p v-if="detail.status === 'SAMPLING.Sampling.Sampled'" class="mb-0">Proses oleh {{detail.user}}</p>
                                                            <p v-if="detail.status === 'SAMPLING.Sampling.Received'" class="mb-0">Pengambilan sample oleh {{detail.user}}</p>
                                                            <p v-if="detail.status === 'SAMPLING.Verification.Verify'" class="mb-0">Verifikasi sample oleh {{detail.user}}</p>
                                                        </v-flex>
                                                    </v-layout>
                                                    <v-divider class="mt-1 mb-1"></v-divider>
                                                    <v-layout  v-for="row in detail.details" v-if="detail.status === 'SAMPLING.Sampling.Unsampled'" row>
                                                        <v-flex style="background: #607d8b;color:#fff" xs12 pa-1 mb-1 >
                                                            <v-layout class="mono" style="font-size:12px" row>
                                                                <v-flex pl-2 xs12>
                                                                    {{row.T_BarcodeLabBarcode}} | {{row.T_SampleTypeName}}
                                                                </v-flex>
                                                            </v-layout>
                                                        </v-flex>
                                                    </v-layout>
                                                    <v-layout  v-for="row in detail.details" v-if="detail.status === 'SAMPLING.Sampling.Sampled'" row>
                                                        <v-flex style="background: #FFDF36;" xs12 pa-1 mb-1 >
                                                            <v-layout class="mono" style="font-size:12px" row>
                                                                <v-flex pl-2 xs12>
                                                                    {{row.T_BarcodeLabBarcode}} | {{row.T_SampleTypeName}}
                                                                </v-flex>
                                                            </v-layout>
                                                        </v-flex>
                                                    </v-layout>
                                                    <v-layout  v-for="row in detail.details" v-if="detail.status === 'SAMPLING.Sampling.Received'" row>
                                                        <v-flex style="background: #1cbaab;" xs12 pa-1 mb-1 >
                                                            <v-layout class="mono" style="font-size:12px" row>
                                                                <v-flex pl-2 xs12>
                                                                    {{row.T_BarcodeLabBarcode}} | {{row.T_SampleTypeName}}
                                                                </v-flex>
                                                            </v-layout>
                                                            <v-layout v-if="detail.group_id === '4' && row.xform" style="background: #faebd7;border:1px dashed grey" mt-1 pa-1 row>
                                                                <v-flex xs4>
                                                                    <p class="mb-1 text-xs-center caption mono font-weight-bold">Voltase(kV) : {{getxform(row.xform,0)}}</p>
                                                                </v-flex>
                                                                <v-flex xs4>
                                                                    <p class="mb-1 text-xs-center caption mono font-weight-bold">Arus(mA): {{getxform(row.xform,1)}}</p>
                                                                </v-flex>
                                                                <v-flex xs4>
                                                                    <p class="mb-1 text-xs-center caption mono font-weight-bold">Second(s) : {{getxform(row.xform,2)}}</p>
                                                                </v-flex>
                                                                <v-flex xs4>
                                                                    <p class="mb-1 text-xs-center caption mono font-weight-bold">Ekpose: {{getxform(row.xform,3)}}</p>
                                                                </v-flex>
                                                            </v-layout>
                                                            <v-layout style="background: #faebd7;border:1px dashed grey" v-if="row.requirements" mt-1 pa-2 row>
                                                                <v-flex xs12>
                                                                    <p class="mb-1 caption mono font-weight-bold">Requirement : </p>
                                                                    <p class="mb-1">{{row.requirements}}</p>
                                                                </v-flex>
                                                            </v-layout>
                                                        </v-flex>
                                                    </v-layout>
                                                    <v-layout  v-for="row in detail.details" v-if="detail.status === 'SAMPLING.Verification.Verify' " row>
                                                        <v-flex style="background: #1cbaab;" xs12 pa-1 mb-1 >
                                                            <v-layout class="mono" style="font-size:12px" row>
                                                                <v-flex pl-2 xs12>
                                                                    {{row.T_BarcodeLabBarcode}} | {{row.T_SampleTypeName}}
                                                                </v-flex>
                                                            </v-layout>
                                                            <v-layout v-if="detail.group_id === '4' && row.xfilm" style="background: #faebd7;border:1px dashed grey" mt-1 pa-1 row>
                                                                <v-flex text-xs-left pl-2 xs6>
                                                                    <p class="mb-1  caption mono font-weight-bold">Jenis Film : {{getxfilm(row.xfilm,0)}}</p>
                                                                </v-flex>
                                                                <v-flex text-xs-right pr-2 xs6>
                                                                    <p class="mb-1  caption mono font-weight-bold">Jumlah : {{getxfilm(row.xfilm,1)}} film</p>
                                                                </v-flex>
                                                            </v-layout>
                                                            <v-layout style="background: #faebd7;border:1px dashed grey" v-if="row.requirements" mt-1 pa-2 row>
                                                                <v-flex xs12>
                                                                    <p class="mb-1 caption mono font-weight-bold">Requirement : </p>
                                                                    <p class="mb-1">{{row.requirements}}</p>
                                                                </v-flex>
                                                            </v-layout>
                                                        </v-flex>
                                                    </v-layout>
                                                    <v-layout  v-for="row in detail.details" v-if="detail.status === 'SAMPLING.Handling.Process' " row>
                                                        <v-flex style="background: #1cbaab;" xs12 pa-1 mb-1 >
                                                            <v-layout class="mono" style="font-size:12px" row>
                                                                <v-flex pl-2 xs12>
                                                                    {{row.T_BarcodeLabBarcode}} | {{row.T_SampleTypeName}}
                                                                </v-flex>
                                                            </v-layout>
                                                            <v-layout style="background: #faebd7;border:1px dashed grey" v-if="row.requirements" mt-1 pa-2 row>
                                                                <v-flex xs12>
                                                                    <p class="mb-1 caption mono font-weight-bold">Requirement : </p>
                                                                    <p class="mb-1">{{row.requirements}}</p>
                                                                </v-flex>
                                                            </v-layout>
                                                        </v-flex>
                                                    </v-layout>
                                                </v-timeline-item>
                                            </v-timeline>
                                    </v-layout>
                                </v-card>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-layout>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
                <v-spacer></v-spacer>
            <v-btn color="blue darken-1" flat @click="dialog_sample = false">Tutup</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
    <v-dialog v-model="dialog_result" scrollable max-width="60%">
        <v-card>
            <v-card-title>GARIS WAKTU PROSES</v-card-title>
            <v-divider class="mb-1"></v-divider>
            <v-card-text style="padding:0;height: 560px;">
                <v-layout row>
                    <v-flex xs3 pa-2>
                        <v-card>
                            <v-card-title style="background:#f5f5f5;"></v-card-title>
                            <v-divider></v-divider>
                            <v-layout row>
                                <v-flex xs12>
                                    <v-img :src="header.M_PatientPhotoThumb" aspect-ratio="1.7"></v-img>
                                </v-flex>
                            </v-layout>
                            <v-divider></v-divider>
                            <v-layout align-center row>
                                <v-flex  class="text-xs-center" xs12>
                                    <p style="border-bottom:1px dashed black" class="pa-2 mb-0 font-weight-black">{{header.M_PatientNoReg}}</p>
                                    <p class="pa-2 mb-0">{{header.M_PatientName}}</p>
                                </v-flex>
                            </v-layout>
                        </v-card>
                    </v-flex>
                    <v-flex xs9>
                        <v-layout mt-2 pr-2 mb-2 row>
                            <v-flex xs12>
                                <v-card >
                                    <v-card-title style="background:#f5f5f5;"></v-card-title>
                                    <v-divider class="mb-1"></v-divider>   
                                    <v-layout v-if="header.action === 'verif'" v-for="resume in data_result.details" pl-2 pr-2 row>
                                        <v-flex v-if="resume.ver_status !== 'Y'"  style="background: #FFDF36;" xs12 pa-1 mb-1 >
                                            <v-layout class="mono" style="font-size:12px" row>
                                                <v-flex pl-2 xs4>
                                                    <p v-if="resume"  v-bind:style="{ 'padding-left': (resume.sascode.length-8)*10 + 'px' }" class="mb-0">{{resume.test_name}}</p>
                                                </v-flex>
                                                <v-flex pr-2 xs8 text-xs-right>
                                                   <!-- <kbd>{{resume.ver_username}} | {{resume.ver_date}}</kbd>-->
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                        <v-flex v-if="resume.ver_status == 'Y'"  style="background: #1cbaab;" xs12 pa-1 mb-1 >
                                            <v-layout class="mono" style="font-size:12px" row>
                                                <v-flex pl-2 xs6>
                                                   <p  v-if="resume" v-bind:style="{ 'padding-left': (resume.sascode.length-8)*10 + 'px' }" class="mb-0">{{resume.test_name}}</p>
                                                </v-flex>
                                                <v-flex pr-2 xs6 text-xs-right>
                                                    <kbd v-if="resume.is_result === 'Y'">{{resume.ver_username}} | {{resume.ver_date}}</kbd>
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout v-if="header.action === 'valid'" v-for="resume in data_result.details" pl-2 pr-2 row>
                                        <v-flex v-if="resume.val_status !== 'Y'"  style="background: #FFDF36;" xs12 pa-1 mb-1 >
                                            <v-layout class="mono" style="font-size:12px" row>
                                                <v-flex pl-2 xs4>
                                                    <p  v-if="resume" v-bind:style="{ 'padding-left': (resume.sascode.length-8)*10 + 'px' }" class="mb-0">{{resume.test_name}}</p>
                                                </v-flex>
                                                <v-flex pr-2 xs8 text-xs-right>
                                                   <kbd v-if="resume.val_action === 'lab'">{{resume.ver_username}} | {{resume.ver_date}}</kbd>
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                        <v-flex v-if="resume.val_status == 'Y'"  style="background: #1cbaab;" xs12 pa-1 mb-1 >
                                            <v-layout class="mono" style="font-size:12px" row>
                                                <v-flex pl-2 xs4>
                                                   <p  v-if="resume" v-bind:style="{ 'padding-left': (resume.sascode.length-8)*10 + 'px' }" class="mb-0">{{resume.test_name}}</p>
                                                </v-flex>
                                                <v-flex pr-2 xs8 text-xs-right>
                                                    <kbd v-if="resume.is_result === 'Y'">{{resume.val_username}} | {{resume.val_date}}</kbd>
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                    </v-layout>
                                    <v-layout v-if="header.action === 'print'" v-for="resume in data_result.details" pl-2 pr-2 row>
                                        <v-flex v-if="resume.print_status !== 'Y'"  style="background: #FFDF36;" xs12 pa-1 mb-1 >
                                            <v-layout class="mono" style="font-size:12px" row>
                                                <v-flex pl-2 xs4>
                                                    <p  v-if="resume" v-bind:style="{ 'padding-left': (resume.sascode.length-8)*10 + 'px' }" class="mb-0">{{resume.test_name}}</p>
                                                </v-flex>
                                                <v-flex pr-2 xs8 text-xs-right>
                                                   <!-- <kbd>{{resume.ver_username}} | {{resume.ver_date}}</kbd>-->
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                        <v-flex v-if="resume.print_status == 'Y'"  style="background: #1cbaab;" xs12 pa-1 mb-1 >
                                            <v-layout class="mono" style="font-size:12px" row>
                                                <v-flex pl-2 xs4>
                                                   <p v-if="resume" v-bind:style="{ 'padding-left': (resume.sascode.sascode.length-8)*10 + 'px' }" class="mb-0">{{resume.test_name}}</p>
                                                </v-flex>
                                                <v-flex pr-2 xs8 text-xs-right>
                                                    <kbd v-if="resume.is_result === 'Y'">{{resume.print_username}} | {{resume.print_date}}</kbd>
                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                    </v-layout>
                                </v-card>
                            </v-flex>
                        </v-layout>
                        <v-layout pr-2 row>
                            <v-flex xs12>
                                <v-card>
                                    <v-card-title style="background:#f5f5f5;"></v-card-title>
                                    <v-layout row>
                                        <v-container style="max-width: 600px;">
                                            <v-timeline dense clipped>
                                                <v-timeline-item
                                                    fill-dot
                                                    class="white--text mb-5"
                                                    color="#616161"
                                                    large
                                                >
                                                    <template v-slot:icon>
                                                        <v-avatar>
                                                            <img :src="header.M_PatientPhotoThumb">
                                                        </v-avatar>
                                                    </template>
                                                    <v-layout row>
                                                        <v-flex xs12>
                                                            <v-btn style="font-family: Roboto,sans-serif;margin:0px;padding:0 16px;font-size:11px" small color="#616161" dark> {{header.T_OrderHeaderLabNumber}}</v-btn>
                                                        </v-flex>
                                                    </v-layout>
                                                </v-timeline-item>
                                                <v-timeline-item
                                                    class="mb-3"
                                                    color="grey"
                                                    icon-color="grey lighten-2"
                                                    small
                                                    v-for="detail in data_result.details"
                                                    v-if="detail.val_action != 'lab'"
                                                >
                                                    <v-layout row>
                                                        <v-flex xs12>
                                                            <p class="mb-0">{{detail.val_date}}</p>
                                                            <p v-if="detail.val_action === 'VALIDATION'" class="mb-0">Proses validasi oleh {{ detail.val_username }}</p>
                                                            <p v-if="detail.val_action === 'UNVALIDATION'" class="mb-0">Proses unvalidasi oleh {{detail.val_username}}</p>
                                                            <p v-if="detail.val_action === 'UPDATE_ACT'" class="mb-0">Prose update oleh {{detail.val_username}}</p>
                                                            <p v-if="detail.val_action === 'CX_DOCTOR'" class="mb-0">Perubahan dokter oleh {{detail.val_username}}</p>
                                                        </v-flex>
                                                    </v-layout>
                                                    <v-divider class="mt-1 mb-1"></v-divider>
                                                    <v-layout v-if="detail.val_action === 'VALIDATION'" row>
                                                        <v-flex style="background: #607d8b;color:#fff" xs12 pa-1 mb-1 >
                                                            <v-layout class="mono" style="font-size:12px" row>
                                                                <v-flex pl-2 xs12>
                                                                    {{detail.test_name}}
                                                                </v-flex>
                                                            </v-layout>
                                                        </v-flex>
                                                    </v-layout>
                                                    <v-layout v-if="detail.val_action === 'UNVALIDATION'" row>
                                                        <v-flex style="background: #FFDF36;" xs12 pa-1 mb-1 >
                                                            <v-layout class="mono" style="font-size:12px" row>
                                                                <v-flex pl-2 xs12>
                                                                    {{detail.test_name}}
                                                                </v-flex>
                                                            </v-layout>
                                                        </v-flex>
                                                    </v-layout>
                                                    <v-layout v-if="detail.val_action === 'UPDATE_ACT'" row>
                                                        <v-flex style="background: #1cbaab;" xs12 pa-1 mb-1 >
                                                            <v-layout class="mono" style="font-size:12px" row>
                                                                <v-flex pl-2 xs12>
                                                                    {{detail.test_name}}
                                                                </v-flex>
                                                            </v-layout>
                                                        </v-flex>
                                                    </v-layout>
                                                    <v-layout v-if="detail.val_action === 'CX_DOCTOR' " row>
                                                        <v-flex style="background: #1cbaab;" xs12 pa-1 mb-1 >
                                                            <v-layout class="mono" style="font-size:12px" row>
                                                                <v-flex pl-2 xs12>
                                                                    {{detail.test_name}}
                                                                </v-flex>
                                                            </v-layout>
                                                        </v-flex>
                                                    </v-layout>
                                                </v-timeline-item>
                                            </v-timeline>
                                    </v-layout>
                                </v-card>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-layout>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
                <v-spacer></v-spacer>
            <v-btn color="blue darken-1" flat @click="dialog_result = false">Tutup</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
    <v-dialog v-if="data_print" v-model="dialog_print" scrollable width="560px">
         <v-card>
            <v-card-text>
         <v-layout row class="mb-3">
            <v-flex xs12>
       
                <v-layout class="mono" style="font-size:12px" row>
                    <v-flex xs4>
                        <p class="mb-0">NO LAB</p>
                    </v-flex>
                    <v-flex xs8>
                        <p class="mb-0">{{data_print.no_reg}} / {{data_print.no_reg_ext}}</p>
                    </v-flex>
                </v-layout>
                <v-layout class="mono" style="font-size:12px" row>
                    <v-flex xs4>
                        <p class="mb-0">NAMA PASIEN</p>
                    </v-flex>
                    <v-flex xs8>
                        <p class="mb-0">{{data_print.patient_name}}</p>
                    </v-flex>
                </v-layout>
      
            </v-flex>
         </v-layout>
        <v-divider></v-divider>
                <v-layout class="mt-2 mb-3" row>
                    <v-flex xs12>
                        <p class="font-weight-bold subheader mb-2">SERAH TERIMA INTERNAL</p>
                        <v-layout v-if="data_print && data_print.data_internal && data_print.data_internal.length === 0"  style="font-size:12px" row>
                            <v-flex xs12>
                                <v-alert
                                    value="true"
                                    color="warning"
                                    icon="priority_high"
                                    outline
                                    >
                                    Belum ada yang diserahkan
                                    </v-alert>
                            </v-flex>
                        </v-layout>
                        <div v-if="data_print && data_print.data_internal &&  data_print.data_internal.length > 0" v-for="(data_internal,key_data_internal) in data_print.data_internal" :key="key_data_internal">
                            <v-card class="pa-2 pl-3 pr-3" elevation= "11">
                                <v-layout  class="mono mb-1" style="font-size:12px" row>
                                    <v-flex xs6>
                                        <p class="mono mb-1">Group : {{data_internal.group_name}} | <span class="blue--text">{{data_internal.delivery_type}}</span></p>
                                    </v-flex>
                                    <v-flex xs6>
                                        <p class="mono text-xs-right mb-1">Janji Hasil : {{data_internal.promise_time}}</p>
                                    </v-flex>
                                </v-layout>
                                <v-layout  class="mono mb-2" style="font-size:12px" row>
                                    <v-flex xs6>
                                        <p class="mb-1">Diserahkan oleh : </p>
                                        <p class="mb-0"><span>{{data_internal.sender_name}} [ {{data_internal.sent_time}} ]</span></p>
                                    </v-flex>
                                    <v-flex class="text-xs-right" xs6>
                                        <p class="mb-2">Diterima oleh : </p>
                                        <p v-if="( data_internal.delivery_type === 'PICKUP' || data_internal.delivery_type === 'ADDRESS') && data_internal.status !== 'S'" class="mb-0"><span>{{data_internal.receiver_name}} : {{data_internal.received_time}}</span></p>
                                        <p v-if="( data_internal.delivery_type === 'PICKUP' || data_internal.delivery_type === 'ADDRESS') && data_internal.status === 'S'" class="mb-0"><span class="warning--text">[ belum diterima ]</span></p>
                                        <p v-if="( data_internal.delivery_type === 'WHATSAPP' || data_internal.delivery_type === 'EMAIL')" class="mb-0"> [ SYSTEM ]</p>
                                    </v-flex>
                                </v-layout>
                            </v-card>
                            <v-divider ></v-divider>
                        </div>     
                    </v-flex>
                </v-layout>
                <v-layout v-if="data_print && data_print.data_external" v-for="(data_external,key_data_external) in data_print.data_external" class="mt-2" row>
                    <v-flex v-if="data_external.delivery_type == 'PICKUP'"  class="mb-3" xs12>
                        <p class="font-weight-bold subheader mb-2">SERAH TERIMA DI PRAMITA</p>
                        <v-layout v-if="data_print && data_external.details.length === 0"  style="font-size:12px" row>
                            <v-flex xs12>
                                <v-alert
                                    value="true"
                                    color="warning"
                                    icon="priority_high"
                                    outline
                                    >
                                    Belum ada yang diproses
                                    </v-alert>
                            </v-flex>
                        </v-layout>
                        <div v-if="data_print && data_print.data_external && data_external.details.length > 0" >
                            <v-card v-for="(data_details,key_data_details) in data_external.details" :key="key_data_details" class="pa-2 pl-3 pr-3" elevation= "11">
                                <v-layout  class="mono mb-1" style="font-size:12px" row>
                                    <v-flex xs6>
                                        <p class="mono mb-1">Waktu Penyerahan : {{data_details.sent_time}}</p>
                                    </v-flex>
                                    <v-flex xs6>
                                        <p class="mono text-xs-right mb-1">Janji Hasil : {{data_details.promise_time}}</p>
                                    </v-flex>
                                </v-layout>
                                <v-layout  class="mono mb-2" style="font-size:12px" row>
                                    <v-flex xs6>
                                        <p class="mb-1">Diserahkan oleh : </p>
                                        <p class="mb-0"><span>{{data_details.sender_name}}</span></p>
                                    </v-flex>
                                    <v-flex class="text-xs-right" xs6>
                                        <p class="mb-2">Diterima oleh : </p>
                                        <p class="mb-0">{{data_details.receiver_name}}</p>
                                    </v-flex>
                                </v-layout>
                            </v-card>
                            <v-divider ></v-divider>
                        </div>     
                    </v-flex>
                    <v-flex v-if="data_external.delivery_type == 'EMAIL'"  class="mb-3" xs12>
                        <p class="font-weight-bold subheader mb-2">KIRIM EMAIL</p>
                        <p class="mono mb-2">Kirim ke {{data_external.destinastion}}</p>
                        <v-layout v-if="data_print && data_print.data_external && data_external.details.length === 0"  style="font-size:12px" row>
                            <v-flex xs12>
                                <v-alert
                                    value="true"
                                    color="warning"
                                    icon="priority_high"
                                    outline
                                    >
                                    Belum ada yang diproses
                                    </v-alert>
                            </v-flex>
                        </v-layout>
                        <div v-if="data_print && data_print.data_external && data_external.details.length > 0" >
                            <v-card v-for="(data_details,key_data_details) in data_external.details" :key="key_data_details" class="pa-2 pl-3 pr-3" elevation= "11">
                                <v-layout  class="mono mb-1" style="font-size:12px" row>
                                    <v-flex xs6>
                                        
                                    </v-flex>
                                    <v-flex xs6>
                                        <p class="mono text-xs-right mb-1">Janji Hasil : {{data_details.promise_time}}</p>
                                    </v-flex>
                                </v-layout>
                                <v-layout  class="mono mb-2" style="font-size:12px" row>
                                    <v-flex xs6>
                                        <p class="mb-1">Dikirim oleh : </p>
                                        <p class="mb-0"><span>{{data_details.sender_name}} [ {{data_details.sent_time}} ]</span></p>
                                    </v-flex>
                                    <v-flex class="text-xs-right" xs6>
                                        <p class="mb-2">Status : </p>
                                        <p class="mb-0" v-if="data_details.status === 'S'"><span class="blue--text">Sedang Mengirim</span></p>
                                        <p class="mb-0" v-else-if="data_details.status === 'D'"><span class="green--text">Terkirim</span> [ {{data_details.received_time}} ]</p>
                                        <p class="mb-0" v-else><span class="green--text">Belum Dikirim</span></p>
                                    </v-flex>
                                </v-layout>
                            </v-card>
                            <v-divider ></v-divider>
                        </div>     
                    </v-flex>
                    <v-flex v-if="data_external.delivery_type == 'ADDRESS'"  class="mb-3" xs12>
                        <p class="font-weight-bold subheader mb-2">KIRIM KURIR</p>
                        <p class="mono mb-2">Kirim ke {{data_external.destinastion}}</p>
                        <v-layout v-if="data_print && data_external.details.length === 0"  style="font-size:12px" row>
                            <v-flex xs12>
                                <v-alert
                                    value="true"
                                    color="warning"
                                    icon="priority_high"
                                    outline
                                    >
                                    Belum ada yang diproses
                                    </v-alert>
                            </v-flex>
                        </v-layout>
                        <div v-if="data_print && data_print.data_external && data_external.details.length > 0" >
                            <v-card v-for="(data_details,key_data_details) in data_external.details" :key="key_data_details" class="pa-2 pl-3 pr-3" elevation= "11">
                                <v-layout  class="mono mb-2" style="font-size:12px" row>
                                    <v-flex xs6>
                                        <p class="mb-1">{{data_details.status}}</p>
                                        <p class="mb-1">{{data_details.xtime}}</p>
                                    </v-flex>
                                    <v-flex v-if="data_details.xperson !== ''" class="text-xs-right" xs6>
                                        <p class="mb-2">Diterima Oleh : </p>
                                        <p class="mb-0"><span class="green--text">{{data_details.xperson}}</span></p>
                                    </v-flex>
                                </v-layout>
                            </v-card>
                            <v-divider ></v-divider>
                        </div>     
                    </v-flex>
                    <v-flex v-if="data_external.delivery_type == 'WHATSAPP'"  xs12>
                        <p class="font-weight-bold subheader mb-2">KIRIM WHATSAPP</p>
                        <p class="mono mb-2">Kirim ke {{data_external.destinastion}}</p>
                        <v-layout v-if="data_print && data_print.data_external && data_external.details.length === 0"  style="font-size:12px" row>
                            <v-flex xs12>
                                <v-alert
                                    value="true"
                                    color="warning"
                                    icon="priority_high"
                                    outline
                                    >
                                    Belum ada yang diproses
                                    </v-alert>
                            </v-flex>
                        </v-layout>
                        <div v-if="data_print && data_print.data_external && data_external.details.length > 0" >
                            <v-card v-for="(data_details,key_data_details) in data_external.details" :key="key_data_details" class="pa-2 pl-3 pr-3" elevation= "11">
                                <v-layout  class="mono mb-2" style="font-size:12px" row>
                                    <v-flex v-if="data_details.isSend === 'Y'" xs6>
                                        <p class="mb-2">Dikirim pada : </p>
                                        <p class="mb-1">{{data_details.send_time}}</p>
                                    </v-flex>
                                    <v-flex v-if="data_details.isReceive === 'Y'" class="text-xs-right" xs6>
                                        <p class="mb-2">Diterima pada : </p>
                                        <p class="mb-0"><span class="green--text">{{data_details.received_time}}</span></p>
                                    </v-flex>
                                </v-layout>
                            </v-card>
                            <v-divider ></v-divider>
                        </div>     
                    </v-flex>
                </v-layout>
            </v-card-text>
        </v-card>
    </v-dialog>
  </v-layout>
</template>

<style scoped>
</style>

<script>
module.exports = {
   mounted() {
       //this.dialog = true
      //this.$store.dispatch("patientlist/searchcompany", this.search_company)
   },
   methods : {
        getTestName(row){
            var spasi = row.sascode.length/2
            var testname = "<span style='padding-left:"+spasi+"px'>"+row.test_name+"</span>"
            return testname
        },
        getxfilm(xfilm,key){
           var xarr = xfilm.split("^")
           var rtn = xarr[key]
           if(key === 0){
                if(xarr[key] === 'N')
                    rtn = 'Tanpa film'
                if(xarr[key] === 'S')
                    rtn = 'Film Kecil'
                if(xarr[key] === 'M')
                    rtn = 'Film Sedang'
                if(xarr[key] === 'XL')
                    rtn = 'Film Besar'
           }

           return rtn
        },
       getxform(xform,key){
           var xarr = xform.split("^")
           var rtn = ''
           if(xarr[key])
            rtn = xarr[key]
           return rtn
       },
       getPaymentType(data){
           var rtn = ''
           if(data){
                var x = data.split("+")
               rtn = x[0]
           }
           return rtn
       },
       getPaymentNote(data){
           
           var rtn = ''
           if(data){
               var x = data.split("+")
               if(x[1])
                rtn = x[1]
           }
            
           return rtn
       },
       dFormat(xdate){
           return moment(xdate, 'YYYY-MM-DD').format('DD-MM-YYYY')
       },
       dtFormat(xdate){
           return moment(xdate, 'YYYY-MM-DD HH:mm:ss').format('DD-MM-YYYY HH:mm')
       },
       xparse(data){
           //console.log(data)
           return JSON.parse(data)
       },
       one_money(p) {
            return window.one_money(p)
        },
       totalbruto(details){
           var total = 0
            details.forEach(function(entry) {
                total = total + parseInt(entry.T_OrderDetailPrice)
            })
            return window.one_money(total)
       },
       totaldiscount(details){
           var total = 0
            details.forEach(function(entry) {
                total = total + parseInt(entry.T_OrderDetailDiscTotal)
            })
            return window.one_money(total)
       },
       total(details){
           var total = 0
            details.forEach(function(entry) {
                total = total + parseInt(entry.T_OrderDetailTotal)
            })
            return window.one_money(total)
       },
       getname(data){
            if(data){
                var rtn = ''
                if(data){
                        var x = data.split("^")
                        rtn = x[0]
                }
                    
                return rtn
            }else{
                return '-'
            }
           
       },
       getaddress(data){
            if(data){
                var rtn = ''
                if(data){
                        var x = data.split("^")
                        if(x[1])
                            rtn = x[1]
                }
                return rtn
            }else{
                return '-'
            }
           
       }
   },
   computed: {
       dialog_print: {
            get() {
                return this.$store.state.patientlist.dialog_print
            },
            set(val) { 
                this.$store.commit("patientlist/update_dialog_print",val)
            }
        },
        data_sample(){
            return this.$store.state.patientlist.data_sample
        },
        data_result(){
            return this.$store.state.patientlist.data_result
        },
        data_print(){
            return this.$store.state.patientlist.data_print
        },
        header: {
            get() {
                return this.$store.state.patientlist.header
            },
            set(val) { 
                this.$store.commit("patientlist/update_header",val)
            }
        },
        dialog: {
            get() {
                return this.$store.state.patientlist.dialog_timeline
            },
            set(val) { 
                this.$store.commit("patientlist/update_dialog_timeline",val)
            }
        },
        dialog_sample: {
            get() {
                return this.$store.state.patientlist.dialog_sample
            },
            set(val) { 
                this.$store.commit("patientlist/update_dialog_sample",val)
            }
        },
        dialog_result: {
            get() {
                return this.$store.state.patientlist.dialog_result
            },
            set(val) { 
                this.$store.commit("patientlist/update_dialog_result",val)
            }
        },
        datas: {
            get() {
                return this.$store.state.patientlist.datas
            },
            set(val) { 
                this.$store.commit("patientlist/update_datas",val)
            }
        }
   },
   data() {
      return {
        //dialog:false
      };
   }
}
</script>
