<template>
<v-content>
    <v-container fluid fill-height>
    <v-layout align-center justify-right>
    <v-flex xs12 sm6> 
      <v-flex align-center justify-center layout text-xs-center>
      <v-avatar size="50px"> 
        <img src="/static/avatar/download.png"/> </v-avatar> 
    </v-flex>  
<v-form>
    <v-text-field
      v-validate="'required|max:15'"
      v-model="Fname"
      
      :error-messages="errors.collect('name')"
      label="First Name"
      data-vv-name="name"
      required >
    </v-text-field>
    <v-text-field
      v-validate="'required|max:10'"
      v-model="Lname"
      :error-messages="errors.collect('name')"
      label="Last Name"
      data-vv-name="name"
      required>
    </v-text-field>
    <v-text-field
      v-validate="'required|email'"
      v-model="email"
      :error-messages="errors.collect('email')"
      label="E-mail"
      data-vv-name="email"
      required>
    </v-text-field>
    <v-text-field
       v-model="dateFormatted"
       label="Date of Birth"
       hint="DD/MM/YYYY"
       persistent-hint
       @blur="date = parseDate(dateFormatted)"
       v-validate="'required'" >
    </v-text-field>
  <v-btn @click="clear" dark>clear</v-btn>
  <v-btn @click="submit" dark>Add</v-btn>
    
</v-form>
</v-flex>
</v-layout>
</v-container>
</v-content>
</template>
<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
export default {
  $_veeValidate: {
    validator: 'new'
  },
  data: () => ({
    name: '',
    email: '',
    // select: null,
    // items: [
    //   'Item 1',
    //   'Item 2',
    //   'Item 3',
    //   'Item 4'
    // ],
    checkbox: null,
    dictionary: {
      attributes: {
        email: 'E-mail Address'
        // custom attributes
      },
      custom: {
        name: {
          required: () => 'Name can not be empty',
          max: 'The name field may not be greater than 10 characters'
          // custom messages
        },
        select: {
          required: 'Select field is required'
        }
      }
    }
  }),
  mounted () {
    this.$validator.localize('en', this.dictionary);
  },

  methods: {
    submit () {
      this.$validator.validateAll();
    },
    clear () {
      this.name = '';
      this.email = '';
      this.date = '';
      // this.select = null;
      // this.checkbox = null;
      this.$validator.reset();
    }
  }
};
</script>