<template>
    <v-layout row wrap mb-1>
        <v-flex xs12>
            <v-card>
                <v-card-text class="pa-2">
                    <v-layout row wrap>
                        <v-flex xs4>
                            <v-text-field
                                label="Pencarian"
                                v-model="query"
                                hide-details
                                solo
                                @keyup.native="searchx"
                            ></v-text-field>
                        </v-flex>
                        <v-flex xs8 class="text-xs-right">
                            <v-btn class="btn-search one-btn-icon ma-0" color="success" @click="searchs" >
                                <span class="icon-search"><span>
                            </v-btn>
                        </v-flex>
                    </v-layout>
                </v-card-text>
            </v-card>
        </v-flex>
    </v-layout>
</template>

<style scoped>
button {
    height: 48px;
}

.one-btn-icon {
    font-size: 1.5em
}
</style>

<script>
module.exports = {
    components : {
        
    },

    computed : {
        query : {
            get () { return this.$store.state.detail.query },
            set (v) { this.$store.commit('detail/update_query', v) }
        }
    },

    methods : {
        searchs() {
            this.$store.dispatch('detail/search')
        },

        searchx(e) {
            if (e.which == 13) {
                this.searchs()
            }
        }
    }
}
</script>