<template>    
    <v-menu
        v-model="menu.visible"
        :position-x="menu.x"
        :position-y="menu.y"
        absolute
        offset-y
        :close-on-content-click="true"
    >
        <v-list
            dense
        >
            <v-list-item
                v-for="(option, index) in menu.getOptions"
                :key="'option-' + index"
                :disabled="IsDisabled(option)"
                @click="OnClickOption(option, $event)"
            >
                <v-list-item-title>
                    
                    <v-icon
                        v-if="option.icon"
                        v-html="option.icon"
                        :color="IsDisabled(option) ? 'grey' : null "
                        size="20"
                    >
                    </v-icon>

                    <span>
                        {{ option.caption }}
                    </span>
                </v-list-item-title>
            </v-list-item>
        </v-list>
    </v-menu>
</template>

<script>
    export default {
        props: {
            menu: {required: true},
        },

        methods: {
            OnClickOption(option, e) {
                option.click({
                    clientX: this.menu.x,
                    clientY: this.menu.y,                                
                });
            },

            IsDisabled(option) {
                if(_.isFunction(option.disabled))
                {
                    return option.disabled();
                }
                if(_.isBoolean(option.disabled))
                {
                    return option.disabled;
                }
                return false;
            },
        },

        name: 'RightMenu',
    }
</script>