<template>
 <v-layout fil-height column>
	 <v-card>
	 <v-layout>
			 <v-flex xs3 pa-1>
					 <v-text-field
							 label="Search"
							 placeholder="No Lab"
							 single-line
							 outline
					 ></v-text-field>
			 </v-flex>
			 <v-flex xs6 pa-1>
					 <v-text-field
							 label=""
							 placeholder="Nama"
							 single-line
							 outline
					 ></v-text-field>
			 </v-flex>

			 <v-flex xs6 pa-1>
			 <v-select :items="items" label="Status" outline ></v-select>
			 </v-flex>

			 <v-flex xs3>
					 <v-btn color="success" class="mr-1 ml-1">Search</v-btn>

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

	 <v-data-table :headers="headers" :items="patients"
 	:loading="isLoading"
 	hide-actions class="elevation-1">
 	<template slot="items" slot-scope="props">
 			<td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.mr }}</td>
 			<td class="pa-2" v-bind:class="{'amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.lab}}</td>
 			<td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.name }}</td>
 			<td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.status }}</td>
 	 </template>

 	</v-data-table>

	 </v-card>
</v-layout>
</template>

<style scoped>
.v-btn {
    min-width: auto;
}

.v-input__slot {
    margin-bottom: 0px !important;
}

.v-messages {
    display: none;
}

.v-text-field--box>.v-input__control>.v-input__slot,.v-text-field--full-width>.v-input__control>.v-input__slot,.v-text-field--outline>.v-input__control>.v-input__slot {
    min-height: 44px;
}

.v-text-field--box.v-text-field--single-line input,.v-text-field--full-width.v-text-field--single-line input,.v-text-field--outline.v-text-field--single-line input {
    margin-top: 6px;
}

.v-input__control{
	   height: 10px;
}
.v-btn {
 margin : 10px

}

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: "NO REG",
                    align: "left",
                    sortable: false,
                    value: "mr",
                    width: "15%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "NO LAB",
                    align: "left",
                    sortable: false,
                    value: "lab",
                    width: "15%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "NAMA",
                    align: "left",
                    sortable: false,
                    value: "name",
                    width: "25%",
                    class: "pa-2 blue lighten-3 white--text"
                },

                {
                    text: "STATUS",
                    align: "left",
                    sortable: false,
                    value: "status",
                    width: "15%",
                    class: "pa-2 blue lighten-3 white--text"
                }
            ],


            isLoading: true,
            patients: [
                {"status":"Data Verified","lab":"08000198909", "mr": "MR-18107237", "name": "Pasien Umum", "sex": "Perempuan", "address": "Klero\r\nKabupaten Semarang", "action":"", "dob":"19-09-1992", "selected":false},
                {"status":"Payment Verified","lab":"08000198111", "mr": "MR-18107238", "name": "Heri Suryawan", "sex": "Laki - laki", "address": "Ampel", "action":"", "dob":"19-09-1992", "selected":false},
                {"status":"Payment Verified","lab":"08000198222", "mr": "MR-18107239", "name": "LUKA MODRIC", "sex": "Laki - laki", "address": "Jl. Raya No 1", "action":"", "dob":"19-09-1992", "selected":true},
                {"status":"Data Verified","lab":"08000198121", "mr": "MR-18107247", "name": "Tyas Medika Pranandita", "sex": "Laki - laki", "address": "KP. Karangpanas", "action":"", "dob":"19-09-1992", "selected":false},
                {"status":"Data & Payment Verified","lab":"08000198131", "mr": "MR-18107248", "name": "Astrid", "sex": "Perempuan", "address": "Jl. Ketintang Raya No.81", "action":"", "dob":"19-09-1992", "selected":false},
                {"status":"Data & Payment Verified","lab":"08000198123", "mr": "MR-18107249", "name": "Happy", "sex": "Perempuan", "address": "Karangpanas", "action":"", "dob":"19-09-1992", "selected":false},
                {"status":"Data Verified","lab":"08000198111", "mr": "MR-18107251", "name": "Juan Alexis Sukir", "sex": "Laki - laki", "address": "Jl. Sawi", "action":"", "dob":"19-09-1992", "selected":false},
                {"status":"Data & Payment Verified","lab":"08000198555", "mr": "MR-18107252", "name": "Alexander Wang", "sex": "Laki - laki", "address": "Jl. Mangga Muda No. 7", "action":"", "dob":"19-09-1992", "selected":false},
                {"status":"Payment Verified","lab":"08000198444", "mr": "MR-18107253", "name": "CILA CILANI", "sex": "Perempuan", "address": "Jl. Duren PInang No. 67", "action":"", "dob":"19-09-1992", "selected":false},
                {"status":"Data & Payment Verified","lab":"08000198123", "mr": "MR-18107254", "name": "Untung Suropati", "sex": "Laki - laki", "address": "Pasar Kapling Semarang", "action":"", "dob":"19-09-1992", "selected":false}
            ]
        };
    }
}
</script>
