<template>
    <v-sheet class="transparent">

        <v-alert v-if="items.length == 0" type="warning" outlined>
            {{ __('Registrul nu are definite coloanele') }}
        </v-alert>

        <draggable
            v-model="myitems"
        >
            <column-container 
                v-for="(item, index) in myitems"
                :key="'item-' + index"
                :app="app"
                :item="item"
                :index="1 + index"
            />
        </draggable>
    </v-sheet>
</template>

<script>

    import draggable from 'vuedraggable';

    export default {
        props: {
            app: {required: true},
            items: {default: () => []},
        },

        computed: {
            myitems: {
                get: function() {
                    return _.orderBy(this.items, [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.controller.selected_registru.columns = [...columns];
        
                    this.controller.ReorderColumn(input);
                }
            }
        },

        components: {
            draggable
        },
        
        name: 'ColumnsList',
    }
</script>