<template>
    <div>
        <form @submit.prevent="formSubmit">
            <vue-tabs>
                <v-tab title="Personal Info">
                    <div class="form-group">
                        <label>Name</label>
                        <input v-validate="'required'" name="name" type="text" v-model="client.name" class="form-control">
                        <span v-show="errors.has('name')" class="bg-danger">{{ errors.first('name') }}</span>
                    </div>
                    <div class="form-group">
                        <label>E-mail</label>
                        <input name="email" v-validate="'email'" type="text" v-model="client.email" class="form-control">
                        <span v-show="errors.has('email')" class="bg-danger">{{ errors.first('email') }}</span>
                    </div>
                </v-tab>

                <v-tab title="Address Info">
                    <div class="form-group">
                        <label>Address</label>
                        <input type="text" v-model="client.address" class="form-control">
                    </div>
                </v-tab>
            </vue-tabs>
            <button type="submit" class="btn btn-default">Save</button>
            <button @click.prevent="cancel" class="btn btn-default">Cancel</button>
        </form>
    </div>
</template>
<script>
//local registration
import {VueTabs, VTab} from 'vue-nav-tabs'
import 'vue-nav-tabs/dist/vue-tabs.min.css'
//component code

export default {
    props: ['client'],
    data: function(){
        return {
            errorMessage: ''
        }
    },
    components: {
        VueTabs,
        VTab
    },
    methods: {
        formSubmit(){
            this.$validator.validateAll()
                .then(()=>{
                    console.log(this.errors);
                    this.$emit("formSubmit", this.client);
                })
                .catch(()=>{});
        },
        cancel(){
            this.$emit("formCancel");
        }
    }
}
</script>