<template>
    <v-card
        tile
        flat
        :height="height"
        :loading="loading"
        :disabled="loading"
        :class="{
            'overflow-y-auto': !! height
        }"
    >
        <v-card-text class="px-0">
            <user-customers-accounts-list-item 
                v-for="(account, index) in accounts"
                :key="'account-' + index"
                :account="account"
                :activation="GetActivationByCustomer(account.customer_id)"
                class="mb-1 mr-1 float-left"
            />
        </v-card-text>
    </v-card>
</template>

<script>
    export default {
        props: {
            height: {default: null},
            app: {required: true},
            user: {required: true},
        },

        computed: {
            loading() {
                return this.app.dataSession.Accounts.processing || this.app.dataSession.Activations.processing;
            },

            dataprovider() {
                return this.app.dataSession.Accounts;
            },

            activationsdataprovider() {
               return this.app.dataSession.Activations; 
            },

            accounts() {
                return this.dataprovider.orderedByCustomer;
            },

            activations() {
                return this.activationsdataprovider.items;
            },
        },

        methods: {
            GetActivationByCustomer(customer_id) {
                let r = _.find(this.activations, item => item.customer_id == customer_id);
                return r == undefined ? null : r;
            }
        },

        created() {
            this.app.dataSession.Accounts.GetByUserId(this.user.id);
            this.app.dataSession.Activations.GetByUserId(this.user.id);
        },

        components: {
            UserCustomersAccountsListItem: require('./../../../Listsitems/User/Customersaccounts/UserCustomersAccountsListItem').default,
        },

        name: 'UserCustomersAccountsList',
    }
</script>