<template>
  <v-data-table
      :headers="headers"
      :items="items"
      :search="search"
      sort-by="role"
      class="elevation-1"
      item-key="userid"
      :single-select="singleSelect"
      show-select
    >
      <template v-slot:item.userid="{ item }">
        <v-icon
          small
          class="mr-2"
          @click="editItem(item)"
        >
          mdi-pencil
        </v-icon>
      </template>
      <template v-slot:no-data>
        <div class="list-nodata">no data</div>
      </template>
    </v-data-table>
</template>

<script>
//import bgaBodyHeader from '@/components/bgaBodyHeader.vue'

export default {
  name: 'CommonGrid',
  components: {
    //bgaBodyHeader
  },
  props:{
    url: String,
    headers: Array,
    search: {
      type:String,
      required: false,
      default:''
    },
    singleSelect: {
      type:Boolean,
      required: false,
      default: false
    },
  },
    data: () => ({
      dialog: false,
      dialogDelete: false,
      items:[],
      //search: '',
      //singleSelect: false,
      selected: [],
      // headers: [
      //   { text: 'Dessert (100g serving)', align: 'start', sortable: false, value: 'name'},
      //   { text: 'Calories', value: 'calories' },
      //   { text: 'Fat (g)', value: 'fat' },
      //   { text: 'Carbs (g)', value: 'carbs' },
      //   { text: 'Protein (g)', value: 'protein' },
      //   { text: 'Actions', value: 'actions', sortable: false },
      // ],
      editedIndex: -1,
      editedItem: {
        name: '',
        calories: 0,
        fat: 0,
        carbs: 0,
        protein: 0,
      },
      defaultItem: {
        name: '',
        calories: 0,
        fat: 0,
        carbs: 0,
        protein: 0,
      },
    }),

    created () {
      if(this.url != null){
        this.loadData(this.url);
      }
    },

    computed: {
      formTitle () {
        return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
      },
    },

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


    methods: {
      async loadData () {
        try{
          const result = await this.$axios.post(this.url,{});
          this.items = result.data;
        }catch(e){
          console.log(e);
        }
      },
      editItem (item) {
        this.editedIndex = this.items.indexOf(item)
        this.editedItem = Object.assign({}, item)
        this.dialog = true
      },

      deleteItem (item) {
        this.editedIndex = this.items.indexOf(item)
        this.editedItem = Object.assign({}, item)
        this.dialogDelete = true
      },

      deleteItemConfirm () {
        this.items.splice(this.editedIndex, 1)
        this.closeDelete()
      },

      close () {
        this.dialog = false
        this.$nextTick(() => {
          this.editedItem = Object.assign({}, this.defaultItem)
          this.editedIndex = -1
        })
      },

      closeDelete () {
        this.dialogDelete = false
        this.$nextTick(() => {
          this.editedItem = Object.assign({}, this.defaultItem)
          this.editedIndex = -1
        })
      },

      save () {
        if (this.editedIndex > -1) {
          Object.assign(this.items[this.editedIndex], this.editedItem)
        } else {
          this.items.push(this.editedItem)
        }
        this.close()
      },
    },
  }
</script>
