<template>
    <v-sheet :width="width" :height="height" class="overflow-hidden d-flex">

        <dashboard-column 
            v-for="(column_no, index) in dashboardColumns"
            :key="'column-' + index"
            :app="app"
            :customer="customer"
            :column_no="column_no"
            :dashboardItems="dashboardItems"
            :width="100 * width / dashboardColumns.length"
            :height="height"

            @drag-end="OnDragEnd($event)"
        />

    </v-sheet>
</template>

<script>
    import SaveItemsOrder from './Requests/SaveItemsOrder'; 

    export default {
        
        props: {
            app: {required: true},
            customer: {required: true},
            dashboardItems: {default: () => []},
            dashboardColumns: {default: () => []},
            width: {default: null},
            height: {default: null}
        },

        data: () => ({
            reorderRequest: null,
        }),

        methods: {
            OnDragEnd(event) {

                let e = event.e;
                let endColumn = e.to.id.replace('list-group-', '');
                let movedItemId = e.clone.id.replace('dashboard-item-', '');
                let movedItem = _.find(this.dashboardItems, item => item.id == movedItemId)
                
                movedItem.column_no = endColumn;
                movedItem.order_no = 1 + e.newDraggableIndex;

                this.reorderRequest
                    .ResetData()
                    .SetData({
                        user_id: this.app.user.id,
                        platform: this.app.platform,
                        customer_id: this.customer.id,
                        items: this.PrepareItemsToSave(this.dashboardItems),
                    })
                    .Request()
            },

            PrepareItemsToSave(items) {
                let r = {};
                _.each(items, item => {
                    r[item.id] = {
                        column_no: item.column_no,
                        order_no: item.order_no,
                    };
                });
                return r;
            },
        },

        created() {
            this.reorderRequest = new SaveItemsOrder();
        },

        name: 'DashboardColumnsContainer',
    }
</script>