<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="nolab"
                    @keyup.native="keySearch"
                ></v-text-field>
            </v-flex>
            <v-flex xs3 pa-1>
                <v-text-field
                    label=""
                    placeholder="Nama"
                    single-line
                    outline
                    hide-details
                    v-model="search_x"
                    @keyup.native="keySearch"
                ></v-text-field>
            </v-flex>

            <v-flex xs3 pa-1>
                <v-select
                outline
                label="Station"
                :items="stations"
                item-value="id"
                item-text="text"
                return-object
                v-model="selected_station"
                ></v-select>
            </v-flex>

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

            <v-flex xs1>
                <v-btn color="success" class="mr-1 ml-1 one-btn-icon" large block fill-height @click="search">
                    <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;
}
.one-btn-icon {
    font-size: 1.5em
}
/* .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;
}
</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')
        },

        keySearch(e) {
            if (e.which == 13) {
                this.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.patient.statuses
      },

      stations () {
          return this.$store.state.patient.station
      },

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

      selected_station : {
          get () {
              return this.$store.state.patient.selected_station
          },
          set (v) {
              this.$store.commit('patient/update_selected_station', v)
              this.$store.commit('queue/update_station_id', v.id)
          }
      },

      nolab : {
          get () {
              return this.$store.state.patient.nolab
          },
          set (v) {
              this.$store.commit('patient/update_nolab', v)
          }
      }
    },

    mounted () {
        this.$store.dispatch('patient/get_stations')
        // let st = this.$store.state.patient.statuses[0]
        // this.$store.commit('patient/update_selected_status', st)
    }
}
</script>