<template>
    <v-card :title="title">
        <v-card-subtitle>
            Medicated Feed : 
            <template v-if="mf.isNew">New</template>
            <template v-else>{{ mf.id }} - {{ mf.customer.name }}</template>
        </v-card-subtitle>
        <v-card-text>
            <v-container>
                <v-row>
                    <v-col cols="6">
                        <v-autocomplete  label="Customer"
                            :items="customers"
                            v-model="mf.customer"
                            v-model:search="search[1]"
                            item-title="full_title"
                            return-object
                            :loading="searching[1]"
                            append-icon="mdi-magnify"
                            @keyup.enter="searchCustomers()"
                            @click:append="searchCustomers()"
                               no-data-text="No results (press Enter to search)"
                            ></v-autocomplete>
                    </v-col>
                    <v-col cols="6">
                        <v-autocomplete label="Vet" 
                                        :items="vets"
                            v-model="mf.vet.practice"
                            v-model:search="search[2]"
                            :loading="searching[2]"
                            append-icon="mdi-magnify"
                            item-title="practice"
                            item-value="id"
                            @keyup.enter="searchVets()"
                            @click:append="searchVets()"
                               no-data-text="No results (press Enter to search)"
                            ></v-autocomplete>
                    </v-col>
                    <v-col cols="6">
                        <v-autocomplete label="Medication" 
                                        :items="medications"
                            v-model="mf.medication.name"
                            v-model:search="search[3]"
                            :loading="searching[3]"
                            append-icon="mdi-magnify"
                            item-title="name"
                            item-value="id"
                            @keyup.enter="searchMeds()"
                            no-data-text="No results (press Enter to search)"
                            @click:append="searchMeds()"
                            ></v-autocomplete>
                        {{ mf.medication }}

                    </v-col>
                    <v-col cols="6">
                        Name : {{ mf.medication.name }}<br/>
                        Info : <template v-for="(i, idx) in mf.medication.info" :key="idx" >
                            <template v-if="i != ''">
                                {{ i }}<br/>
                            </template>
                        </template>
                        Med Code : {{ mf.medication.med_code }}<br/>
                        Inclusion Rate : {{ mf.medication.inclusion_rate }}
                    </v-col>
                </v-row>
                <v-row>
                    <v-col cols="6">
                        {{ mf.product }}
                        <v-autocomplete label="Product"
                                        :items="products"
                                        item-title="name"
                            v-model="mf.product"
                            return-object
                            v-model:search="search[4]"
                            append-icon="mdi-magnify"
                            :loading="searching[4]"
                            @keyup.enter="searchProducts()"
                            @click:append="searchProducts()"
                               no-data-text="No results (press Enter to search)"
                            ></v-autocomplete>
                    </v-col>
                    <v-col cols="6">
                        {{ mf.product.name }}
                        <v-text-field label="Tonnage" type="number" v-model="mf.tonnage"></v-text-field>
                    </v-col>
                </v-row>
                <v-row>
                    <v-col cols="6">
                        <label>
                            Date Required :
                        <DatePicker v-model="mf.date_required" format="dd/MM/yyyy" />
                        </label>
                    </v-col>
                </v-row>
                <v-row>
                    <v-col cols="6">
                        <v-switch color="blue" label="Repeat prescription" v-model="mf.repeat"></v-switch>
                    </v-col>
                    <v-col cols="6">
                        <v-textarea label="Repeat Message" v-model="mf.repeat_message"></v-textarea>
                    </v-col>
                </v-row>
            </v-container>
        </v-card-text>
        <v-card-actions>
            <v-btn v-if="!mf.isNew" color="red-darken-1"
                   variant="text"
                   @click="saveMedFeed(mf)">Save</v-btn>
            <v-btn v-if="mf.isNew" color="red-darken-1"
                   variant="text"
                   @click="saveMedFeed(mf)">Add</v-btn>
            <v-spacer></v-spacer>
            <v-btn color="blue-darken-1"
                   variant="text"
                   @click="close">Close</v-btn>
        </v-card-actions>
    </v-card>
</template>
<script> 
import DatePicker from '@vuepic/vue-datepicker'
import axios from 'axios';
export default {
    props:{
        set_mf: {}
    },
    components: {
        DatePicker
    },
    watch: {
        set_mf(newval) {
            this.mf = newval
        },
    },
    data() {
        return {
            mf: this.set_mf,
            vets: [],
            medications: [],
            products: [],
            customers: [],
            search: {},
            searching:{}
        }
    },
    computed: {
        title() {
            if ( this.mf.isNew ) {
                return "New Medicated Feed"
            } else {
                return "Edit Medicated Feed"
            }
        }
    },
    methods: {
        close() {
            this.$emit('closetab','list')
        },
        saveMedFeed(medfeed) {
            console.log(medfeed)
        },
        searchCustomers() {
            this.searching[1] = true
            let url = this.$api_url + "/customers/search/" + this.search[1]
            axios.get(url)
                .then(resp => {
                    this.customers = resp.data
                })
                .catch(err => {
                    console.log(err)
                })
                .finally(() => {
                    this.searching[1] = false
                })
        },
        searchProducts() {
            this.searching[4] = true
            let url = this.$api_url + "/products/search/" + this.search[4]
            axios.get(url)
                .then(resp => {
                    this.products = resp.data
                })
                .catch(err => {
                    console.log(err)
                })
                .finally(() => {
                    this.searching[4] = false
                })
        },
    },
}
</script>
