<template>
    <v-sheet tile>
        <template v-if="action != 'delete'">
            <v-row dense>
                <v-col cols="5">
                    <service-type-selector 
                        :types="types"
                        :errors="errorsManager.ByField('type')"
                        @focus="errorsManager.ResetField('type')"
                        @blur="errorsManager.Validate('type')"
                        v-model="activeRecord.type"

                    />
                </v-col>
            
                <v-col cols="7">
                    <cs-text-box 
                        ref="First"
                        :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">
                    <v-checkbox
                        dense
                        :label="__('Are tipuri de abonamente')"
                        :true-value="1"
                        :false-value="0"
                        v-model="activeRecord.is_abonament"
                    >
                    </v-checkbox>
                </v-col>

                <template v-if="! activeRecord.is_abonament">
                    <v-col cols="4">
                        <cs-text-box 
                            :control="controls.tarif"
                            :errors="errorsManager.ByField('tarif')"
                            v-model="activeRecord.tarif"
                            @focus="errorsManager.ResetField('tarif')"
                            @blur="errorsManager.Validate('tarif')"
                        />
                    </v-col>

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

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

                <template v-else>
                    <service-abonamente-control 

                        v-model="activeRecord.abonamente"
                        @new-abonament="OnNewAbonament"
                    />
                </template>
            </v-row>

        </template>

        <cs-info-alert 
            v-else
            color="red"
            icon="mdi-alert"
            :message="__('Sunteți sigur că doriți ștergerea înregistrării :name?', {
                name: activeRecord.name
            })"
        />
    </v-sheet>
</template>

<script>
    export default {

        props: {
            controls: {default: () => ({})},
            activeRecord: {required: true},
            errorsManager: {required: true},
            action: {required: true},
            currentAction: {required: true},
            types: {default: () => ({})},
        },

        methods: {
            OnNewAbonament(e) {
                this.$emit('new-abonament', e);
            }
        },

        components: {
            CsTextBox: require('@CsVueComp/controls/texts/CsTextBox').default, 
            CsInfoAlert: require('@CsVueComp/sheets/CsInfoAlert').default,
        },

        name: 'ServiceInput',
    }
</script>