<template>
<v-container grid-list-xl>
<v-flex>
  <v-card>
    <v-card-title>
     <b><h5> Healthcare Providers </h5></b>
      <v-spacer></v-spacer>
      <v-flex xs6 sm4>
      <v-text-field justify-right
        prepend-icon="search" 
        v-model="search"
        label="Find Yours Users"
      ></v-text-field></v-flex>
    </v-card-title>
    
    <v-data-table
      :headers="headers"
      :items="desserts"
      :search="search"
    >
    
     
      <template slot="items" slot-scope="props">
        <td>{{ props.item.No }}</td>
        <td>{{ props.item.FName +' '+ props.item.LName }}</td>
        <td>{{ props.item.Email }}</td>
        <td><v-flex xs6>
    <v-select
    :items="status"
    v-model="e1"
    menu-props="auto"
    label="Select"
    hide-details
    single-line
    ></v-select>
    </v-flex></td>
        <td>
          <v-icon
            class="mr-1"
            @click="report(props.item)"
          >
            visibility
          </v-icon>
          <v-icon
            class="mr-1"
            @click="editItem(props.item)"
          >
            edit
          </v-icon>
          <v-icon
          class="mr-1"
          @click="deleteItem(props.item)"
          >
            delete
          </v-icon>
    </td>
       
      </template>
      <!-- <v-alert slot="no-results" :value="true" color="error" icon="warning">
        Your search for "{{ search }}" found no results.
      </v-alert> -->
    </v-data-table>
   <v-dialog v-model="dialog" max-width="500px">
     <v-toolbar>
       <v-spacer></v-spacer>
       <v-toolbar-title>Edit Profile</v-toolbar-title>
       <v-spacer></v-spacer>
       </v-toolbar>
      <v-card>
      <v-flex align-center justify-center layout text-xs-center>
      <v-avatar size="40px"> 
      <img src="/static/avatar/download.png"/> </v-avatar> 
     </v-flex>  
          <v-card-text>
          <v-container grid-list-md>
          <v-layout wrap justify-center>
          <v-flex xs12 sm9> 
          <v-form>
    <v-text-field
      v-model="editedItem.FName" 
      v-validate="'required|max:15'"
      :error-messages="errors.collect('Name')"
      label="Name"
      data-vv-name="Name"
      required >
    </v-text-field>
      <v-text-field
      v-validate="'required|max:10'"
      v-model="editedItem.LName"
      :error-messages="errors.collect('name')"
      label="Last Name"
      data-vv-name="name"
      required>
    </v-text-field>
    <v-text-field
      v-model="editedItem.Email" 
      v-validate="'required|email'"
      :error-messages="errors.collect('email')"
      label="E-mail"
      data-vv-name="email"
      required>
    </v-text-field>
    <v-text-field
       v-model="editedItem.DOB" 
       label="Date of Birth"
       hint="DD/MM/YYYY"
       persistent-hint
       @blur="date = parseDate(dateFormatted)"
       v-validate="'required'" >
    </v-text-field>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn large round dark @click.native="close">Cancel</v-btn>
      <v-spacer></v-spacer>
      <v-btn large round dark @click.native="save">Save</v-btn>
      <v-spacer></v-spacer>
      </v-card-actions>
    </v-form>
</v-flex>
</v-layout>
</v-container>
</v-card-text>

</v-card>
</v-dialog>
   <!-- <v-dialog v-model="dialog1" max-width="500px">
     <v-flex></v-flex>
   </v-dialog> -->
    </v-card>
    </v-flex>
</v-container>
</template>
<script>
export default {
  data: () => ({
    dialog: false,
    dialog1: false,
    status: ['Pending', 'Approved'],
    search: '',
    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: '', value: '', sortable: false },

    ],
    desserts: [],
    editedIndex: -1,
    editedItem: {
      No: '',
      FName: '',
      LName: '',
      Email: '',
    },
    defaultItem: {
      No: '',
      FName: '',
      LName: '',
      Email: '',
    },
  }),
  computed: {
    formTitle () {
      return this.editedIndex === -1 ? 'New Item' : 'Edit Item';
    }
  },

  watch: {
    dialog (val) {
      val || this.close();
    }
  },

  created () {
    this.initialize();
  },
  methods: {
    initialize () {
      this.desserts = [
        {
          No: 1,
          FName: 'Amit',
          LName: 'goyal',
          Email: 'jsi@gmail.com',
          DOB: '22/09/1996'
        },
        {
          No: 2,
          FName: 'Sumit',
          LName: 'kumar',
          Email: 'aasi@gmail.com',
          DOB: '16/09/1997'
        }
      ];
    },

    editItem (item) {
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog = true;
    },
    // report (item) {
    //   this.editedIndex = this.desserts.indexOf(item);
    //   this.editedItem = Object.assign({}, item);
    //   this.dialog1 = 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();
    }
  }, 
};
</script>