import { createPopper } from '@popperjs/core';

export default {
  name: 'Baseinfo',
  props: {
    top: {
      type: String,
      require: false
    },
    left: {
      type: String,
      require: false
    },
    right: {
      type: String,
      require: false
    },
    bottom: {
      type: String,
      require: false
    },
    name: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      text: null,
      tooltip: null,
      container: null,
      popperInstance: null
    }
  },
  methods: {
    show() {
      this.tooltip.setAttribute('data-show', '');
      this.popperInstance.update();
    },
    hide() {
      this.tooltip.removeAttribute('data-show');
    }
  },
  mounted() {
    this.container = this.$refs[`${this.name}-container`];
    this.text = this.$refs[`${this.name}-text`];
    this.tooltip = this.$refs[`${this.name}-tooltip`];

    const showEvents = ['mouseenter', 'focus'];
    const hideEvents = ['mouseleave', 'blur'];

    this.popperInstance = createPopper(this.text, this.tooltip, {
      modifiers: [
        {
          name: 'offset',
          options: {
            offset: [0, 8],
          },
        },
      ]
    });

    showEvents.forEach((event) => {
      this.text.addEventListener(event, this.show);
    });

    hideEvents.forEach((event) => {
      this.container.addEventListener(event, this.hide);
    });
  }
}