"use strict";

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

jQuery(function () {
  $('#app').on('click', '.url_action', function (e) {
    e.preventDefault();
    e.stopPropagation();
    var url = $(this).attr('href');
    $.ajax({
      url: url,
      async: true
    }).done(function () {
      app.rechargerJson();
    });
  });
});

function recupJson(d) {
  try {
    return JSON.parse(d);
  } catch (e) {
    return [];
  }
}

var orderBy = function orderBy(arr, props, orders) {
  return arr.sort(function (a, b) {
    return props.reduce(function (acc, prop, i) {
      if (acc === 0) {
        var _ref = orders && orders[i] === 'desc' ? [b[prop], a[prop]] : [a[prop], b[prop]],
            _ref2 = _slicedToArray(_ref, 2),
            p1 = _ref2[0],
            p2 = _ref2[1]; // passe en lowercase les String


        p1 = typeof p1 === 'string' ? p1.toLowerCase() : p1;
        p2 = typeof p2 === 'string' ? p2.toLowerCase() : p2; // Gestion du format de date
        // transforme 03/11/2000 en 20001103

        var re = /^(\d{2})\/(\d{2})\/(\d{2,4})$/;
        var r1 = p1.match(re);

        if (Array.isArray(r1)) {
          p1 = r1[3] + r1[2] + r1[1];
        }

        var r2 = p2.match(re);

        if (Array.isArray(r2)) {
          p2 = r2[3] + r2[2] + r2[1];
        }

        acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
      }

      return acc;
    }, 0);
  });
};

console.time('Chargement de VueJS AVANT Ajax');
console.time('Chargement de VueJs APRES Ajax');
Vue.nextTick(function () {
  console.timeEnd('Chargement de VueJS AVANT Ajax');
});
var monTableau = {
  props: {
    tparpage: {
      type: Array,
      default: function _default() {
        return [10, 20, 50, 'Tous'];
      }
    },
    apiuri: {
      type: String,
      required: true
    },
    objet: {
      type: String
    }
  },
  data: function data() {
    return {
      message: "Hello Vue ! ",
      table: [],
      header: [],
      crayons: [],
      search: '',
      page: 1,
      parPage: this.tparpage[0],
      parPageSelect: this.tparpage[0],
      pages: [],
      triOrders: [],
      triProps: []
    };
  },
  mounted: function mounted() {
    this.chargerJson();
  },
  computed: {
    tableau: function tableau() {
      var _this = this;

      console.log('computed tableau');
      return this.pagination(this.table.filter(function (ligne) {
        if (_this.search) {
          if (!Object.values(ligne).every(function (el) {
            return el.indexOf(_this.search);
          })) {
            return ligne;
          }
        } else {
          return ligne;
        }
      }));
    }
  },
  watch: {
    tableau: function tableau() {
      this.setPages();
    },
    parPageSelect: function parPageSelect(e) {
      if (!parseInt(e)) {
        this.parPage = this.table.length;
      } else {
        this.parPage = e;
      }
    }
  },
  methods: {
    chargerJson: function chargerJson() {
      var _this2 = this;

      fetch(this.apiuri).then(function (response) {
        return response.json();
      }).then(function (data) {
        var config = data.shift();
        _this2.header = config.header;
        _this2.crayons = config.crayons;
        _this2.table = data;
        Vue.nextTick(function () {
          console.timeEnd('Chargement de VueJs APRES Ajax');
        });
      }).catch(function (error) {
        return console.log(error);
      });
    },
    setPages: function setPages() {
      var nombreDePages = Math.ceil(this.table.length / this.parPage);
      this.pages = [];

      for (var index = 1; index <= nombreDePages; index++) {
        this.pages.push(index);
      }
    },
    pagination: function pagination(tableau) {
      var page = this.page;
      var parPage = this.parPage;
      var from = page * parPage - parPage;
      var to = page * parPage;
      return tableau.slice(from, to);
    },
    afficher_crayons: function afficher_crayons(name, id) {
      if (Object.keys(this.crayons).indexOf(name) !== -1) {
        return "crayon ".concat(this.crayons[name], "-").concat(name, "-").concat(id);
      }
    },
    tri: function tri(col, sens) {
      var i = this.triProps.indexOf(col);

      if (i !== -1) {
        this.triOrders[i] = sens;
      } else {
        this.triProps.push(col);
        this.triOrders.push(sens);
      }

      this.table = orderBy(this.table, this.triProps, this.triOrders);
    },
    ordreActif: function ordreActif(col, sens) {
      var i = this.triProps.indexOf(col);

      if (i !== -1) {
        if (this.triOrders[i] === sens) {
          return 'active';
        }
      }
    },
    resetTri: function resetTri() {
      this.table = orderBy(this.table, ['id']);
      this.triOrders = [];
      this.triProps = [];
    }
  },
  template: "\n\t<div>\n\t\t<h3> {{ message }}</h3>\n\t\t<div class=\"table\">\n\t\t\t<div class=\"gamutable--surTable\">\n\t\t\t\t<select id=\"parPage\" v-model=\"parPageSelect\">\n\t\t\t\t\t<option v-for=\"v in tparpage\" :key=\"v\">{{v}}</option>\n\t\t\t\t</select>\n\t\t\t\t<input type=\"text\" v-model=\"search\" placeholder=\"Rechercher\">\n\t\t\t\t<button class=\"btn\" type=\"button\" @click.stop=\"resetTri()\">R\xE9initialiser les tris des colonnes</button>\n\t\t\t</div>\n\t\t\t<table class=\"table table--zebra\">\n\t\t\t\t<thead>\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<th v-for=\"(head,i) in header\" :key=\"'head_'+i\" :class=\"head\">\n\t\t\t\t\t\t\t{{head}}\n\t\t\t\t\t\t\t<span class=\"iconeTri\">\n\t\t\t\t\t\t\t\t<i class=\"fa fa-sort-asc\" :class=\"ordreActif(head, 'asc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'asc')\"></i>\n\t\t\t\t\t\t\t\t<i class=\"fa fa-sort-desc\":class=\"ordreActif(head, 'desc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'desc')\" ></i>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</th>\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t<tbody>\n\t\t\t\t\t<tr v-for=\"l in tableau\" :key=\"l.id\">\n\t\t\t\t\t\t<td v-for=\"(td,name, i) in l\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.id), name]\" v-html=\"td\">\n\t\t\t\t\t\t\t{{td}}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t</tr>\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div>{{table.length}} \xE9l\xE9ments</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page=1\"> Start </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Previous </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-for=\"pageNumber in pages.slice(page-1, page+5)\" @click=\"page = pageNumber\"> {{pageNumber}} </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" @click=\"page++\" v-if=\"page < pages.length\" class=\"page-link\"> Next </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Last </button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>"
};
var app = new Vue({
  el: '#app',
  components: {
    monTableau: monTableau
  },
  methods: {
    rechargerJson: function rechargerJson() {
      this.$refs.montableau.chargerJson();
    }
  }
});