<template>
    <v-card tile flat>

        <template v-for="(user, index) in myitems">

            <users-list-item 
                :key="'user-' + index"
                :app="app"
                :user="user"
            />

            <v-divider :key="'divider-' + index"></v-divider>
        </template>
    </v-card>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            items: {default: () => []},
        },

        computed: {
            myitems() {
                let r =  _.orderBy(this.items, [item => item.full_name.toUpperCase()], ['asc']);

                let searched = this.Utilizatori.Users.searchText;
                let type = this.Utilizatori.Users.userType;

                if(searched)
                {
                    r = _.filter(r, item => {
                        return item.full_name.toUpperCase().indexOf(searched.toUpperCase()) > -1; 
                    });
                }

                if(type != 'all')
                {
                    r = _.filter(r, item => item.type == type);
                }
                
                return r;
            }
        },

        watch: {
            myitems: function(newitems, olditems) {

                // this.Utilizatori.Users.active = null;

                if(newitems.length > 0)
                {
                    setTimeout( () => {

                        if( ! this.Utilizatori.Users.active)
                        {
                            this.Utilizatori.Users.active = newitems[0];
                        }

                    }, 1);
                }
            }
        },

        mounted() {
            if(this.myitems.length > 0)
            {
                if( ! this.Utilizatori.Users.active)
                {
                    this.Utilizatori.Users.active = this.myitems[0];
                }
            }
        },

        name: 'UsersList'
    }
</script>