<template>
    <v-sheet :height="height" :width="width" class="px-1 overflow-y-auto overflow-x-hidden">
        <dashboard-record 
            v-for="(record, index) in myItems"
            :key="'record-' + index"
            :item="record"
            :app="app"
            :customer="customer"
            class="list-group-item mb-2"

            @click-customer-dashboard-item="OnClickCustomerDashoardItem"
        />
    </v-sheet>
</template>

<script>
    const Redirect = require('@CsFunc/global/Redirect');

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

        computed: {
            myItems() {
                let r = _.filter(this.dashboardItems, item => item.column_no == this.column_no);

                r = _.orderBy(r, [item => item.order_no], ['asc'])

                return r;
            }
        },  

        methods: {
            OnClickCustomerDashoardItem(item) {

                if(item.slug != 'cursuri')
                {
                    return Redirect(this.app.url + item.props.app + '/' + this.customer.id);
                }

                if(this.app.platform == 'admin')
                {
                    return Redirect(this.app.url + 'customer-cursuri/' + this.customer.id);
                }

                return Redirect(this.app.url + item.props.app + '/' + this.customer.id);
            }
        },

        name: 'DashboardColumn',
    }
</script>