<!--table-tooltip.vue-->
<template>
  <!-- 文案溢出，显示tooltip -->
  <div ref="table-toolTip" class="el-tooltip__popper is-dark table-toolTip" style="transform-origin: center top; z-index: 999999; position: fixed; display: none">
    {{ tableCellTooltipText }}
    <div ref="toolTip-arrow" class="popper__arrow"></div>
  </div>
</template>

<script>
export default {
  name: 'tableTooltip',
  props: {
    tableCellMouse: {
      type: Object,
      default() {
        return {};
      }
    },
    tempDom: {}
  },

  data() {
    return {
      toolDom: null,
      arrowDom: null,
      tableCellTooltipText: null, // 溢出文案
      mouseLeaveVal: {
        tooltip: 0, // 1-鼠标移入，2-鼠标移出，0-无焦点
        cell: false // 单元格
      }
    };
  },

  computed: {},

  watch: {
    mouseLeaveVal: {
      deep: true,
      handler(nv) {
        setTimeout(() => {
          if (nv.cell && 1 != nv.tooltip) {
            this.toogleActiveTooltip(false, this.toolDom);
          }
        }, 100);
      }
    },

    tableCellMouse: {
      deep: true,
      handler(nv, ov) {
        if (nv.hidden) {
          this.hiddenTooltip();
        } else if (nv.row && !nv.hidden) {
          this.showTooltip(nv.cellDom);
        }
      }
    },
    tableCellTooltipText() {
      this.$nextTick(() => {
        console.log(this.toolDom.clientHeight)
      })
    },
  },

  created() {},

  mounted() {
    this.$nextTick(() => {
      this.toolDom = this.$refs['table-toolTip'];
      this.arrowDom = this.$refs['toolTip-arrow'];
      const _this = this;
      this.toolDom.addEventListener('mouseleave', event => {
        _this.mouseLeaveVal.tooltip = 2;
      });
      this.toolDom.addEventListener('mouseenter', event => {
        _this.mouseLeaveVal.tooltip = 1;
      });
    });
  },

  methods: {
    // 文字溢出显示tooltip  动态计算top和left
    showTooltip(cell) {
      this.tableCellTooltipText = cell.innerText || cell.textContent;
      const textWidth = this.getTextWidth(this.tableCellTooltipText);
      if (textWidth > cell.clientWidth - 32) {
        this.$nextTick(() => {
          const cellLeft = cell.getBoundingClientRect().left,
            cellTop = cell.getBoundingClientRect().top;
          const computedPositonNum = this.hiddenToolPosition(textWidth, cell.clientWidth, cellLeft, cellTop);
          // this.toolDom.style.top = `${computedPositonNum.top}px`;
          this.toolDom.style.left = `${computedPositonNum.left}px`;
          this.toolDom.style.width = `${computedPositonNum.width}px`;
          this.arrowDom.style.left = `${computedPositonNum.arrowLeft}px`;
          this.toogleActiveTooltip(true, this.toolDom);
          this.toolDom.style.top = (cellTop - this.toolDom.clientHeight) + 'px'
          this.mouseLeaveVal.cell = false;
          this.mouseLeaveVal.tooltip = 0;
        });
      } else {
        this.toogleActiveTooltip(false, this.toolDom);
      }
    },

    // toolTip定位计算
    hiddenToolPosition(txtWidth, cellWidth, cellLeft, cellTop) {
      const toolWidth = 600 < txtWidth ? 600 : txtWidth + 24,
        webWidth = document.body.offsetWidth;

      let expectLeft = cellLeft - (toolWidth - cellWidth) / 2;
      const toolWidthAndLeft = expectLeft + toolWidth;
      let arrowLeft; // arrow left
      if (toolWidthAndLeft > webWidth) {
        const moreWidth = toolWidthAndLeft - webWidth;
        expectLeft -= toolWidthAndLeft - webWidth;
        arrowLeft = (toolWidth - moreWidth) / 2 + moreWidth - 6;
      } else {
        arrowLeft = toolWidth / 2 - 6;
      }
      return { left: expectLeft, top: '', width: toolWidth, arrowLeft };
    },

    hiddenTooltip() {
      this.mouseLeaveVal.cell = true;
    },

    //tooltip样式
    toogleActiveTooltip(show, toolDom) {
      let selection = window.getSelection();
      selection.removeAllRanges();
      if (show) {
        toolDom.classList.add('el-fade-in-linear-enter-active', 'el-fade-in-linear-enter-to', 'el-popper');
        setTimeout(() => {
          toolDom.classList.remove('el-fade-in-linear-enter-active', 'el-fade-in-linear-enter-to');
        }, 500);
        toolDom.style.display = '';
      } else {
        toolDom.classList.add('el-fade-in-linear-leave-active', 'el-fade-in-linear-leave-to');
        setTimeout(() => {
          toolDom.classList.remove('el-fade-in-linear-leave-active', 'el-fade-in-linear-leave-to', 'el-popper');
        }, 500);
        toolDom.style.display = 'none';
      }
    },
    getTextWidth(text) {
      this.tempDom.textContent = text;
      const { clientWidth } = this.tempDom;
      return clientWidth;
    }

    // getTextWidth(str) {
    //   let width = 0;
    //   let newStr = str + '';
    //   if (newStr) {
    //     let zh = newStr.replace(/[^\u4E00-\u9FA5]/g, '');
    //     let en = newStr.replace(/[^a-z]/g, '');
    //     let Enl = newStr.replace(/[^A-Z]/g, '');
    //     let num = newStr.replace(/[^\d]/g, '');
    //     let spe = newStr.match(/[^A-Za-z0-9\u4e00-\u9fa5+]/g);
    //     let sym = spe ? spe.join('') : '';
    //     width = zh.length * 14 + en.length * 9.4 + Enl.length * 14 + num.length * 9 + sym.length * 8;
    //   }
    //   return width;
    // }
  }
};
</script>

<style lang="scss" scoped>
@import '../../../css/fireflyTableTooltip.scss';
</style>
