<template>
  <v-flex xs12 md12>
    <div>
      <v-toolbar flat>
        <v-toolbar-title>
          <v-icon large color="primary">fa-splotch</v-icon>Widgets
        </v-toolbar-title>
        <v-divider class="mx-2" inset vertical></v-divider>
        <v-spacer></v-spacer>
        <v-dialog v-model="dialog" max-width="500px">
          <v-btn slot="activator" icon large dark class="mb-2">
            <v-icon large color="secondary">fa-plus-circle</v-icon>
          </v-btn>
          <v-btn slot="activator" icon large dark class="mb-2">
            <v-icon large color="secondary">fa-ellipsis-v</v-icon>
          </v-btn>
          <v-card>
            <v-card-title>
              <span class="headline">{{ formTitle }}</span>
            </v-card-title>
            <v-card-text>
              <v-container grid-list-md>
                <v-layout wrap>
                  <v-flex xs12 sm6 md4>
                    <v-text-field v-model="editedItem.name" label="Name"></v-text-field>
                  </v-flex>
                  <v-flex xs12 sm6 md4>
                    <v-text-field v-model="editedItem.serial" label="Serial"></v-text-field>
                  </v-flex>
                  <v-flex xs12 sm6 md4>
                    <v-text-field v-model="editedItem.dollarAmount" label="Price"></v-text-field>
                  </v-flex>
                  <v-flex xs12 sm6 md4>
                    <v-checkbox v-model="editedItem.active" label="Active"></v-checkbox>
                  </v-flex>
                  <v-flex xs12 sm6 md4>
                    <v-text-field v-model="editedItem.roles" label="Roles"></v-text-field>
                  </v-flex>
                  <v-flex xs12 sm6 md4>
                    <v-text-field v-model="editedItem.startDate" label="Start date"></v-text-field>
                  </v-flex>
                </v-layout>
              </v-container>
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn icon large dark @click="close">
                <v-icon large class="mr-5" color="secondary">fa-ban</v-icon>
              </v-btn>
              <v-btn icon large dark @click="save">
                <v-icon large class="mr-3" color="secondary">fa-save</v-icon>
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-toolbar>
      <v-data-table
        v-model="selected"
        :headers="headers"
        :items="Items"
        item-key="id"
        :pagination.sync="pagination"
        :total-items="totalItems"
        :loading="loading"
        class="elevation-1"
        select-all
      >
        <template slot="items" slot-scope="props">
          <td>
            <v-checkbox v-model="props.selected" color="secondary" hide-details></v-checkbox>
          </td>
          <td>
            <div style="width:200px;">{{ props.item.name }}</div>
          </td>
          <td class="text-xs-left">{{ props.item.serial }}</td>
          <td class="text-xs-left">{{ props.item.dollarAmount }}</td>
          <td class="text-xs-left">{{ props.item.active }}</td>
          <td class="text-xs-left">{{ props.item.roles }}</td>
          <td class="text-xs-left">{{ props.item.startDate }}</td>
          <td class="justify-center layout px-0">
            <v-icon small class="mr-3" @click="editItem(props.item)">fa-pencil-alt</v-icon>
            <v-icon small class="mr-3" @click="deleteItem(props.item)">fa-trash-alt</v-icon>
          </td>
        </template>
      </v-data-table>
    </div>
  </v-flex>
</template>


<script>
/*  xeslint-disable */
import pagedList from "../api/pagedlist";
export default {
  data() {
    return {
      dialog: false,
      editedIndex: -1,
      editedItem: {
        name: "",
        serial: 0,
        dollarAmount: 0,
        active: true,
        roles: 0,
        startDate: undefined
      },
      defaultItem: {
        name: "",
        serial: 0,
        dollarAmount: 0,
        active: true,
        roles: 0,
        startDate: new Date()
      },
      totalItems: 0,
      Items: [],
      loading: true,
      pagination: {},
      selected: [],
      headers: [
        {
          text: "Widget",
          value: "name"
        },
        { text: "Serial", value: "serial" },
        { text: "Price", value: "dollarAmount" },
        { text: "Active", value: "active" },
        { text: "Roles", value: "roles" },
        { text: "Start date", value: "startDate" }
      ]
    };
  },
  watch: {
    pagination: {
      handler() {
        this.getDataFromApi();
        /*
        {
        descending: false,
        page: 1,
        rowsPerPage: 5,
        sortBy: "name",
        totalItems: 0
      }
        */
      },
      deep: true
    }
  },
  mounted() {
    this.getDataFromApi();
  },
  computed: {
    formTitle() {
      return this.editedIndex === -1 ? "New Item" : "Edit Item";
    }
  },
  methods: {
    toggleAll() {
      if (this.selected.length) this.selected = [];
      else this.selected = this.Items.slice();
    },
    getDataFromApi() {
      var listOptions = {
        Offset: 0,
        Limit: 5
      };

      if (this.pagination.rowsPerPage && this.pagination.rowsPerPage > 0) {
        listOptions.Offset =
          (this.pagination.page - 1) * this.pagination.rowsPerPage;
        listOptions.Limit = this.pagination.rowsPerPage;
      }

      this.loading = true;
      pagedList.fetch("Widget/ListWidgets", listOptions).then(res => {
        // debugger;
        this.loading = false;
        this.Items = res.data;
        this.totalItems = res.paging.count;
      });
    },

    editItem(item) {
      this.editedIndex = this.Items.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog = true;
    },

    deleteItem(item) {
      const index = this.Items.indexOf(item);
      confirm("Are you sure you want to delete this item?") &&
        this.Items.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.Items[this.editedIndex], this.editedItem);
      } else {
        this.Items.push(this.editedItem);
      }
      this.close();
    }
  }
};
</script>


<style>
</style>

//Example api response
// {
//   "data": [
//     {
//       "id": 1,
//       "concurrencyToken": 2262471,
//       "ownerId": 1,
//       "name": "Handcrafted Wooden Bacon 23",
//       "serial": 1,
//       "dollarAmount": 25.42,
//       "active": true,
//       "roles": 8212,
//       "startDate": "2018-11-19T12:20:42.920058",
//       "endDate": "2018-11-19T15:37:47.053849",
//       "notes": "Voluptas assumenda laudantium nemo cupiditate. Quia voluptatem reiciendis et. Sit non error est. Tenetur provident nostrum. Voluptatem voluptatem et."
//     },
//     {
//       "id": 2,
//       "concurrencyToken": 2262494,
//       "ownerId": 1,
//       "name": "Ergonomic Soft Gloves 24",
//       "serial": 2,
//       "dollarAmount": 530.39,
//       "active": true,
//       "roles": 8212,
//       "startDate": "2018-11-19T12:17:32.488013",
//       "endDate": "2018-11-19T17:01:18.425666",
//       "notes": "Sed rerum minima blanditiis est. Praesentium consequatur numquam nostrum voluptatem libero dolores voluptatem et. Aut et nobis consectetur voluptatem minus. Ipsa nemo non in iste adipisci voluptatem. Minus consequatur in accusantium."
//     },
//     {
//       "id": 3,
//       "concurrencyToken": 2262518,
//       "ownerId": 1,
//       "name": "Fantastic Metal Computer 25",
//       "serial": 3,
//       "dollarAmount": 494.3,
//       "active": true,
//       "roles": 8212,
//       "startDate": "2018-11-19T13:06:47.437006",
//       "endDate": "2018-11-19T14:41:44.665721",
//       "notes": "Facere et ex. Ipsa aspernatur itaque maiores sint nulla esse incidunt. Architecto labore voluptatem dolore iusto ut."
//     }
//   ],
//   "paging": {
//     "count": 100,
//     "offset": 0,
//     "limit": 3,
//     "first": "http://localhost:7575/api/v8.0/Widget/ListWidgets?pageNo=1&pageSize=3",
//     "previous": null,
//     "next": "http://localhost:7575/api/v8.0/Widget/ListWidgets?pageNo=1&pageSize=3",
//     "last": "http://localhost:7575/api/v8.0/Widget/ListWidgets?pageNo=34&pageSize=3"
//   }
// }
