<template>
    <v-sheet outlined color="blue">
        <v-hover v-slot="{ hover }">
            <v-sheet class="pa-2">
                <v-card tile flat class="blue--text">
                    <v-card-title class="pa-0 text-body-2 font-weight-bold">
                        <span>#{{index}}.</span>
                        <span>
                            {{ __(item.caption) }}
                        </span>

                        <v-spacer></v-spacer>

                        <template v-if="hover">
                            <cs-btn 
                                icon="mdi-pencil"
                                :small="false"
                                tooltip="Editează"
                                color="teal darken-3"
                                :xsmall="true"
                                @click="controller.ShowColumnForm($event, 'update', item)"
                            />

                            <cs-btn 
                                icon="mdi-delete"
                                :small="false"
                                tooltip="Șterge coloana"
                                color="red"
                                :xsmall="true"
                                @click="controller.ShowColumnForm($event, 'delete', item)"
                            />
                        </template>

                    </v-card-title>
                    
                </v-card>

                <v-sheet class="d-flex justify-space-between text-caption">
                    <div>
                        <span>{{ __('Lățime')}}: </span>
                        <span class="ml-1 font-weight-bold">{{item.width ? item.width : '-'}}</span>
                    </div>

                    <div>
                        <span>{{ __('Tip')}}: </span>
                        <span class="ml-1 font-weight-bold">{{columnType}}</span>
                    </div>
                </v-sheet>

                <v-sheet v-if="item.type == 'O'">
                    <v-chip
                        v-for="(option, index) in options"
                        :key="'option-' + index"
                        small
                        outlined
                        class="mr-1"
                    >
                        {{option.text}}
                    </v-chip>
                </v-sheet>
            </v-sheet>
        </v-hover>
    </v-sheet>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            item: {required: true},
            index: {default: null},
        },

        computed: {
            options() {
                if( _.has(this.item.props, 'options') )
                {
                    return this.item.props.options;
                }
                return [];
            },

            columnType() {
                if(this.item.type == 'E')
                {
                    return this.__('Text lung');
                }

                if(this.item.type == 'C')
                {
                    return this.__('Text scurt');
                }

                if(this.item.type == 'N')
                {
                    return this.__('Număr');
                }

                if(this.item.type == 'D')
                {
                    return this.__('Dată calendaristică');
                }

                if(this.item.type == 'T')
                {
                    return this.__('Dată calendaristică și oră');
                }

                if(this.item.type == 'O')
                {
                    return this.__('Listă de opțiuni');
                }

                if(this.item.type == 'STATUS')
                {
                    return this.__('Vizibilitate');
                }

                if(this.item.type == 'DEPARTAMENT')
                {
                    return this.__('Departament');
                }

                if(this.item.type == 'STARE')
                {
                    return this.__('Status');
                }

                return '?';
            }
        },

        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },
        
        name: 'ColumnItem',
    }
</script>