<template>
<v-tabs

  slider-color="black"
>
 <v-spacer></v-spacer>
  <v-tab ripple>
    Existing user
  </v-tab>
  <v-spacer></v-spacer>
  <v-tab ripple>
    Add New Users
  </v-tab>
  <v-spacer></v-spacer>
  <v-tab-item>
    <v-card flat>
      <v-card-text>
      <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1">
    <template slot="items" slot-scope="props">
  <td>{{ props.item.No }}</td>
  <td>{{ props.item.Name }}</td>
  <td>{{ props.item.Email }}</td>
    <!-- <td><v-flex xs6>
    </v-flex></td> -->
        <td class="justify-center layout px-0">
          <v-icon
            small
            class="mr-2"
            @click="report(props.item)"
          >
            visibility
          </v-icon>
            <v-icon
            small
            class="mr-2"
            @click="editItem(props.item)"
          >
            edit
          </v-icon>
          <v-icon
            small
            @click="deleteItem(props.item)"
          >
            delete
          </v-icon>
        </td>
      </template>
    </v-data-table>
   </v-card-text>
  </v-card>
  </v-tab-item>
  <v-tab-item>
       <v-flex xs12 sm6 offset-sm3>
 
 
<v-card flat>
      <!-- <v-card-text>Contents for Item 2 go here</v-card-text> -->
  <v-container fluid fill-height>
    <v-layout align-center>
      <v-flex xs12 sm8 offset-sm2> 
       <v-flex offset-sm5>
        <v-avatar size="40px"> 
        <img src="/static/avatar/download.png"/> </v-avatar> 
      </v-flex>
       <v-form>
        
            <v-text-field
              v-validate="'required|FName'"
              label="First name"
              class="mt-5"
              v-model="FName"
              :rules="[() => FName.length > 0 || 'This field is required']"
              required
            ></v-text-field>
            <v-text-field
            v-validate="'required|LName'"
            label="Last name"
            v-model="LName"
            :rules="[() => LName.length > 0 || 'This field is required']"
            required
    ></v-text-field>
    <v-text-field
      v-model="email"
      :rules="[erules.required, erules.em]"
      label="E-mail"
      data-vv-name="email"
      required>
    </v-text-field>
    
 
    <v-text-field
       v-model="DOB"
       label="Date of Birth"
       
       persistent-hint
      :rules="[rules.required, rules.min]"
       required >
    </v-text-field>
  <v-card-actions>
  <v-btn @click="clear" round dark>clear</v-btn>
  <v-spacer></v-spacer>
  <v-btn @click="submit" round dark>Add</v-btn></v-card-actions>
</v-form>
</v-flex>
</v-layout>
</v-container>
    </v-card>
       </v-flex>
  </v-tab-item>  
</v-tabs>

 
</template>

<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
export default {
  $_veeValidate: {
    validator: 'new'
  },
  data: () => ({
    FName: '',
    LName: '',
    DOB: '',
    email: '',
    clear: '',
    search: '',
    dialog: false,
    state: ['Pending', 'Approved'],
    rules: {
      required: value => !!value || 'This field is Required.',
      min: v => (/^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/).test(v) && v.length > 0 || 'Please enter a date in the format dd/mm/yyyy'
        
    },
    erules: {
      required: value => !!value || 'This email field is Required.', 
      em: v => (v.length > 0 && /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'Email must be valid') 
    },
    headers: [
      {
        text: 'No',
        align: 'left',
        sortable: false,
        value: 'name'
      },
      { text: 'Name', value: 'Name', sortable: false },
      { text: 'Email', value: 'Email', sortable: false },
      // { text: 'Status', value: 'Status', sortable: false },
      // { text: 'Actions', value: 'name', sortable: false, align: 'center', }
    ],
    desserts: [],
    editedIndex: -1,
    editedItem: {
      No: '',
      Name: '',
      Email: '',
    },
    defaultItem: {
      No: '',
      Name: '',
      Email: '',
    },
  }),
  mounted () {
    this.$validator.localize('en', this.dictionary);
  },

  methods: {
    initialize () {
      this.desserts = [
        {
          No: 1,
          Name: 'amit',
          Email: 'jsi@gmail.com',
          DOB: '22/09/1996'
        },
        {
          No: 2,
          Name: 'sumit',
          Email: 'aasi@gmail.com',
          DOB: '16/09/1997'
        }
      ];
    },

    editItem (item) {
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog = true;
    },
    submit () {
      this.$validator.validateAll();
    },

    // report (item) {
    //   this.reportIndex = this.desserts.indexOf(item);
    //   this.reportItem = Object.assign({}, item);
    //   this.report = true;
    // },

    deleteItem (item) {
      const index = this.desserts.indexOf(item);
      confirm('Are you sure you want to delete this item?') &&
        this.desserts.splice(index, 1);
    },

    close () {
      this.dialog = false;
      setTimeout(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      }, 300);
    },

    save () {
      if (this.editedIndex > -1) {
        Object.assign(this.desserts[this.editedIndex], this.editedItem);
      } else {
        this.desserts.push(this.editedItem);
      }
      this.close();
    }
  }, 

  clear () {
    this.FName = '';
    this.LName = '';
    this.email = '';
    this.DOB = '';
  
    // this.select = null;
    // this.checkbox = null;
    this.$validator.reset();
  

  }
};

</script>
<style scoped>
.v-card__actions .v-btn{
  margin: 0 15px;
  min-width: 120px;
}
</style>