<template>
    <v-sheet outlined color="teal">
        <v-hover v-slot="{ hover }">
            <v-sheet class="pa-2">
                
                <v-card tile flat class="teal--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-plus"
                                :small="false"
                                tooltip="Adaugă o coloană la grup"
                                color="blue darken-3"
                                :xsmall="true"
                                @click="controller.ShowColumnForm($event, 'insert', item)"
                            />

                            <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 grupul"
                                color="red"
                                :xsmall="true"
                                @click="controller.ShowColumnForm($event, 'delete', item)"
                            />
                        </template>
                    </v-card-title>
                </v-card>
                

                <v-sheet class="pl-4 py-2">

                    <v-alert v-if="item.children.length == 0" type="warning" outlined>
                        {{ __('Nu sunt definite coloane.') }}
                    </v-alert>

                    <draggable
                        v-model="children"
                    >
                        <column-item 
                            v-for="(child, indexChild) in children"
                            :key="'child-' + indexChild"
                            :app="app"
                            :item="child"
                            :index="(index) + '.' + (1 + indexChild)"
                            class="mb-2"
                        />

                    </draggable>
                </v-sheet>
            </v-sheet>
        </v-hover>
    </v-sheet>
</template>

<script>
    import draggable from 'vuedraggable';

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

        computed: {
            children: {
                get: function() {
                    return _.orderBy(this.item.children, [item => item.order_no], ['asc'])
                },

                set: function(columns) {

                    
                    let input = _.map(columns, (column, index) => ({
                        id: column.id,
                        order_no: 1 + index,
                    }))
            
                    columns = _.each(columns, (column, index) => {
                        column.order_no = 1 + index;
                    });
            
                    this.item.children = [...columns];
        
                    this.controller.ReorderColumn(input);
                }
            }
        },
        
        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
            draggable
        },

        name: 'ColumnGroupItem',
    }
</script>