const template = html`
  <span>
    <div class="popover fade bottom in" role="tooltip" :style="style">
      
      <h3 class="popover-title">{{title}}{{$el}}</h3>
      <div class="popover-content">
          <span v-for="row,index in dataFiltered">
          <b valign="top">{{Object.keys(header)[index]}}:</b>
          <p valign="top" v-html="row"></p>
          </span>
        </table>
      </div>
    </div>
  </span>
`;

export default {
  props: ["data", "title", "parent", "header"],
  data: function() {
    return {
      top: 0,
      left: 0,
      show: false,
      el: null
    };
  },

  mounted() {
    ;
    this.el = this.$el;
    document.body.addEventListener("mousemove", event => {
      this.show =
        document.elementFromPoint(event.clientX, event.clientY).id ==
        document.getElementById(this.parent).id;

      if (!this.show) return;
      this.left = event.clientX;
      this.top = event.clientY;
    });
  },
  computed: {
    style() {
      // if (!this.$el) return;
      let top = this.top;
      if (this.el) {
        top = this.top - this.el.offsetHeight / 2;
      }

      if (this.show) {
        return `top: ${this.top}px; left: ${this.left}px; display: block;   position: fixed;`;
      } else {
        return ` display: none; `;
      }
    },
    dataFiltered() {
      const out = [];
      Object.values(this.header).forEach(el => {
        if (this.data[el]) {
          out.push(this.data[el]);
        } else {
          out.push("");
        }
      });
      return out;
    }
  },
  methods: {},
  template
};
