<template>
    <div>
        <v-dialog v-model="xdialogaction" persistent  max-width="350">
            <v-card>
                <v-card-title color="warning"  class="headline">Konfirmasi</v-card-title>
                <v-card-text v-html="xmsgaction">
                    
                </v-card-text>
                <v-card-actions>
                <v-spacer></v-spacer>
                    <v-btn color="primary darken-1" flat @click="closeDialogAction()">Ya</v-btn>
                    <v-btn color="error darken-1" flat @click="xdialogaction = false">Tutup</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-dialog v-model="xdialogimage" persistent  max-width="650" max-height="500">
            <v-card color="amber lighten-5">
                <v-container grid-list-sm fluid>
                    <v-layout row wrap>
                        <v-flex>
                            <v-card flat tile class="d-flex">
                                <v-img
                                :src="ximage"
                                aspect-ratio="1"
                                class="grey lighten-2"
                                >
                                <template v-slot:placeholder>
                                    <v-layout
                                    fill-height
                                    align-center
                                    justify-center
                                    ma-0
                                    >
                                    <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                                    </v-layout>
                                </template>
                                </v-img>
                            </v-card>
                        </v-flex>
                    </v-layout>
                </v-container>
                <v-card-actions>
                   
                    <v-spacer></v-spacer>
                    <v-btn color="black" dark @click="xdialogimage = false">Tutup</v-btn>
                </v-card-actions>
            <v-card>
        </v-dialog>
        <v-layout row mb-2 wrap>
            <v-flex xs12 pr-1>
                <v-card >
                     <v-layout align-center fill-height pt-1 pb-1 row>
                        <v-flex pt-1 pb-1 pl-2 pr-2 xs10>
                            <h5 class="headline font-weight-black"><v-icon color="black" large left>accessibility</v-icon>PEMERIKSAAN FISIK</h5>
                        </v-flex>
                        <v-flex class="text-xs-right" pt-1 pb-1 pl-2 pr-2 xs2>
                            <v-btn dark tile  color="info"  block  >SIMPAN</v-btn>
                        </v-flex>
                    </v-layout>
                    <v-divider></v-divider>
                    <v-layout style="background:#90caf9" justify-center row>
                        <v-flex xs3 pr-3  pt-3 pb-3 shrink>
                            <v-card class="pa-2 right" width="200">
                                <v-img
                                    height="200"
                                    width="100%"
                                    src="https://anggrek.aplikasi.web.id/one-media/one-image-nonlab/L-190723002-3-GsNkx.jpeg"
                                ></v-img>
                            </v-card>
                        </v-flex>
                        <v-flex pt-3 pr-3 pb-3 xs8>
                            <v-card
                                class="mx-auto"
                                
                                flat
                                
                            >
                                <v-layout pl-2 pr-2 row>
                                    <v-flex xs6>
                                        <v-text-field
                                            single-line
                                            hide-details
                                            value="NO LAB"
                                        ></v-text-field>
                                    </v-flex>
                                     <v-flex justify-right xs6>
                                        <v-text-field
                                            single-line
                                            hide-details
                                            value="L-190722002"
                                        ></v-text-field>
                                    </v-flex>
                                </v-layout>
                                <v-layout pl-2 pr-2 row>
                                    <v-flex xs6>
                                        <v-text-field
                                            single-line
                                            hide-details
                                            value="NAMA"
                                        ></v-text-field>
                                    </v-flex>
                                     <v-flex justify-right xs6>
                                        <v-text-field
                                            single-line
                                            hide-details
                                            value="FAJRI HARDHITA M"
                                        ></v-text-field>
                                    </v-flex>
                                </v-layout>
                                <v-layout pl-2 pr-2 row>
                                    <v-flex xs6>
                                        <v-text-field
                                            single-line
                                            hide-details
                                            value="UMUR"
                                        ></v-text-field>
                                    </v-flex>
                                     <v-flex justify-right xs6>
                                        <v-text-field
                                            single-line
                                            hide-details
                                            value="84 TAHUN 10 BULAN 12 HARI"
                                        ></v-text-field>
                                    </v-flex>
                                </v-layout>
                                <v-layout pl-2 pr-2 row>
                                    <v-flex xs6>
                                        <v-text-field
                                            single-line
                                            hide-details
                                            value="JENIS KELAMIN"
                                        ></v-text-field>
                                    </v-flex>
                                     <v-flex justify-right xs6>
                                        <v-text-field
                                            single-line
                                            hide-details
                                            value="LAKI-LAKI"
                                        ></v-text-field>
                                    </v-flex>
                                </v-layout>
                                <v-layout pr-2 pl-2 row>
                                    <v-flex xs6>
                                        <v-text-field
                                            single-line
                                            hide-details
                                            value="INSTANSI"
                                        ></v-text-field>
                                    </v-flex>
                                     <v-flex justify-right xs6>
                                        <v-text-field
                                            single-line
                                            hide-details
                                            value="PT. SADHANA ABIYASA SAMPOERNA"
                                        ></v-text-field>
                                    </v-flex>
                                </v-layout>
                                 <v-layout pr-2 pl-2 row>
                                    <v-flex xs6>
                                        <v-text-field
                                            single-line
                                            hide-details
                                            value="ALAMAT"
                                        ></v-text-field>
                                    </v-flex>
                                     <v-flex justify-right xs6>
                                        <v-text-field
                                            single-line
                                            hide-details
                                            value="JL. MAJAPAHIT NO. 221 SEMARANG"
                                        ></v-text-field>
                                    </v-flex>
                                </v-layout>
                                 <v-layout pr-2 pl-2 pb-4 row>
                                    <v-flex xs6>
                                        <v-text-field
                                            single-line
                                            hide-details
                                            value="TANGGAL PEMERIKSAAN"
                                        ></v-text-field>
                                    </v-flex>
                                     <v-flex justify-right xs6>
                                        <v-text-field
                                            single-line
                                            hide-details
                                            value="24-07-2019"
                                        ></v-text-field>
                                    </v-flex>
                                </v-layout>
                            </v-card>
                        </v-flex>
                    </v-layout>
                    <v-layout pt-2 pb-1 align-center row>
                        <v-flex style="background:#f44336;" pl-2 pt-2 pb-2 shrink xs1>
                             
                        </v-flex>
                        <v-flex  pl-2 pt-2 pb-2 xs4>
                            <h4>KELUHAN SAAT INI</h4>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout align-space-around row>
                        <v-flex pl-2 pt-3 pb-3 pr-2 shrink xs12>
                            <v-textarea
                                outline
                                hide-details
                                single-line
                                label="Isi keluhan di sini"
                                value=""
                            ></v-textarea>
                        </v-flex>
                    </v-layout>
                    <v-layout row>
                        <v-flex d-flex><v-divider></v-divider></v-flex>
                    </v-layout>
                    <v-layout pt-2 pb-1 align-center row>
                        <v-flex style="background:#f44336;" pl-2 pt-2 pb-2 shrink xs1>
                             
                        </v-flex>
                        <v-flex  pl-2 pt-2 pb-2 xs4>
                            <h4>RIWAYAT KESEHATAN</h4>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout wrap>
                        <v-flex pl-2 pt-2 pb-2 pr-2 shrink xs12>
                            <v-layout pt-2 pb-2 align-center row>
                                <v-flex pt-1 pb-1 style="background:#f44336;color:#fff" xs12>
                                    <h3 class="title text-xs-center">PERNAHKAH ATAU ANDA SEDANG MENDERITA PENYAKIT DI BAWAH INI ?</h3>
                                </v-flex>
                            </v-layout>
                            <v-layout row>
                                <v-flex xs6>
                                    <table class="tform">
                                        <tr>
                                            <th width="35%" class="text-xs-center">Keluhan / Penyakit</th>
                                            <th width="9%" class="text-xs-center">Ya</th> 
                                            <th width="9%" class="text-xs-center">Tidak</th>
                                            <th class="text-xs-center">Keterangan</th>
                                        </tr>
                                        <tr>
                                            <td>Perbahan berat badan > 5kg / bulan</td>
                                            <td>
                                                <v-btn flat style="min-width:45px;margin:0" dark color="red">
                                                    <v-icon>close</v-icon>
                                                </v-btn>
                                            </td>
                                            <td>
                                                <v-btn flat style="min-width:45px;margin:0" dark color="info">
                                                    <v-icon>check</v-icon>
                                                </v-btn>
                                            </td>
                                            <td style="vertical-align:middle">
                                                <v-text-field
                                                    style="padding:0px;margin-top:0px"
                                                    hide-details
                                                    single-line
                                                ></v-text-field>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Tekanan darah tinggi / rendah</td>
                                            <td>
                                                <v-btn flat style="min-width:45px;margin:0" dark color="red">
                                                    <v-icon>close</v-icon>
                                                </v-btn>
                                            </td>
                                            <td>
                                                <v-btn flat style="min-width:45px;margin:0" dark color="info">
                                                    <v-icon>check</v-icon>
                                                </v-btn>
                                            </td>
                                            <td style="vertical-align:middle">
                                                <v-text-field
                                                    style="padding:0px;margin-top:0px"
                                                    hide-details
                                                    single-line
                                                ></v-text-field>
                                            </td>
                                        </tr>
                                    </table>
                                </v-flex>
                                <v-flex xs6>
                                    <table class="tform">
                                        <tr>
                                            <th width="35%" class="text-xs-center">Keluhan / Penyakit</th>
                                            <th width="9%" class="text-xs-center">Ya</th> 
                                            <th width="9%" class="text-xs-center">Tidak</th>
                                            <th class="text-xs-center">Keterangan</th>
                                        </tr>
                                        <tr>
                                            <td>Perbahan berat badan > 5kg / bulan</td>
                                            <td class="text-xs-center">
                                                <v-btn flat style="min-width:45px;margin:0" dark color="red">
                                                    <v-icon>close</v-icon>
                                                </v-btn>
                                            </td>
                                            <td class="text-xs-center">
                                                <v-btn flat style="min-width:45px;margin:0" dark color="info">
                                                    <v-icon>check</v-icon>
                                                </v-btn>
                                            </td>
                                            <td style="vertical-align:middle">
                                                <v-text-field
                                                    style="padding:0px;margin-top:0px"
                                                    hide-details
                                                    single-line
                                                ></v-text-field>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Tekanan darah tinggi / rendah</td>
                                            <td class="text-xs-center">
                                                <v-btn flat style="min-width:45px;margin:0" dark color="red">
                                                    <v-icon>close</v-icon>
                                                </v-btn>
                                            </td>
                                            <td class="text-xs-center">
                                                <v-btn flat style="min-width:45px;margin:0" dark color="info">
                                                    <v-icon>check</v-icon>
                                                </v-btn>
                                            </td>
                                            <td style="vertical-align:middle">
                                                <v-text-field
                                                    style="padding:0px;margin-top:0px"
                                                    hide-details
                                                    single-line
                                                ></v-text-field>
                                            </td>
                                        </tr>
                                    </table>
                                </v-flex>
                            </v-layout>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout pt-2 pb-1 align-center row>
                        <v-flex style="background:#f44336;" pl-2 pt-2 pb-2 shrink xs1>
                             
                        </v-flex>
                        <v-flex  pl-2 pt-2 pb-2 xs4>
                            <h4>RIWAYAT ALERGI</h4>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout wrap>
                        <v-flex pl-2 pt-2 pb-2 pr-2 shrink xs12>
                            <v-layout row>
                                <v-flex xs12>
                                    <table class="tform">
                                        <tr>
                                            <th width="35%" class="text-xs-center">Penyebab Alergi</th>
                                            <th class="text-xs-center">Ya</th> 
                                            <th class="text-xs-center">Tidak</th>
                                            <th class="text-xs-center">Bila Ya, Sebutkan</th>
                                        </tr>
                                        <tr>
                                            <td>Obat</td>
                                            <td class="text-xs-center">
                                                <v-btn flat style="min-width:45px;margin:0" dark color="red">
                                                    <v-icon>close</v-icon>
                                                </v-btn>
                                            </td>
                                            <td class="text-xs-center">
                                                <v-btn flat style="min-width:45px;margin:0" dark color="info">
                                                    <v-icon>check</v-icon>
                                                </v-btn>
                                            </td>
                                            <td style="vertical-align:middle">
                                                <v-text-field
                                                    style="padding:0px;margin-top:0px"
                                                    hide-details
                                                    single-line
                                                ></v-text-field>
                                            </td>
                                        </tr>
                                       
                                    </table>
                                </v-flex>
                            </v-layout>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout pt-2 pb-1 align-center row>
                        <v-flex style="background:#f44336;" pl-2 pt-2 pb-2 shrink xs1>
                             
                        </v-flex>
                        <v-flex  pl-2 pt-2 pb-2 xs4>
                            <h4>RIWAYAT KONSUMSI OBAT TERATUR</h4>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout wrap>
                        <v-flex pl-2 pt-2 pb-2 pr-2 shrink xs12>
                            <v-layout row>
                                <v-flex xs12>
                                    <table class="tform">
                                        <tr>
                                            <th width="35%" class="text-xs-center">Jenis obat-obatan</th>
                                            <th width="15%" class="text-xs-center">Dosis</th> 
                                            <th class="text-xs-center">Lama konsumsi obat</th>
                                        </tr>
                                        <tr>
                                            <td>Obat</td>
                                            <td style="vertical-align:middle">
                                                <v-text-field
                                                    style="padding:0px;margin-top:0px"
                                                    hide-details
                                                    single-line
                                                ></v-text-field>
                                            </td>
                                            <td style="vertical-align:middle">
                                                <v-text-field
                                                    style="padding:0px;margin-top:0px"
                                                    hide-details
                                                    single-line
                                                ></v-text-field>
                                            </td>
                                        </tr>
                                       
                                    </table>
                                </v-flex>
                            </v-layout>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout pt-2 pb-1 align-center row>
                        <v-flex style="background:#f44336;" pl-2 pt-2 pb-2 shrink xs1>
                             
                        </v-flex>
                        <v-flex  pl-2 pt-2 pb-2 xs4>
                            <h4>GAYA HIDUP</h4>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout wrap>
                        <v-flex pl-2 pt-2 pb-2 pr-2 shrink xs12>
                            <v-layout row>
                                <v-flex xs12>
                                    <table class="tform">
                                        <tr>
                                            <th width="35%" class="text-xs-center">Jenis / Kebiasaan</th>
                                            <th class="text-xs-center">Ya</th> 
                                            <th class="text-xs-center">Tidak</th>
                                            <th class="text-xs-center">Jumlah</th>
                                        </tr>
                                        <tr>
                                            <td>Merokok</td>
                                            <td class="text-xs-center">
                                                <v-btn flat style="min-width:45px;margin:0" dark color="red">
                                                    <v-icon>close</v-icon>
                                                </v-btn>
                                            </td>
                                            <td class="text-xs-center">
                                                <v-btn flat style="min-width:45px;margin:0" dark color="info">
                                                    <v-icon>check</v-icon>
                                                </v-btn>
                                            </td>
                                            <td style="vertical-align:middle">
                                                <v-text-field
                                                    style="padding:0px;margin-top:0px"
                                                    hide-details
                                                    single-line
                                                ></v-text-field>
                                            </td>
                                        </tr>
                                       
                                    </table>
                                </v-flex>
                            </v-layout>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout pt-2 pb-1 align-center row>
                        <v-flex style="background:#f44336;" pl-2 pt-2 pb-2 shrink xs1>
                             
                        </v-flex>
                        <v-flex  pl-2 pt-2 pb-2 xs4>
                            <h4>TANDA - TANDA VITAL</h4>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout wrap>
                        <v-flex pl-2 pt-2 pb-2 pr-2 shrink xs12>
                            <v-layout row>
                                <v-flex xs12>
                                    <table class="tform">
                                        <tr>
                                            <span>
                                            <td width="20%">Denyut Nadi</td>
                                            <td width="34%" style="vertical-align:middle">
                                                <v-text-field
                                                    style="padding:0px;margin-top:0px"
                                                    hide-details
                                                    single-line
                                                ></v-text-field>
                                            </td>
                                            </span>
                                            <span>
                                            <td width="20%">Ritme Denyut Nadi</td>
                                            <td width="13%">
                                                <v-btn flat style="min-width:45px;margin:0" dark color="red">
                                                    <v-icon left>close</v-icon> Normal
                                                </v-btn>
                                            </td>
                                            <td width="13%">
                                                <v-btn flat style="min-width:45px;margin:0" dark color="info">
                                                    <v-icon left>close</v-icon> Tidak
                                                </v-btn>
                                            </td>
                                            </span>
                                        </tr>
                                        
                                    </table>
                                </v-flex>
                            </v-layout>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout pt-2 pb-1 align-center row>
                        <v-flex style="background:#f44336;" pl-2 pt-2 pb-2 shrink xs1>
                             
                        </v-flex>
                        <v-flex  pl-2 pt-2 pb-2 xs4>
                            <h4>KEADAAN UMUM</h4>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout wrap>
                        <v-flex pl-2 pt-2 pb-2 pr-2 shrink xs12>
                            <v-layout row>
                                <v-flex xs12>
                                    <table class="tform">
                                        <tr>
                                            <th class="text-xs-center" width="30%">Keadaan Umum</th>
                                            <th colspan="3" class="text-xs-center" style="vertical-align:middle">
                                                Keterangan
                                            </th>
                                        </tr>
                                        <tr>
                                            <td width="30%">Kontak Psikis / Perhatian</td>
                                            <td width="15%">
                                                <v-btn flat style="min-width:45px;margin:0" dark color="red">
                                                    <v-icon left>close</v-icon> Normal
                                                </v-btn>
                                            </td>
                                            <td width="15%">
                                                <v-btn flat style="min-width:45px;margin:0" dark color="info">
                                                    <v-icon left>close</v-icon> Tidak
                                                </v-btn>
                                            </td>
                                            <td style="vertical-align:middle">
                                                <v-text-field
                                                    style="padding:0px;margin-top:0px"
                                                    hide-details
                                                    single-line
                                                ></v-text-field>
                                            </td>
                                        </tr>
                                    </table>
                                </v-flex>
                            </v-layout>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout pt-2 pb-1 align-center row>
                        <v-flex style="background:#f44336;" pl-2 pt-2 pb-2 shrink xs1>
                             
                        </v-flex>
                        <v-flex  pl-2 pt-2 pb-2 xs4>
                            <h4>MATA</h4>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout wrap>
                        <v-flex pl-2 pt-2 pb-2 pr-2 shrink xs12>
                            <v-layout row>
                                <v-flex xs12>
                                    <table class="tform">
                                        <tr>
                                            <th class="text-xs-center" width="30%">Mata</th>
                                            <th colspan="3" class="text-xs-center" style="vertical-align:middle">
                                                Keterangan
                                            </th>
                                        </tr>
                                        <tr>
                                            <td width="30%">Visus Uncorr / corr</td>
                                            <td width="15%">
                                                <v-btn flat style="min-width:45px;margin:0" dark color="red">
                                                    <v-icon left>close</v-icon> Normal
                                                </v-btn>
                                            </td>
                                            <td width="15%">
                                                <v-btn flat style="min-width:45px;margin:0" dark color="info">
                                                    <v-icon left>close</v-icon> Tidak
                                                </v-btn>
                                            </td>
                                            <td style="vertical-align:middle">
                                                <v-text-field
                                                    style="padding:0px;margin-top:0px"
                                                    hide-details
                                                    single-line
                                                ></v-text-field>
                                            </td>
                                        </tr>
                                    </table>
                                </v-flex>
                            </v-layout>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout pt-2 pb-1 align-center row>
                        <v-flex style="background:#f44336;" pl-2 pt-2 pb-2 shrink xs1>
                             
                        </v-flex>
                        <v-flex  pl-2 pt-2 pb-2 xs4>
                            <h4>GIGI</h4>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout wrap>
                        <v-flex pl-2 pt-2 pb-2 pr-2 shrink xs12>
                            <v-layout row>
                                <v-flex xs12>
                                    <table>
                                        <tr>
                                            <th colspan="18">Gigi Geligi</th>
                                        </tr>
                                        <tr class="bggrey">
                                            <th></th>
                                            <th class="text-xs-center"colspan="8">GIGI KIRI</th>
                                            <th class="text-xs-center"colspan="8">GIGI KANAN</th>
                                            <th></th>
                                        </tr>
                                        <tr>
                                            <th>KODE</th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                             <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th>KODE</th>
                                        </tr>
                                        <tr class="bggrey">
                                            <th>ATAS</th>
                                            <th class="thgigi">
                                                8
                                            </th>
                                            <th class="thgigi">
                                                7
                                            </th>
                                            <th class="thgigi">
                                               6
                                            </th>
                                            <th class="thgigi">
                                                5
                                            </th>
                                            <th class="thgigi">
                                                4
                                            </th>
                                            <th class="thgigi">
                                                3
                                            </th>
                                            <th class="thgigi">
                                                2
                                            </th>
                                            <th class="thgigi">
                                                1
                                            </th>
                                            <th class="thgigi">
                                                1
                                            </th>
                                            <th class="thgigi">
                                                2
                                            </th>
                                            <th class="thgigi">
                                                3
                                            </th>
                                            <th class="thgigi">
                                                4
                                            </th>
                                            <th class="thgigi">
                                                5
                                            </th>
                                            <th class="thgigi">
                                                6
                                            </th>
                                            <th class="thgigi">
                                                7
                                            </th>
                                            <th class="thgigi">
                                                8
                                            </th>
                                            <th>ATAS</th>
                                        </tr>
                                        <tr class="bggrey">
                                            <th>BAWAH</th>
                                            <th class="thgigi">
                                                8
                                            </th>
                                            <th class="thgigi">
                                                7
                                            </th>
                                            <th class="thgigi">
                                               6
                                            </th>
                                            <th class="thgigi">
                                                5
                                            </th>
                                            <th class="thgigi">
                                                4
                                            </th>
                                            <th class="thgigi">
                                                3
                                            </th>
                                            <th class="thgigi">
                                                2
                                            </th>
                                            <th class="thgigi">
                                                1
                                            </th>
                                            <th class="thgigi">
                                                1
                                            </th>
                                            <th class="thgigi">
                                                2
                                            </th>
                                            <th class="thgigi">
                                                3
                                            </th>
                                            <th class="thgigi">
                                                4
                                            </th>
                                            <th class="thgigi">
                                                5
                                            </th>
                                            <th class="thgigi">
                                                6
                                            </th>
                                            <th class="thgigi">
                                                7
                                            </th>
                                            <th class="thgigi">
                                                8
                                            </th>
                                            <th>BAWAH</th>
                                        </tr>
                                        <tr>
                                            <th>KODE</th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                             <th class="thgigi">
                                                <input type="text" class="input_gigi"/>
                                            </th>
                                            <th>KODE</th>
                                        </tr>
                                        <tr class="bggrey">
                                            <th></th>
                                            <th class="text-xs-center"colspan="8">GIGI KIRI</th>
                                            <th class="text-xs-center"colspan="8">GIGI KANAN</th>
                                            <th></th>
                                        </tr>
                                    </table>
                                </v-flex>
                            </v-layout>
                            <v-layout align-center pt-4 pl-3 row>
                                <v-flex d-flex><h3>KETERANGAN KODE :</h3></v-flex>
                            </v-layout>
                            <v-layout align-center pt-3 pl-3 pb-3 row>
                                <v-flex xs2>
                                    <v-layout align-center row>
                                        <v-flex xs4>
                                            <v-btn small style="min-width:45px;margin:0" dark color="black">
                                                X
                                            </v-btn>
                                        </v-flex>
                                        <v-flex xs8>
                                            <h5>: BERLUBANG</h5>
                                        </v-flex>
                                </v-flex>
                                <v-flex xs2>
                                    <v-layout align-center row>
                                        <v-flex xs4>
                                            <v-btn small style="min-width:45px;margin:0" dark color="teal">
                                                C
                                            </v-btn>
                                        </v-flex>
                                        <v-flex xs8>
                                            <h5>: TAMBALAN</h5>
                                        </v-flex>
                                </v-flex>
                                <v-flex xs2>
                                    <v-layout align-center row>
                                        <v-flex xs4>
                                            <v-btn small style="min-width:45px;margin:0" dark color="red">
                                                O
                                            </v-btn>
                                        </v-flex>
                                        <v-flex xs8>
                                            <h5>: TANGGAL</h5>
                                        </v-flex>
                                </v-flex>
                                <v-flex xs2>
                                    <v-layout align-center row>
                                        <v-flex xs4>
                                            <v-btn small style="min-width:45px;margin:0" dark color="brown">
                                                R
                                            </v-btn>
                                        </v-flex>
                                        <v-flex xs8>
                                            <h5>: SISA AKAR</h5>
                                        </v-flex>
                                </v-flex>
                                <v-flex xs2>
                                    <v-layout align-center row>
                                        <v-flex xs4>
                                            <v-btn small style="min-width:45px;margin:0" dark color="yellow accent-4">
                                                A
                                            </v-btn>
                                        </v-flex>
                                        <v-flex xs8>
                                            <h5>: GIGI PALSU</h5>
                                        </v-flex>
                                </v-flex>
                            </v-layout>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout pt-2 pb-1 align-center row>
                        <v-flex style="background:#f44336;" pl-2 pt-2 pb-2 shrink xs1>
                             
                        </v-flex>
                        <v-flex  pl-2 pt-2 pb-2 xs4>
                            <h4>THT</h4>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout wrap>
                        <v-flex pl-2 pt-2 pb-2 pr-2 shrink xs12>
                            <v-layout row>
                                <v-flex xs12>
                                    <table class="tform">
                                        <tr>
                                            <th class="text-xs-center" width="30%">THT</th>
                                            <th colspan="3" class="text-xs-center" style="vertical-align:middle">
                                                Keterangan
                                            </th>
                                        </tr>
                                        <tr>
                                            <td width="30%">Visus Uncorr / corr</td>
                                            <td width="15%">
                                                <v-btn flat style="min-width:45px;margin:0" dark color="red">
                                                    <v-icon left>close</v-icon> Normal
                                                </v-btn>
                                            </td>
                                            <td width="15%">
                                                <v-btn flat style="min-width:45px;margin:0" dark color="info">
                                                    <v-icon left>close</v-icon> Tidak
                                                </v-btn>
                                            </td>
                                            <td style="vertical-align:middle">
                                                <v-text-field
                                                    style="padding:0px;margin-top:0px"
                                                    hide-details
                                                    single-line
                                                ></v-text-field>
                                            </td>
                                        </tr>
                                    </table>
                                </v-flex>
                            </v-layout>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout pt-2 pb-1 align-center row>
                        <v-flex style="background:#f44336;" pl-2 pt-2 pb-2 shrink xs1>
                             
                        </v-flex>
                        <v-flex  pl-2 pt-2 pb-2 xs4>
                            <h4>DADA DAN PERUT</h4>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout wrap>
                        <v-flex pl-2 pt-2 pb-2 pr-2 shrink xs12>
                            <v-layout row>
                                <v-flex xs12>
                                    <table class="tform">
                                        <tr>
                                            <th class="text-xs-center" width="30%">Dada dan Perut</th>
                                            <th colspan="3" class="text-xs-center" style="vertical-align:middle">
                                                Keterangan
                                            </th>
                                        </tr>
                                        <tr>
                                            <td width="30%">Visus Uncorr / corr</td>
                                            <td width="15%">
                                                <v-btn flat style="min-width:45px;margin:0" dark color="red">
                                                    <v-icon left>close</v-icon> Normal
                                                </v-btn>
                                            </td>
                                            <td width="15%">
                                                <v-btn flat style="min-width:45px;margin:0" dark color="info">
                                                    <v-icon left>close</v-icon> Tidak
                                                </v-btn>
                                            </td>
                                            <td style="vertical-align:middle">
                                                <v-text-field
                                                    style="padding:0px;margin-top:0px"
                                                    hide-details
                                                    single-line
                                                ></v-text-field>
                                            </td>
                                        </tr>
                                    </table>
                                </v-flex>
                            </v-layout>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout pt-2 pb-1 align-center row>
                        <v-flex style="background:#f44336;" pl-2 pt-2 pb-2 shrink xs1>
                             
                        </v-flex>
                        <v-flex  pl-2 pt-2 pb-2 xs4>
                            <h4>SISTEM PERSYARAFAN</h4>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout wrap>
                        <v-flex pl-2 pt-2 pb-2 pr-2 shrink xs12>
                            <v-layout row>
                                <v-flex xs12>
                                    <table class="tform">
                                        <tr>
                                            <th class="text-xs-center" width="30%">Sistem Persyafan</th>
                                            <th colspan="3" class="text-xs-center" style="vertical-align:middle">
                                                Keterangan
                                            </th>
                                        </tr>
                                        <tr>
                                            <td width="30%">Visus Uncorr / corr</td>
                                            <td width="15%">
                                                <v-btn flat style="min-width:45px;margin:0" dark color="red">
                                                    <v-icon left>close</v-icon> Normal
                                                </v-btn>
                                            </td>
                                            <td width="15%">
                                                <v-btn flat style="min-width:45px;margin:0" dark color="info">
                                                    <v-icon left>close</v-icon> Tidak
                                                </v-btn>
                                            </td>
                                            <td style="vertical-align:middle">
                                                <v-text-field
                                                    style="padding:0px;margin-top:0px"
                                                    hide-details
                                                    single-line
                                                ></v-text-field>
                                            </td>
                                        </tr>
                                    </table>
                                </v-flex>
                            </v-layout>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout pt-2 pb-1 align-center row>
                        <v-flex style="background:#f44336;" pl-2 pt-2 pb-2 shrink xs1>
                             
                        </v-flex>
                        <v-flex  pl-2 pt-2 pb-2 xs4>
                            <h4>KESIMPULAN FISIK</h4>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout align-space-around row>
                        <v-flex pl-2 pt-3 pb-3 pr-2 shrink xs12>
                            <v-textarea
                                outline
                                hide-details
                                single-line
                                label="Isi kesimpulan di sini"
                                value=""
                            ></v-textarea>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout pt-2 pb-1 align-center row>
                        <v-flex style="background:#f44336;" pl-2 pt-2 pb-2 shrink xs1>
                             
                        </v-flex>
                        <v-flex  pl-2 pt-2 pb-2 xs4>
                            <h4>SARAN FISIK</h4>
                        </v-flex>
                    </v-layout>
                    <v-layout align-center row><v-divider></v-divider></v-layout>
                    <v-layout align-space-around row>
                        <v-flex pl-2 pt-3 pb-3 pr-2 shrink xs12>
                            <v-textarea
                                outline
                                hide-details
                                single-line
                                label="Isi saran di sini"
                                value=""
                            ></v-textarea>
                        </v-flex>
                    </v-layout>
                </v-card>
            </v-flex>
        </v-layout>
       
    </div>     
</template>

<style scoped>
table {
  width:100%;
}
table,  td, th {
  border: 1px solid black;
  border-collapse: collapse;
}


th, td {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: left;
}
table.tform tr:nth-child(even) {
  background-color: #eee;
}
table.tform tr:nth-child(odd) {
 background-color: #fff;
}
.thgigi{
    width:50px!important;
    padding:5px!important;
    text-align:center;
}
.input_gigi{
    width:100%;
    border:1px solid grey;
    font-size:14px;
    text-align:center;
    line-height: 2;
    text-transform: uppercase;
}
.bggrey{
    background:#eee!important;
}
</style>

<script>
module.exports = {
    data: () => ({
         labels: ['SU', 'MO', 'TU', 'WED', 'TH', 'FR', 'SA'],
        time: 0,
        forecast: [
          { day: 'Tuesday', icon: 'mdi-white-balance-sunny', temp: '24\xB0/12\xB0' },
          { day: 'Wednesday', icon: 'mdi-white-balance-sunny', temp: '22\xB0/14\xB0' },
          { day: 'Thursday', icon: 'mdi-cloud', temp: '25\xB0/15\xB0' },
        ],
    }),
    computed: {
        xdialogaction:{
            get() {
                return this.$store.state.sample.dialog_action
            },
            set(val) {
                this.$store.commit("sample/update_dialog_action",val)
            }
        },
        xmsgaction:{
            get() {
                return this.$store.state.sample.msg_action
            },
            set(val) {
                this.$store.commit("sample/update_msg_action",val)
            }
        },
        xtests(){
            return this.$store.state.sample.selected_transaction.details
        },
        xlangs(){
            return this.$store.state.sample.langs
        },
        patient(){
            return this.$store.state.sample.selected_transaction
        },
        xdialogimage:{
            get() {
                return this.$store.state.sample.dialog_image
            },
            set(val) {
                this.$store.commit("sample/update_dialog_image",val)
            }
        },
        ximage() {
            return this.$store.state.sample.image
        },
    },
    methods : {
        selectedLang(value){
            return {id:value.language_id,name:value.language_name}
        },
        selectedlangName(value){
            return value.language_name
        },
        selectLang(trx,lang){
            var ar = this.$store.state.sample.transactions
            var arr = this.$store.state.sample.selected_transaction
            let idx = _.findIndex(ar, function(o) { return o.trx_id == arr.trx_id })
            var arrdetails = ar[idx].details
            let idxx = _.findIndex(arrdetails, function(o) { return o.trx_id == trx.trx_id })
            arrdetails[idxx].language_id = lang.id
            arrdetails[idxx].language_name = lang.name
            this.$store.commit("sample/update_transactions",ar)
            this.$store.commit("sample/update_selected_transaction",ar[idx])
        },
        changeResult(){
            this.$store.commit("sample/update_no_save",1)
        },
        saveResult(trx,act){
            var ar = this.$store.state.sample.transactions
            var arr = this.$store.state.sample.selected_transaction
            let idx = _.findIndex(ar, function(o) { return o.trx_id == arr.trx_id })
            this.$store.dispatch("sample/saveresult",{
            startdate:this.$store.state.sample.start_date,
            enddate: this.$store.state.sample.end_date,
            search:this.$store.state.sample.name_lab,
            stationid:this.$store.state.sample.selected_station.id,
            groupid:this.$store.state.sample.select_item_group.id,
            subgroupid:this.$store.state.sample.select_item_subgroup.id,
            lastid:arr.trx_id,
            trx:trx,
            trx_numbering:arr.ordernumber,
            act:act
         })
        },
        val1(trx,act){
            console.log(act)
            this.$store.commit("sample/update_act",act)
            this.$store.commit("sample/update_last_trx",trx)
            var arr = this.$store.state.sample.selected_transaction
            var msg = "Anda yakin akan melakukan verifikasi untuk pemeriksaan "+trx.test_name+" dari pasien "+arr.patient_fullname+" ?"
            this.$store.commit("sample/update_msg_action",msg)
            this.$store.commit("sample/update_dialog_action",true)
        },
        unval1(trx,act){
            console.log(act)
            this.$store.commit("sample/update_act",act)
            this.$store.commit("sample/update_last_trx",trx)
            var arr = this.$store.state.sample.selected_transaction
            var msg = "Anda yakin akan membatalkan verifikasi untuk pemeriksaan "+trx.test_name+" dari pasien "+arr.patient_fullname+" ?"
            this.$store.commit("sample/update_msg_action",msg)
            this.$store.commit("sample/update_dialog_action",true)
        },
        val2(trx,act){
            console.log(act)
            this.$store.commit("sample/update_act",act)
            this.$store.commit("sample/update_last_trx",trx)
            var arr = this.$store.state.sample.selected_transaction
            var msg = "Anda yakin akan melakukan validasi untuk pemeriksaan "+trx.test_name+" dari pasien "+arr.patient_fullname+" ?"
            this.$store.commit("sample/update_msg_action",msg)
            this.$store.commit("sample/update_dialog_action",true)
        },
        unval2(trx,act){
            console.log(act)
            this.$store.commit("sample/update_act",act)
            this.$store.commit("sample/update_last_trx",trx)
            var arr = this.$store.state.sample.selected_transaction
            var msg = "Anda yakin akan membatalkan validasi untuk pemeriksaan "+trx.test_name+" dari pasien "+arr.patient_fullname+" ?"
            this.$store.commit("sample/update_msg_action",msg)
            this.$store.commit("sample/update_dialog_action",true)
        },
        closeDialogAction(){
            var trx = this.$store.state.sample.last_trx
            var act = this.$store.state.sample.act
            this.saveResult(trx,act)
        },
         openImage(value){
            this.$store.commit("sample/update_selected_photo",value)
            this.$store.commit("sample/update_image",value.newname)
            this.$store.commit("sample/update_dialog_image",true)
        },

    }
}
</script>
