<template>
    <div 
        class="d-flex text-body-2 align-center"
        :class="'justify-' + justify"
    >
        <v-sheet 
            tile 
            color="transparent"
            :width="widths[0]"
            :class="htmlClass[0]"
        >
            {{ __(caption) }}:
        </v-sheet>

        <v-sheet 
            tile 
            color="transparent"
            :width="widths[1]"
            class="font-weight-bold text-truncate"
            :class="htmlClass[1]"
        >
            <v-sheet 
                v-if="withRenderedValue"
                width="100%"
                color="transparent" 
                class="text-truncate"
                v-html="renderedValue"
            >
            </v-sheet>

            <component 
                :is="attribute"
                :item="item"
            >
            </component>
        </v-sheet>
    </div>
</template>

<script>
    export default {
        props: {
            caption: {default: null},

            item: {required: true},

            /** functie  */
            attribute: {required: true},

            widths: {default: () => ['50%', '50%']},

            htmlClass: {default: () => [null, 'text-right']},

            justify: {default: 'justify-space-between'}
        },

        computed: {
            withRenderedValue() {
                return _.isFunction(this.attribute);
            },


            renderedValue() {
                if(_.isFunction(this.attribute))
                {
                    return this.attribute(this.item);
                }
            } 
        },

        name: 'CsRecordAttribute',
    }
</script>