<template>
    <v-list-item-title 
        class="d-flex align-center"
        :class="{
            clickable: item.optionsCount == 0
        }"
        @click="OnClick"
    >
        <v-sheet>
            <v-icon v-if="item.icon"
                :size="size"
                :color="item.color"
            >
                {{ item.icon }}
            </v-icon>

            <v-img v-else-if="item.image"
                :src="$url + 'imgs/blue-icons/' + item.image + '.png'"
                :width="size"
                :height="size"
                contain
            >
            </v-img>
        </v-sheet>
        
        <span class="pl-2" :class="[item.color + '--text', 'text--darken-4']">
            {{ __(caption) }} 
        </span>
    </v-list-item-title>
</template>

<script>
    export default {
        props: {
            item: {required: true},
            size: {default: 24},
        },  

        computed: {

            caption() {
                return _.isFunction(this.item.caption) ? this.item.caption() : this.item.caption;
            }

        },

        methods: {
            OnClick(e) {
                if(this.item.optionsCount == 0)
                {
                    this.item.Click(e);
                }
            }
        },

        name: 'ItemOption',
    }
</script>