<template>
    <v-card class="pa-2" flat>
        <v-layout row wrap>
            <v-flex xs3 pa-1>
                <v-text-field
                    label="Search"
                    placeholder="No Lab"
                    single-line
                    outline
                    hide-details
                    v-model="no_lab"
                    @keyup.native="keyup"
                ></v-text-field>
            </v-flex>
            <v-flex xs4 pa-1>
                <v-text-field
                    label=""
                    placeholder="Nama"
                    single-line
                    outline
                    hide-details
                    v-model="search_x"
                    @keyup.native="keyup"
                ></v-text-field>
            </v-flex>

            <v-flex xs4 pa-1>
                <v-select
                outline
                label="Status"
                :items="statuses"
                item-text="M_StatusName"
                item-value="M_StatusID"
                v-model="selected_status"
                return-object
                ></v-select>
            </v-flex>

            <!-- <v-flex xs1>
                <v-btn color="success" class="mr-1 ml-1" large block fill-height @click="search" :disabled="processed">CARI</v-btn>
                
                
            </v-flex> -->

            <v-flex xs1 pl-1>
                <v-btn color="success" class="mr-1 ml-1 one-btn-icon" large block fill-height @click="search" :disabled="processed">
                    <span class="icon-search"></span>
                </v-btn>
                
                
            </v-flex>
        </v-layout>
        
    </v-card>
</template>
<style scoped>
.v-btn {
    min-width: auto;
}

.v-btn--large {
    height: 52px;
}

/* .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-select.v-text-field--enclosed:not(.v-text-field--single-line) .v-select__selections {
    padding-top: 20px;
}

.one-btn-icon { font-size: 1.5em; float: right }
</style>
<script>
module.exports = {
    components : {
        // 'patient-search-dialog': httpVueLoader('./patientSearchDialog.vue'),
        // 'patient-new-dialog': httpVueLoader('./patientNewDialog.vue')
    },

    data() {
        return {
        }
    },

    methods : {
        search : function() {
            this.$store.dispatch('patient/search')
        },

        keyup(e) {
            if (e.which==13) {
                // this.$store.commit('patient/update_search_dialog_is_active',true)
                this.$store.dispatch('patient/search')
            }
        }
    },

    computed : {
      search_x: {
         get() {
            return this.$store.state.patient.search
         },
         set(val) {
            this.$store.commit('patient/update_search',val)
         }
      },

      statuses () {
          return this.$store.state.status.status
      },

      selected_status : {
          get () {
              return this.$store.state.status.selected_status
          },
          set (v) {
              this.$store.commit('status/update_selected_status', v)
              return
          }
      },

      processed : {
          get () {
              return this.$store.state.order.processed
          },
          set (v) {
              this.$store.commit('order/update_processed', v)
              return
          }
      },

      no_lab: {
         get() {
            return this.$store.state.patient.search_no_lab
         },
         set(val) {
            this.$store.commit('patient/update_search_no_lab',val)
         }
      }
    },

    mounted () {
        this.$store.dispatch('status/search')
    }
}
</script>