<template>
  <v-flex xs12 md12>
    <div>
      <v-toolbar flat>
        <v-toolbar-title>
          <v-icon large color="primary">fa-splotch</v-icon>
          <span class="hidden-sm-and-down">Widgets</span>
        </v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn icon @click="newItem()">
          <v-icon>fa-plus-circle</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon>fa-filter</v-icon>
        </v-btn>
        <v-btn icon @click="getDataFromApi()">
          <v-icon>fa-sync</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon>fa-ellipsis-v</v-icon>
        </v-btn>
      </v-toolbar>
      <WidgetEdit :dialogdata="dialogdata" v-on:dialogclose="dialogdata.dialog=false"/>
      <v-data-table
        v-model="selected"
        :headers="headers"
        :items="Items"
        item-key="id"
        :pagination.sync="pagination"
        :total-items="totalItems"
        :loading="loading"
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td class="text-xs-left">{{ props.item.name }}</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="text-xs-left">{{ props.item.endDate }}</td>
          <td class="justify-center layout px-0">
            <v-icon small class="mr-3" @click="editItem(props.item)">fa-pencil-alt</v-icon>
          </td>
        </template>
      </v-data-table>
    </div>
  </v-flex>
</template>


<script>
/*  xeslint-disable */
import pagedList from "../api/pagedlist";
import WidgetEdit from "../components/inventorywidgetedit";
export default {
  components: {
    WidgetEdit
  },
  data() {
    return {
      dialogdata: {
        dialog: false,
        recordId: 2
      },
      editedIndex: -1,
      editedItem: {
        name: "",
        serial: 0,
        dollarAmount: 0,
        active: true,
        roles: 0,
        startDate: undefined,
        endDate: undefined
      },
      defaultItem: {
        name: "",
        serial: 0,
        dollarAmount: 0,
        active: true,
        roles: 0,
        startDate: new Date(),
        endDate: undefined
      },
      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" },
        { text: "End date", value: "endDate" }
      ]
    };
  },
  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();
    },

    newItem() {
      this.dialogdata.recordId = -1;
      this.dialogdata.dialog = true;
    },
    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.dialogdata.recordId = this.Items.indexOf(item);
      this.dialogdata.dialog = true;
    }
  }
};
</script>


<style>
</style>
