<template>
    <autocomplete-selector 
        :value="value"
        :errors="errors"
        :label="'Contract ' + customer_id"
        :dataprovider="dataprovider"
        :disabled="disabled"
        :noLoadData="true"

        @focus="$emit('focus')"
        @blur="$emit('blur')"
        
        @input="$emit('input', $event)"
    />
</template>

<script>

    import DataProvider from 'APPS/Dataproviders/Customer/Contracte/Contracte';

    export default {
        props: {
            value: {required: true},
            errors: {default: null},
            disabled: {default: false},
            customer_id: {default: null},
        },

        data: () => ({
            dataprovider: null,
        }),

        watch: {
            customer_id: function(customer_id) {
                if(customer_id)
                {
                    this.dataprovider.GetByCustomerId(customer_id);
                }
                else
                {
                    this.$emit('input', null);
                }
            }
        },

        created() {
            this.dataprovider = new DataProvider(null);
            if(this.customer_id)
            {
                this.dataprovider.GetByCustomerId(this.customer_id)
            }
        },

        components: {
            AutocompleteSelector: require('./../AutocompleteSelector').default,
        },

        name: 'ContractAutocompleteSelector',
    }
</script>