<template>
    <v-sheet
        :width="width"
        :height="height"
        class="overflow-auto"
    >
        <draggable
            v-model="options"
        >
            <customer-profile-card 
                v-for="(card, index) in customerProfileItems"
                :key="'card-' + index"
                :app="app"
                :customer="customer"
                :card="card"
                class="mb-2"
            />
        </draggable>
        
    </v-sheet>
</template>

<script>
    import draggable from 'vuedraggable';

    import SaveItemsOrder from './Requests/SaveProfileItemsOrder'; 

    export default {
        props: {
            app: {required: true},
            customer: {required: true},
          
            width: {default: null},
            height: {default: null}
        },

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

        computed: {

            options: {
                get: function() {
                    return this.app.menus.Profileitems.getOptions;
                },

                set: function(options) {
                    let data = [];

                    _.each(options, (option, index) => {                        
                        data.push({
                            id: option.id,
                            order_no: index + 1
                        });

                        let element = _.find(this.app.menus.Profileitems.options, item => item.id == option.id);
                        element.order_no = 1 + index;
                    });

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

            },


            customerProfileItems() {
                return this.app.menus.Profileitems.getOptions;
            }
        },

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

        components: {
            draggable
        },

        name: 'DashboardCustomerProfile',
    }
</script>