<template>
    <v-chip
        v-if="role"
        :color="role.color"
        small
        @contextmenu="ShowStatusForm"
    >
        <span class="white--text">
            {{ role.name }}
        </span>
    </v-chip>

    <v-chip
        small
        color="red"
        v-else
        @contextmenu="ShowStatusForm"
    >
        <span class="white--text">
            -
        </span>
    </v-chip>
</template>

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

        methods: {
            ShowStatusForm(e) {
                if(this.form)
                {
                    e.preventDefault();

                    this.form.formprovider
                        .Reset()
                        .SetAction('update')
                        .SetActiveRecord({...this.customer});
                    
                    this.form.visible = false
                    this.form.left = e.clientX
                    this.form.top = e.clientY
                    
                    this.$nextTick(() => {
                        this.form.visible = true
                    })
                }
            }
        },
        
        name: 'AccountRole',
    }
</script>