<template>
    <v-sheet :width="tableWidth + 100">
        <v-data-table
            dense
            disable-filtering
            disable-pagination
            fixed-header
            hide-default-footer
            hide-default-header
            multi-sort
            :headers="columns"
            :items="fakeData ? fakeitems: []"
            :height="height"
            :mobile-breakpoint="0"
            class="cs-datatable"
        >
            <template #header="{props}">
                <registru-table-header 
                    :headers="props.headers"
                />
            </template>

            <template #body="{ items }">
                <registru-table-body 
                    :app="app"
                    :items="items"
                    :fakeData="fakeData"
                /> 
            </template>

        </v-data-table>
    </v-sheet>
</template>

<script>

    import { faker } from '@faker-js/faker';

    export default {
        props: {
            registru: {required: true},
            app: {required: true},
            height: {default: null},
            fakeData: {default: false},
        },

        data: () => ({
            fakeitems: [],
        }),

        computed: {
            columns() {
                let r = this.registru.columns;

                _.each(r, column => {
                    if(! column.is_group )
                    {
                        column.value = 'value_' + column.id;
                    }
                    else
                    {
                        _.each(column.children, child => {
                            child.value = 'value_' + child.id;
                        })
                    }
                })

                return r;
            },

            values() {
                let r = [];

                _.each(this.columns, column => {

                    if(_.has(column, 'value'))
                    {
                        r.push(column);
                    }

                    _.each(column.children, child => {
                        if(_.has(child, 'value'))
                        {
                            r.push( child);
                        }
                    })

                });

                return r;
            },

            tableWidth() {
                let r = 0;
                _.each(this.columns, column => {
                    r += (1 * column.width + 2);
                    _.each(column.children, child => {
                        r += (1 * child.width + 2);
                    })
                })
                return r;
            }
        },

        methods: {

            GenerateFakeItems() {
                this.fakeitems = [];
                
                let values = this.values;

                for(let i = 1; i <= 100; i++)
                {
                    let item = {};
                    _.each(values, column => {
                        switch( column.type)
                        {
                            case 'C':
                            case 'status':
                            case 'departament':
                                item[column.value] =  {
                                    text: faker.lorem.lines(1),
                                    column,
                                }
                                break;
                            
                            case 'E':
                                item[column.value] =  {
                                    text: faker.lorem.lines(5),
                                    column,
                                };
                                break;

                            case 'D': 
                                item[column.value] =  {
                                    text: moment(faker.datatype.datetime({ min: 1577836800000, max: 1893456000000 })).format('DD.MM.YYYY'),
                                    column,
                                };
                                break;

                            case 'T': 
                                item[column.value] =  {
                                    text: moment(faker.datatype.datetime({ min: 1577836800000, max: 1893456000000 })).format('DD.MM.YYYY HH:MM:SS'),
                                    column,
                                };
                                break;

                            case 'N': 
                                item[column.value] =  {
                                    text: faker.datatype.number(100000),
                                    column,
                                };
                                break;

                            default: 
                                item[column.value] = {
                                    text: i + '#' + column.type + '#' + column.width,
                                    column,
                                };
                        }
                    });

                    this.fakeitems.push(item);
                }
            }
        },

        created() {
            if(this.fakeData)
            {
                this.GenerateFakeItems();
            }
        },

        name: 'RegistruTable',
    }
</script>