import { getElementOffset, hover } from '@/utils/frontend/dom';
import Popover from '@/components/popover/Popover.vue';
import { hidePopover, showPopover } from './popoverHelp';

// 悬浮提示
export const showTdHitTips = (td: HTMLElement, content = '', direction = 'horizontal') => {
  const offset = getElementOffset(td);
  let scrollDom: HTMLElement = td.parentElement as any;
  for (let i = 0; i < 5; i++) {
    scrollDom = scrollDom.parentElement as any;
  }
  const scrollTop = scrollDom.scrollTop || 0;
  const scrollLeft = scrollDom.scrollLeft || 0;
  // 内容为空字符串是不显示气泡
  if (content) {
    showPopover(
      {
        top: offset.top - scrollTop,
        left: offset.left - scrollLeft,
        tranHeight: td.clientHeight,
        tranWidth: td.clientWidth,
        content,
        direction,
      },
      Popover
    );
  }
};

export const bindPopover = (TD: HTMLElement, container: HTMLElement, content = '', direction = 'horizontal') => {
  if (content) {
    const mouseenterEvent = () => {
      showTdHitTips(TD, content, direction);
    };

    const mouseleaveEvent = () => {
      hidePopover();
    };
    // 鼠标hover时
    hover(container, mouseenterEvent, mouseleaveEvent);
  }
};
