<template>
    <v-card class="xs12 md12 mt-2" >
        <v-card-title primary-title class="pt-1 pb-1 pl-2 pr-2">
          <div>
            <h3 class="headline mb-0">Histori Pasien</h3>
          </div>
        </v-card-title>

        <v-card-text class="pt-1 pb-1 pl-2 pr-2">
            <v-data-table :headers="headers" :items="histories" 
                :loading="isLoading"
                hide-actions class="elevation-1">
                <template slot="items" slot-scope="props">
                    <td class="text-xs-left pa-2" @click="selectMe(props.item)">{{ props.item.date }}</td>
                    <td class="text-xs-left pa-2" @click="selectMe(props.item)">{{ props.item.px }}</td>
                    <td class="pa-2" @click="selectMe(props.item)">{{ props.item.note }}</td>
                </template>
            
            </v-data-table>
        </v-card-text>

        
    </v-card>
</template>

<style scoped>
    table.v-table tbody td,table.v-table tbody th {
        height: 40px;
    }

    table.v-table thead tr {
        height: 40px;
    }
</style>

<script>
module.exports = {
    data() {
        return {
            query: "",
            headers: [
                {
                    text: "TANGGAL",
                    align: "left",
                    sortable: false,
                    value: "date",
                    width: "25%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "PEMERIKSAAN",
                    align: "left",
                    sortable: false,
                    value: "px",
                    width: "25%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "CATATAN",
                    align: "left",
                    sortable: false,
                    value: "note",
                    class: "pa-2 blue lighten-3 white--text"
                }
            ],

            isLoading: true,
            histories: [
                {"date":"27-01-2019", "px":"Hemoglobin", "note":"Hasil Normal"},
                {"date":"27-01-2019", "px":"Trombosit", "note":"Hasil Normal"},
                {"date":"27-01-2019", "px":"Eritrosit", "note":"Hasil Normal"}
            ]
        };
    }
}
</script>