const template = html`
  <span>
    <table class="table table-hover table-striped table-condensed">
      <thead class="table-header">
        <tr>
          <th v-for="h,key in header">{{key}}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row,index in dataFiltered" :class="data[index].tag">
          <td v-for="col in row" :id="row[0]">
            {{col}}
          </td>
          <popover
            :title="data[index]['title']"
            :data="data[index]"
            :header="popoverHeader"
            :parent="row[0]"
          >
          </popover>
        </tr>
      </tbody>
    </table>
  </span>
`;
import popover from "../generic/popover.js";
export default {
  props: ["header", "data", "popoverHeader"],
  data: function() {
    return {
      over: null
    };
  },
  computed: {
    dataFiltered() {
      return this.data.map(
        function(each) {
          const out = [];
          Object.values(this.header).forEach(el => {
            if (each[el]) {
              out.push(each[el]);
            } else {
              out.push("");
            }
          });
          return out;
        }.bind(this)
      );
    }
  },
  components: {
    popover
  },
  methods: {
    swap(json) {
      var ret = {};
      for (var key in json) {
        ret[json[key]] = key;
      }
      return ret;
    }
  },
  template
};
