<template>
    <v-card tile flat class="transparent" 
        :height="app.height" 
        :width="app.width"
        :loading="loading"
        :disabled="false"
    >
        <v-card-title class="px-0 pt-2 pb-0 text-dark-blue">
            {{ __('Definire registre') }}
        </v-card-title>

        <v-breadcrumbs 
            v-if="controller.hasBreadcrumbs"
            :items="controller.breadcrumbs" 
            class="px-0 pt-0 pb-2"
        >
            <template v-slot:divider>
                <v-icon>mdi-dots-vertical</v-icon>
            </template>
        </v-breadcrumbs>

        <template v-if="! controller.previewed_registru">
            <v-card tile flat class="d-flex transparent" 
                :height="app.height - 70" 
                :width="app.width"
                :disabled="controller.columnformmenu.visible || controller.registruformmenu.visible"
            >
                <v-sheet :width="left_width" class="transparent">
                    <v-sheet class="mr-1 px-1 text-caption" outlined :height="app.height - 70">
                        <v-sheet class="d-flex justify-space-between align-center">

                            <v-sheet width="calc(100% - 32px)" class="pa-2 text-truncate font-weight-bold text-caption text-dark-cyan">
                                <v-radio-group
                                    dense
                                    hide-details
                                    outlined
                                    class="mt-0"
                                    v-model="registrutype"
                                    row
                                    v-if="! controller.collapsed"
                                >
                                    <v-radio
                                        v-for="(option, index) in types"
                                        :key="'option-' + index"
                                        :value="option.value"
                                        :label="option.text"
                                    >
                                    </v-radio>
                                    
                                </v-radio-group>
                            </v-sheet>

                            <cs-btn
                                :icon="controller.collapsed ? 'mdi-chevron-right' : 'mdi-chevron-left'"
                                :xsmall="true"
                                :small="false"
                                :tooltip="controller.collapsed ? 'Extinde' : 'Restrange'"
                                outlined
                                :disabled="false"
                                @click="OnClickCollapse"
                            >
                            </cs-btn>

                        </v-sheet>

                        <v-card tile flat :disabled="controller.collapsed" width="100%" :height="app.height - 112 - 16" class="mt-2 overflow-y-auto overflow-x-hidden">
                            <registre-list 
                                :app="app"
                                :items="myregistre"
                            />
                        </v-card>
                    </v-sheet>
                </v-sheet>

                <v-card tile flat outlined class="px-1 text-caption" 
                    :width="'calc(100% - ' + left_width + 'px)'" 
                    :height="app.height - 70" 
                >
                    <v-card-title class="px-0 py-1">
                        <cs-btn
                            icon="mdi-plus"
                            tooltip="Adaugă coloană"
                            @click="controller.ShowColumnForm($event, 'insert')"
                        />
                    
                        <cs-btn
                            icon="mdi-view-column"
                            tooltip="Previzualizează"
                            :disabled="controller.selected_registru && (controller.selected_registru.columns.length == 0)"
                            @click="controller.ShowPreview()"
                        />

                        <v-spacer></v-spacer>

                        <v-chip label outlined small v-if="!! selected_registru" class="ml-1" color="purple darken-3">
                            Registru: <span class="pl-1 font-weight-bold">{{selected_registru.name}}</span>
                        </v-chip>
                    </v-card-title>

                    <v-sheet v-if="!! selected_registru" class="overflow-y-auto" :height="app.height - 108">
                        <columns-list 
                            :app="app"
                            :items="selected_registru.columns"
                        />
                    </v-sheet>

                </v-card>
                
            </v-card>

            <registru-column-form-menu 
                v-if="controller.columnformmenu.visible"
                :app="app"
                :menu="controller.columnformmenu"
            />

            <registru-options-form-menu 
                v-if="controller.registruformmenu.visible"
                :app="app"
                :menu="controller.registruformmenu"
            />
        </template>

        <template v-else>
            <v-card tile flat>
                <v-card-title class="px-0 py-2">

                    {{__('Previzualizare registru :name', {name: controller.previewed_registru.name})}}
                    <v-spacer></v-spacer>
                    
                    <cs-btn 
                        icon="mdi-close"
                        tooltip="Închide previzualizarea"
                        @click="controller.previewed_registru = null"
                    />
                </v-card-title>

                <v-sheet class="transparent overflow-x-auto" :width="app.width" :height="app.height - 118">
                    <registru-table 
                        :app="app"
                        :registru="controller.previewed_registru"
                        :height="app.height - 140"
                        :fakeData="true"
                    />
                </v-sheet>
            </v-card>
        </template>
    </v-card>
</template>

<script>
    export default {
        props: {
            app: {require: true},
            types: {default: () => ([
                {
                    value: 'registre',
                    text: 'Registre',
                },

                {
                    value: 'audit',
                    text: 'Audit',
                },
            ])},
        },

        data: () => ({
            registrutype: 'registre',
        }),

        computed: {
            myregistre() {
                let r = this.registre;

                r = _.filter(r, item => item.type == this.registrutype);

                return r;
            },

            left_width() {
                return this.controller.collapsed ? 60 : 380;
            },

            loading() {
                let r = false;
                _.each(['Registre', 'Registrerefresh'], item => {
                    if(this.app.dataSession[item].processing)
                    {
                        r = true;
                    }
                })
                
                if(this.app.requests.Updateregistru.processing)
                {
                    return true;
                }

                return r;
            }
        },

        watch: {
            registrutype: function() {
                this.controller.selected_registru = this.myregistre[0];
            }
        },

        methods: {
            OnClickCollapse() {
                this.controller.collapsed = ! this.controller.collapsed;
            },
        },

        mounted() {
            this.app.dataSession.Registre.Post();
            let i = setInterval( () => {
                if(! this.app.dataSession.Registre.processing)
                {
                    clearInterval(i);
                    this.controller.selected_registru = this.myregistre[0];
                }
            }, 350);
        },

        created() {
            this.app.AddClassesByContext(require.context('./../../Classes', true, /\.class.js$/i));
            this.app.AddMenusByContext(require.context('./../../Breadcrumbs', true, /\.breadcrumbs.js$/i));
            this.app.AddDataProvidersByContext(require.context('./../../DataSessions', true, /\.dataprovider.js$/i));
            this.app.AddRequestsByContext(require.context('./../../Requests', true, /\.request.js$/i));
        },

        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },

        name: 'Index',
    }
</script>