const Vue = require('vue');
const $ = require('jquery');
const VueResource = require('vue-resource');
const VueTables = require('vue-tables');

Vue.use(VueTables.client, {
    compileTemplates: true,
    templates: {
        edit: function (row) {
            return "<a href=# @click='$parent.showSubRow(" + row.id + ")'>Edit</a>";
        },
        addRow: function (row) {
            return "<a href=# @click='$parent.addRow(" + row.id + ")'>Add</a>";
        },
        toggleRow: function (row) {
            return "<a href=# @click='$parent.toggleRow(" + row.id + ")'>Toggle</a>";
        }
    },
    texts: {
        filter: "Search:"
    },
    datepickerOptions: {
        showDropdowns: true
    }
}, { template: require('./table-template.html') });

new Vue({
  el:"#app",
  data: {
    columns:['id','name','business', 'contact', 'actions'],
    tableData: [
      {id: 1, name: "John Smith", business: "Animal Fighters", contact: "address", actions: "call"},
      {id: 2, name: "John Smith", business: "Animal Fighters", contact: "address", actions: "call" },
      {id: 3, name: "John Smith", business: "Animal Fighters", contact: "address", actions: "call" },
      {id: 4, name: "John Smith", business: "Animal Fighters", contact: "address", actions: "call" },
      {id: 5, name: "John Smith", business: "Animal Fighters", contact: "address", actions: "call" }
    ],
    options: {
      // see the options API
    }
  },
  methods: {
      showSubRow: function (argument1) {
          console.log(argument1);
      },
      addRow: function (argument1) {
          this.tableData.push({ id: 5, name: "John Smith", business: "Animal Fighters", contact: "address", actions: "call" });
      },
      toggleRow: function (row) {
          let hiddenRow = document.getElementById(row + "b");
          hiddenRow.style.display = hiddenRow.style.display === 'none' ? '' : 'none';
      }
  }
});