<template>
    <div>
        <autocomplete-selector 
            :value="value"
            :errors="errors"
            label="Utilizator"
            :dataprovider="dataprovider"
            :hasInsert="true"

            @focus="$emit('focus')"
            @blur="$emit('blur')"
            @click:append-outer="OnClickAppendOuter"
            
            @input="$emit('input', $event)"
        />

        <user-form-menu 
            :app="app"
            :form="app.forms.Users"
            @insert="OnInsertUser"
        />
    </div>
</template>

<script>

    import DataProvider from 'APPS/Dataproviders/Users/Users';
    
    export default {
        props: {
            value: {required: true},
            errors: {default: null},
            app: {default: null},
            usersForm: {default: null},
            userType: {default: null},
        },

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

        methods: {
            OnClickAppendOuter(e) {
                this.ShowActionForm(e, 'insert', null);
            },

            OnInsertUser(record) {
                this.dataprovider.Get();
                this.$emit('input', record.id);
            },

            ShowActionForm(e, action, record) {
                if(! this.usersForm )
                {
                    return false;
                }
                this.usersForm.menu.visible = false;
                this.usersForm.Show(null, action, record);
                this.usersForm.formprovider.activeRecord.type = this.userType;

                this.$nextTick( () => {
                    this.usersForm.menu.visible = true;
                    this.usersForm.menu.x = e.clientX;
                    this.usersForm.menu.y = e.clientY;

                });                
            }
        },

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

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

        name: 'UserAutocompleteSelector',
    }
</script>