<template>
    <v-card 
        tile 
        flat 
        width="480"
    >
        <v-card-text class="pa-1">
            <v-row dense>
                <v-col cols="12">
                    <curs-tematica-control 
                        ref="FirstControl"
                        v-model="activeRecord.tematica"
                        @new-tematica="OnNewTematica"
                    />
                </v-col>                
            </v-row>

        </v-card-text>

        <v-card-actions class="pa-1 px-0 mt-4">
            <stepper-btn-prev 
                :stepper="stepper"
            />

            <stepper-btn-next 
                :stepper="stepper"
                :disabled="nextIsDisabled"
            />
        </v-card-actions>
    </v-card>
</template>

<script>
    export default {
        props: {
            app: {required: true},
        },

        data: () => ({
            nextIsDisabled: false,
        }),

        watch: {
            'stepper.activeStep': function(step) {
                if(step == 2)
                {
                    this.$refs.FirstControl.Focus();
                }
            }
        },

        methods: {
            OnNewTematica(value) {
                this.nextIsDisabled = !!value;
            }
        },

        components: {
            CsTextBox: require('@CsVueComp/controls/texts/CsTextBox').default,
            CsDateIntervalBox: require('@CsVueComp/controls/dates/CsDateIntervalBox').default,
            CsEditBox: require('@CsVueComp/controls/texts/CsEditBox').default,
        },

        mixins: [
            require('@MyDpoMix/Entities/Curs/Curs.mixin'),
            require('@CsVueMix/Forminput/Forminput')
        ],

        name: 'CursForm',
    }
</script>