<template>
    
    <v-sheet
        width="100%"
        class="d-flex align-start justify-space-between"
    >

        <v-autocomplete
            :items="roles"
            dense
            outlined
            :label="__('Rol')"

            :error-messages="errors"
        
            @focus="$emit('focus')"
            @blur="$emit('blur')"
            
            v-model="account.user.role_id"
        >

        </v-autocomplete>
    </v-sheet>
</template>

<script>
    export default {
        model: { 
            prop: "account", 
            event: "input" 
        }, 

        props: {
            account: {required: true},
            errors: {default: null},
        },

        computed: {
            roles() {
                let r = _.filter(this.$config.roles, role => role.type == 'b2b')
                r = _.map(r, item => ({
                    text: item.name,
                    value: item.id,
                }));
                return _.orderBy(r, [item => item.id], ['asc']);
            }
        },

        // watch: {
        //     'account.newsletter': function(newValue) {
        //         if(newValue == 0)
        //         {
        //             this.account.locale = null;
        //         }
        //     }
        // },

        name: 'AccountRole',
    }
</script>