<template>
    <v-card title="Product Search">
        <v-card-text>
            <v-text-field label="Search" v-model="product_search" append-icon="mdi-magnify" @click:append="searchProducts" @keyup.enter.prevent="searchProducts"></v-text-field>
            <v-progress-linear indeterminate :active="products_loading">
            </v-progress-linear>
            <v-list>
                <RecycleScroller class="scroller"
                                 :items="products"
                                 :item-size="50"
                                 v-slot="{ item }" 
                                 key-field="code"
                                 >
                                 <v-list-item>
                                     <v-btn icon="mdi-arrow-right" title="select" @click="setProduct(item)" size="small" color="success"></v-btn>
                                     {{ item.code }} - {{ item.name }}
                                 </v-list-item>
                </RecycleScroller>
            </v-list>
        </v-card-text>
    </v-card>
</template>
<script>
import axios from 'axios'
export default {
    props:{
    },
    data() {
        return {
            product_search: "",
            products: [],
            products_loading: null
        }
    },
    emits: ['returnProduct'],
    methods: {
        searchProducts() {
            this.products_loading = true
            console.log("Searching for " & this.product_search)
            let url = this.$api_url + "/products/search/" + this.product_search
            axios.get(url)
                .then(resp => {
                    console.log(resp)
                    this.products = resp.data
                })
                .catch(err => {
                    console.log(err)
                })
                .finally(() => {
                    this.products_loading = false
                })
        },
        setProduct(p){
            this.$emit('returnProduct',p)
        }
    }
}
</script>
<style scoped>
.scroller {
    height:500px;
}
</style>

