<template>
    <v-card :width="width" :height="height" tile flat>
        <cs-centered-alert
            v-if="! ready"
            :height="height"
            :width="width"
            message="Se încarcă..."
        >
            <v-progress-circular
                indeterminate
                color="orange darken-1"
            >
            </v-progress-circular>
        </cs-centered-alert>

        <v-card-text v-else>
            <v-stepper v-model="step">
                <v-stepper-header>
                    <v-stepper-step
                        v-for="(item, index) in steps"
                        :key="'step-' + index"
                        :step="1 + index"
                    >
                        {{ __(item.caption) }}
                    </v-stepper-step>
                </v-stepper-header>

                <v-stepper-items>
                    <v-stepper-content step="1">
                        <curs-asigneaza-info 
                            :app="app"
                            :height="height - 144"
                            @input="OnInputInfo"
                            @next-step="step++"
                        />
                    </v-stepper-content>

                    <v-stepper-content step="2">
                        <curs-asigneaza-cursuri 
                            :height="height - 144"
                            :app="app"
                            :cursuriatasate="cursuriatasate"
                            @select-cursuri="OnInputCursuri"
                            @prev-step="step--"
                            @next-step="step++"
                        
                        />
                    </v-stepper-content>

                    <v-stepper-content step="3">
                        <curs-asigneaza-conturi 
                            :height="height - 144"
                            :app="app"
                            :accounts="accounts"
                            @select-accounts="OnSelectAccounts"
                            @prev-step="step--"
                            @next-step="step++"
                        />
                    </v-stepper-content>
                </v-stepper-items>
                    
            </v-stepper>
        </v-card-text>
    </v-card>
</template>

<script>
    // import AccountsDataProvider from 'APPS/Dataproviders/Customer/Accounts/Accounts';
    // import CursuriatasateDataProvider from 'APPS/Dataproviders/Customer/Cursuriatasate/Cursuriatasate';

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

        data: () => ({

            ready: false,

            step: 1,

            steps: [
                {
                    caption: 'Asignare'
                },

                {
                    caption: 'Cursuri'
                },

                {
                    caption: 'Clienți și utilizatori'
                },
            ],

            cursuriatasate: [],

            activeRecord: {
                date_from: null,
                date_to: null,
                tip_curs: null,
                location: null,
                data_curs: null,
                ora_curs: null,
                durata_curs: null,
                materiale_trimise: [],
                customers: {},
            },
        }),

        computed: {
            controller() {
                return this.app.classes.Cursuri;
            },

            accounts() {
                return this.app.dataSession.Accounts.items;
            },
        },

        watch: {
            activeRecord: {
                deep: true,
                handler: function() {
                    this.$emit('input', this.activeRecord);
                }
            }
        },

        methods: {
            OnInputInfo(e) {
                this.activeRecord = {...this.activeRecord, ...e};
            },

            OnInputCursuri(e) {
                this.activeRecord.materiale_trimise = e;
            },

            OnSelectAccounts(e) {
                this.$set(this.activeRecord.customers, this.controller.customer_id, [...e]);
            }
        },

        created() {

            if(this.target == 'cursurile-mele')
            {
                this.steps[2].caption = 'Utilizatori';
            };

            let i = setInterval( () => {
                if(! this.app.dataSession.Cursuriatasate.processing && ! this.app.dataSession.Accounts.processing)
                {
                    clearInterval(i);
                  
                    this.cursuriatasate = [...this.app.dataSession.Cursuriatasate.items];
                    this.$set(this.activeRecord.customers, this.controller.customer_id, []);
                    this.ready = true;
                }
            }, 350);
        },

        components: {
            CsCenteredAlert: require('@CsVueComp/sheets/CsCenteredAlert').default,
        },

        name: 'CursAsigneaza',
    }
</script>