<template>
    <div class="panel-form alone">
        <form class="gform">
            <div class="form-content">
                <fieldset>
                    <legend>Informations globales</legend>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col m6 s12">
                                <md-input-container >
                                    <label>Prénom</label>
                                    <md-input v-model="user.firstname"></md-input>
                                </md-input-container>
                            </div>
                            <div class="col m6 s12">
                                <md-input-container>
                                    <label>Nom</label>
                                    <md-input v-model="user.lastname"></md-input>
                                </md-input-container>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col m6 s12">
                                <md-input-container>
                                    <label>Job</label>
                                    <md-input v-model="user.job"></md-input>
                                </md-input-container>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col m12">
                                <md-input-container>
                                    <label>Adresse</label>
                                    <md-textarea v-model="user.address"></md-textarea>
                                </md-input-container>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
            <div class="form-validate btn-control-bar">
                <btn-form v-on:click.native.prevent="closePanel">Annuler</btn-form>
                <btn-form v-on:click.native.prevent="saveElement" color="teal">Valider</btn-form>
            </div>
        </form>
    </div>
</template>

<script>
    import clone        from 'lodash/clone';
    import isEmpty      from 'lodash/isEmpty';
    import store        from '../../../store/store';
    import BtnForm      from '../../goomeo/buttons/btnForm.vue';

    export default {
        store,
        name        : 'user-form',
        components  : {
            BtnForm
        },
        data() {
            let refUser = this.$store.getters.selectedUser;

            return {
                user    : clone(refUser),
                isNew   : isEmpty(refUser)
            };
        },
        methods : {
            closePanel() {
                this.$parent.close();
            },
            saveElement() {
                if (this.isNew === true) {
                    this.$store.commit('addUser', this.user); // remplacer par trigger si vous voulez faire un traitement asynchrone (envoi à une API)
                    this.$parent.close();
                } else {
                    this.$store.dispatch('updateUser', this.user).then(() => {
                        this.$parent.close();
                    });
                }
            }
        }
    };
</script>