<template>
    <v-card 
        tile 
        flat 
        width="480"
    >
        <v-card-text class="pa-1">

            <v-row dense>
                <v-col cols="12">
                    <cs-text-box 
                        ref="FirstControl"
                        :control="controls.name"
                        :errors="errorsManager.ByField('name')"
                        v-model="activeRecord.name"
                        @focus="errorsManager.ResetField('name')"
                        @blur="errorsManager.Validate('name')"
                    />
                </v-col>

                <v-col cols="12">
                    <category-selector 
                        :app="app"
                        :categories="categories"
                        type="cursuri"
                        :selectorErrors="errorsManager.ByField('category_id')"
                        v-model="activeRecord.category_id"
                        @focus="errorsManager.ResetField('category_id')"
                        @blur="errorsManager.Validate('category_id')"
                    />
                </v-col>

                <v-col cols="12">
                    <cs-date-interval-box 
                        ref="Daterange"
                        :control="controls.completedinterval"
                        :errors="errorsManager.ByField('completedinterval')"
                        :value="controls.completedinterval.GetRange(activeRecord.date_from, activeRecord.date_to)"
                        @input="controls.completedinterval.SetRangeValue($event, activeRecord, 'date_from', 'date_to')"
                    />
                </v-col>

                <v-col cols="12">
                    <cs-edit-box 
                        :control="controls.descriere"
                        :errors="errorsManager.ByField('descriere')"
                        v-model="activeRecord.descriere"
                        @focus="errorsManager.ResetField('descriere')"
                        @blur="errorsManager.Validate('descriere')"
                    />
                </v-col>
            </v-row>

        </v-card-text>

        <v-card-actions class="pa-1 px-0">
            <stepper-btn-next 
                :stepper="stepper"
            />
        </v-card-actions>
    </v-card>
</template>

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

        components: {
            CsTextBox: require('@CsVueComp/controls/texts/CsTextBox').default,
            CsDateIntervalBox: require('@CsVueComp/controls/dates/CsDateIntervalBox').default,
            CsEditBox: require('@CsVueComp/controls/texts/CsEditBox').default,
            CategorySelector: require('@MyDpoComp/Entities/Categories/Controls/Selector/CategorySelector').default,
        },
        
        methods: {
            Focus() {
                setTimeout( () => {
                    this.$refs.FirstControl.Focus()
                }, 100)
            }
        },

        mounted() {
            this.Focus();
        },

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

        name: 'CursForm',
    }
</script>