<template>
  <div @mouseleave="toclosePopover">
    <div :class="tipClassName" :style="popoverStyle">
      <slot></slot>
      <div v-html="content"></div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { hidePopover } from './composables/popoverHelp';
import { Position } from './composables/types';

export default defineComponent({
  name: 'Popover',
  props: {
    top: { type: Number, default: 0 }, // 定位坐标top
    left: { type: Number, default: 0 }, // 定位坐标left
    content: {}, // 内容
    tranHeight: { type: Number, default: 0 }, // 向下偏移量，一般在handsontable中才需要
    tranWidth: { type: Number, default: 0 }, // 向左偏移量，一般在handsontable中才需要,
    style: {},
    // popover方向 ，horizontal为水平方向（左右显示），vertical为垂直方向（上下显示）
    direction: { type: String, default: 'horizontal' },
  },
  emits: ['destroy'],
  setup(props) {
    const { scrollWidth, scrollHeight } = document.body;
    let tipClassName = 'tipPosition tip';
    const tipPosition: Position = {};
    // 鼠标离开组件时，销毁组件
    const toclosePopover = () => {
      hidePopover();
    };
    // 水平显示（只在左或者右显示）
    if (props.direction === 'horizontal') {
      tipClassName += 'H';
      if (props.top > scrollHeight / 2) {
        tipClassName += 'Bottom';
        tipPosition.bottom = `${scrollHeight - props.top - props.tranHeight - 8}px`;
      } else {
        tipClassName += 'Top';
        tipPosition.top = `${props.top - 10}px`;
      }
      if (props.left > scrollWidth / 2) {
        tipClassName += 'Right';
        tipPosition.right = `${scrollWidth - props.left + 8}px`;
      } else {
        tipClassName += 'Left';
        tipPosition.left = `${props.left + props.tranWidth + 8}px`;
      }
    } else {
      tipClassName += 'V';
      if (props.top > scrollHeight / 2) {
        tipClassName += 'Top';
        tipPosition.bottom = `${scrollHeight - props.top + 8}px`;
      } else {
        tipClassName += 'Bottom';
        tipPosition.top = `${props.top + props.tranHeight + 8}px`;
      }
      if (props.left > scrollWidth / 2) {
        tipClassName += 'Right';
        tipPosition.right = `${scrollWidth - props.left - props.tranWidth / 2}px`;
      } else {
        tipClassName += 'Left';
        tipPosition.left = `${props.left + props.tranWidth / 2}px`;
      }
    }

    const objStyle = {};
    Object.assign(objStyle, props.style);
    const popoverStyle = ref({
      ...objStyle,
      ...tipPosition,
      display: 'block',
    });

    return { popoverStyle, tipClassName, toclosePopover, tipPosition };
  },
});
</script>

<style lang="scss" scoped>
.tipPosition {
  background: $light-black;
  color: $white;
  position: absolute;
  padding: 16px;
  border-radius: 13px;
  word-break: break-all;
  z-index: 200;
  // display: none;
}

.tipHBottomRight:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 8px;
  border-color: transparent transparent transparent $light-black;
  position: absolute;
  bottom: 12px;
  right: -6px;
}

.tipHTopRight:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 8px;
  border-color: transparent transparent transparent $light-black;
  position: absolute;
  top: 12px;
  right: -6px;
}

.tipHTopLeft:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 8px 8px 0;
  border-color: transparent $light-black transparent transparent;
  position: absolute;
  top: 12px;
  left: -6px;
}

.tipHBottomLeft:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 8px 8px 0;
  border-color: transparent $light-black transparent transparent;
  position: absolute;
  bottom: 12px;
  left: -6px;
}

.tipVBottomRight {
  transform: translateX(50%);

  &:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 8px 8px 8px;
    border-color: transparent transparent $light-black transparent;
    position: absolute;
    top: -6px;
    right: 50%;
    transform: translateX(50%);
  }
}

.tipVTopRight {
  transform: translateX(50%);

  &:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 8px 0 8px;
    border-color: $light-black transparent transparent transparent;
    position: absolute;
    bottom: -6px;
    right: 50%;
    transform: translateX(50%);
  }
}

.tipVTopLeft {
  transform: translateX(-50%);

  &:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 8px 0px 8px;
    border-color: $light-black transparent transparent transparent;
    position: absolute;
    bottom: -6px;
    left: 30px;
    transform: translateX(-50%);
  }
}

.tipVBottomLeft {
  transform: translateX(-50%);

  &:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 8px 8px 8px;
    border-color: transparent transparent $light-black transparent;
    position: absolute;
    top: -6px;
    left: 30px;
    transform: translateX(50%);
  }
}
::v-deep .jobContent {
  margin-bottom: 20px;
  color: $blue;
  max-width: 320px;
}
::v-deep .characterText {
  color: #fff;
}
::v-deep .unNormal {
  color: $blue;
}
</style>
