<template>
    <v-menu
        v-model="menu.visible"
        :position-x="menu.x"
        :position-y="menu.y"
        absolute
        offset-y
        right
        :close-on-content-click="false"
        :close-on-click="false"
    >
        <v-card tile flat width="540" :disabled="app.forms.Departamente.visible">

            <v-card-title>
                {{   __('Asignare user existent') }}
            </v-card-title>

            <v-divider></v-divider>

            <v-card-text>

                <v-row dense>

                    <v-col cols="12">
                        <v-autocomplete
                            dense
                            hide-details
                            outlined
                            :label="__('Selectați utilizatorul')"
                            :items="users"
                            v-model="activeRecord.user_id"
                        >
                            <template #no-data>
                                <span class="px-1">
                                    {{  __('Nu există înregistrări') }}
                                </span>
                            </template>
                        </v-autocomplete>
                    </v-col>

                    <v-col cols="6">
                        <role-autocomplete-selector 
                            type="b2b"
                            v-model="activeRecord.role_id"
                        />
                    </v-col>

                    <v-col cols="6">
                        <departament-autocomplete-selector 
                            :customer_id="activeRecord.customer_id"
                            :disabled="! activeRecord.customer_id"
                            
                            :departmentForm="app.forms.Departamente"
                            
                            :app="app"


                            v-model="activeRecord.department_id"
                        />
                    </v-col>

                    <v-col cols="12">
                        <v-sheet class="mx-2">
                            <newsletter-control 
                                v-model="activeRecord"
                            />
                        </v-sheet>
                    </v-col>
                </v-row>
            </v-card-text>

            <v-divider></v-divider>

            <v-card-actions>
                <cs-btn 
                    icon="mdi-content-save"
                    caption="Asignează"
                    outlined
                    color="primary"
                    :disabled="! isvalid"
                    :loading="app.requests.Assignuser.processing"
                    @click="OnClickSave"
                />

                <v-spacer></v-spacer>

                <cs-btn 
                    caption="Renunță"
                    icon="mdi-close"
                    outlined
                    :disabled="app.requests.Assignuser.processing"
                    @click="OnClickCancel"
                />
            </v-card-actions>

        </v-card>

    </v-menu>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            menu: {required: true},
        },

        data: () => ({

            activeRecord: {
                customer_id: null,
                role_id: 4,
                department_id: null,
                newsletter: 0,
                user_id: null,
                locale: null,
            }
        }),

        computed: {
            accounts() {
                return this.app.dataSession.Accounts.items;
            },

            users() {
                let r = this.app.dataSession.Users.items;

                r = _.filter(r, item => {

                    let exists = _.find(this.accounts, account => account.user_id == item.id);

                    return ! exists;
                });

                r = _.map(r, item => ({
                    text: item.full_name + ' (' + item.email + ')',
                    value: item.id,
                }))
                return r;
            },

            isvalid() {
                if( ! this.activeRecord.user_id )
                {
                    return false;
                }

                if( ! this.activeRecord.department_id )
                {
                    return false;
                }

                return true;
            }
        },

        methods: {
            OnClickSave() {
                this.app.requests.Assignuser
                    .ResetData()
                    .SetData({
                        ...this.activeRecord,
                    })
                    .Request([
                        response => {

                            this.app.dataSession.Accounts.GetByCustomerId(this.app.payload.customer_id);

                            this.OnClickCancel();
                        }
                    ]);
            },

            OnClickCancel() {
                this.menu.visible = false;
            }
        },

        created() {
            this.activeRecord.customer_id = this.app.payload.customer_id;

            this.app.dataSession.Users.Post();
        },
        
        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },
        

        name: 'AssignUserMenu',
    }
</script>