<template>
    <v-menu>
        <template v-slot:activator="{ on, attrs }">
            <v-btn
                color="transparent"
                icon
                x-small
                v-bind="attrs"
                v-on="on"
            >
                <v-icon color="white">mdi-dots-horizontal</v-icon>
            </v-btn>
        </template>

        <v-list class="ma-0 pa-0">
            <v-list-item 
                v-for="(item, index) in items" 
                :key="'item-' + index" 
                @click="OnClick(item, $event)"
            >
                <v-list-item-title class="text-caption">
                    {{ __(item.title(account)) }}
                </v-list-item-title>
            </v-list-item>
        </v-list>
    </v-menu>
</template>

<script>
    export default {
        props: {
            user: {required: true},
            role: {required: true},
            customer: {required: true},
            account: {required: true},
        },

        data: () => ({
            items: [
                { 
                    title: account =>!! account.activated_at ? 'Deactivează' : 'Activează',

                    click: (vue, e) => vue.$emit('click:update-status', e)
                },
            ],
        }),

        methods: {
            OnClick(item, e) {
                item.click(this, {
                    clientX: e.clientX - 128,
                    clientY: e.clientY,
                })
            }
        },
        
        name: 'CsCustomerAccountStatusMenu',
    }
</script>