<template>
    <v-sheet
        tile
    >
        <template v-if="action != 'delete'">

            <v-row dense>

                <template v-if="action != 'password'">
                    <v-col cols="6">
                        <cs-text-box 
                            ref="Name"
                            :control="controls.last_name"
                            :errors="errorsManager.ByField('last_name')"

                            v-model="activeRecord.last_name"
                            
                            @focus="errorsManager.ResetField('last_name')"
                            @blur="errorsManager.Validate('last_name')"
                        />
                    </v-col>

                    <v-col cols="6">
                        <cs-text-box 
                            :control="controls.first_name"
                            :errors="errorsManager.ByField('first_name')"

                            v-model="activeRecord.first_name"
                            
                            @focus="errorsManager.ResetField('first_name')"
                            @blur="errorsManager.Validate('first_name')"
                        />
                    </v-col>

                    <v-col cols="7">
                        <cs-text-box 
                            :control="controls.email"
                            :errors="errorsManager.ByField('email')"

                            v-model="activeRecord.email"
                            
                            @focus="errorsManager.ResetField('email')"
                            @blur="errorsManager.Validate('email')"
                        />
                    </v-col>

                    <v-col cols="5">
                        <cs-text-box 
                            :control="controls.phone"
                            :errors="errorsManager.ByField('phone')"

                            v-model="activeRecord.phone"
                            
                            @focus="errorsManager.ResetField('phone')"
                            @blur="errorsManager.Validate('phone')"
                        />
                    </v-col>
                </template>

                <template v-if="withPassword">
                    
                </template>

                <template v-if="action != 'password'">
                    <v-col cols="12">
                        <cs-file-uploader 
                            ref="Avatar"
                            :control="controls.avatar"
                            :immediateInput="false"
                            v-model="activeRecord.avatar"
                            @issaved="OnIsSaved"
                        />
                    </v-col>
                </template>
            </v-row>
        </template>

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

<script>
    export default {

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

        methods: {
            OnIsSaved(avatarSaved) {
                this.$emit('avatar-saved', avatarSaved);
            }
        },

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

        created() {
            // this.app.dataSession.Departments.Refresh();
            // this.app.dataSession.Users.Refresh();
        },

        name: 'UserInput',
    }
</script>
