<template>
    <v-card
        tile
        flat
        width="720"
    >
        <v-card-text class="pa-1">
            <v-row dense>
                <v-col cols=12>
                   <city-selector 
                        v-model="activeRecord.city_id"
                   />
                </v-col>

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

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

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

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

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

        <v-card-actions class="pa-1 px-0">

            <v-sheet class="mr-3">
                <cs-btn 
                    outlined
                    position="bottom"
                    icon="mdi-chevron-left"
                    caption="Date client"
                    tooltip="Informații generale despre client (nume, date de identificare etc)"
                    class="mr-3"

                    :click="OnClickBack"
                />
            </v-sheet>

            <cs-btn 
                outlined
                position="bottom"
                icon="mdi-chevron-right"
                color="primary"
                caption="Logo"
                tooltip="Încărcarea logo-ului"
    
                :disabled="false"

                :click="OnClickNext"
            />
        </v-card-actions>
    </v-card>
</template>

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

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

            stepper() {
                return this.app.menus.Insertcustomerstepper;
            },
        },

        methods: {
            OnClickBack() {
                this.stepper.activeStep--;
            },

            OnClickNext() {
                this.stepper.activeStep++;
            }
        },

        components: {
            CsTextBox: require('@CsVueComp/controls/texts/CsTextBox').default,
            CsEditBox: require('@CsVueComp/controls/texts/CsEditBox').default,
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
            CitySelector: require('@MyDpoComp/Entities/City/Controls/Selector/CitySelector').default,
        },

        mixins: [
            require('@CsVueMix/Forminput/Forminput')
        ],

        name: 'CustomerAddressForm',
    }
</script>