<template>
  <table class="kole-mergetable">
    <thead>
      <tr><th v-for="c in columns" :key="c.key">{{ c.title }}</th></tr>
    </thead>
    <tbody>
      <tr v-for="(row, idx) in merged" :key="idx">
        <td
          v-for="c in columns"
          :key="c.key"
          :class="{ 'kole-merged': c.merge && row._first[c.key] }"
          :rowspan="c.merge && row._first[c.key] ? row._span[c.key] : undefined"
          v-if="!c.merge || row._first[c.key]"
        >{{ row[c.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'KoleMergedCellTable',
  props: {
    data: { type: Array, default: () => [] },
    columns: { type: Array, default: () => [] }
  },
  computed: {
    merged() {
      var spans = {};
      var first = {};
      var result = this.data.map(function (row) {
        var copy = Object.assign({}, row);
        copy._first = {};
        copy._span = {};
        return copy;
      });
      this.columns.filter(function (c) { return c.merge; }).forEach(function (c) {
        var i = 0;
        while (i < result.length) {
          var j = i;
          while (j + 1 < result.length && result[j + 1][c.key] === result[i][c.key]) j++;
          var span = j - i + 1;
          for (var k = i; k <= j; k++) {
            result[k]._first[c.key] = k === i;
            result[k]._span[c.key] = span;
          }
          i = j + 1;
        }
      });
      return result;
    }
  }
};
</script>

<style src="./MergedCellTable.css"></style>
