<template>
    <v-card class="fill-height  ">
        <v-layout>
            <v-flex xs3 pa-1>
                <v-text-field
                    label="Search"
                    placeholder="No Lab"
                    single-line
                    @change="nolab"
                    outline
                ></v-text-field>
            </v-flex>
            <v-flex xs6 pa-1>
                <v-text-field
                    label=""
                    placeholder="Nama"
                    v-model="name"
                    single-line
                    outline
                ></v-text-field>
            </v-flex>

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

            <v-flex xs3>
                <v-btn @click="searchPasien()" color="success" class="mr-1 ml-1">Search</v-btn>

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

    </v-card>
</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

}
</style>
<script>
module.exports = {
   methods: {
        searchPasien() {
            this.$store.dispatch('patient/search')
        },
        nolab(val) {
            this.$store.commit("patient/update_nolab",val)   
        }
   },
   computed: {
      
      name: {
            get() {
                return this.$store.state.patient.name
            },
            set(val) {
                this.$store.commit('patient/update_name',val)
            }
      },
      status: {
            get() {
                return this.$store.state.patient.status
            },
            set(val) {
                this.$store.commit('patient/update_status',val)
            }
      }
   },
   components : {
      'patient-search-dialog': httpVueLoader('./patientSearchDialog.vue')
   }
}
</script>
