<template>
    <v-card tile flat :height="height">

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

            </v-row>

            <v-row dense>
                <v-col cols="4">
                    <v-radio-group 
                        v-model="activeRecord.tip_curs"
                        hide-details
                        dense
                        class="ml-3 mt-0"
                    >
                        <template v-slot:label>
                            <div
                                v-html="__('Selectați tipul cursului')"
                            >
                            </div>
                        </template>

                        <v-radio
                            v-for="(type, index) in types"
                            :key="'type-' + index"
                            :value="type.value"
                            :label="type.text"
                        >
                        </v-radio>
                    </v-radio-group>
                </v-col>

                <v-col cols="8" v-if="activeRecord.tip_curs=='onsite'" class="pt-2">
                    <v-row dense>
                        <v-col cols="12">
                            <cs-text-box 
                                :control="controls.location"
                                :errors="errorsManager.ByField('location')"
                                v-model="activeRecord.location"
                                @focus="errorsManager.ResetField('location')"
                                @blur="errorsManager.Validate('location')"
                            />
                        </v-col>

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

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

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

                    </v-row>
                </v-col>
            </v-row>
        </v-card-text>

        <v-card-actions>
            <cs-btn
                color="primary"
                small
                :caption=" __('Continuă')"
                :disabled="! isValid"
                @click="$emit('next-step')"
            />
        </v-card-actions>
    </v-card>

</template>

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

        data: () => ({
            activeRecord: {
                date_from: null,
                date_to: null,
                tip_curs: null,
                location: null,
                data_curs: null,
                ora_curs: null,
                durata_curs: null,
            }
        }),

        computed: {
            form() {
                return this.app.forms.Share;
            },

            errorsManager() {
                return this.form.formprovider.errorsManager;
            },

            controls() {
                return this.form.controls;
            },

            isValid() {
                let r = true;
                if(! this.activeRecord.date_from || ! this.activeRecord.date_to)
                {
                    r = false;
                }
                return r;
            },

            types() {
                return [
                    {
                        text: 'online',
                        value: 'online',
                    },
                    {
                        text: 'onsite',
                        value: 'onsite',
                    }
                ];
            },
        },

        watch: {
            'activeRecord': {
                deep: true,
                handler() {

                    console.log({...this.activeRecord});
                    this.$emit('input', this.activeRecord);
                }
            },
        },

        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
            CsDateIntervalBox: require('@CsVueComp/controls/dates/CsDateIntervalBox').default,
            CsTextBox: require('@CsVueComp/controls/texts/CsTextBox').default, 
            CsDateBox: require('@CsVueComp/controls/dates/CsDateBox').default, 
        },
        
        name: 'CursAsigneazaInfo',
    }
</script>