<template>
    <div class="tooltip-over" :style="{ width }">
        <el-tooltip
                effect="light"
                :disabled="isShowTooltip"
                :content="content"
                placement="top"
        >
      <span class="tooltip-over__overflow" @mouseover="onMouseOver">
        {{ _content }}
      </span>
        </el-tooltip>
    </div>
</template>

<script>
    import ElTooltip from 'element-ui-for-gov/packages/tooltip';
    export default {
      name: 'TooltipOver',
      components: { ElTooltip },
      props: {
        // 显示的文字内容
        content: {
          type: String,
          default: () => {
            return '';
          }
        },
        width: {
          type: String,
          default: '100%'
        },
        format: Function,
        showTip: Function
      },
      data() {
        return {
          isShowTooltip: false
        };
      },
      computed: {
        _content() {
          return this.format ? this.format(this.content) : this.content;
        }
      },
      methods: {
        onMouseOver(e) {
          if (this.showTip) {
            if (this.showTip(this.content)) {
              console.log(1111);
              this.isShowTooltip = false;
            } else {
              this.isShowTooltip = true;
            }
            return;
          }
          const parentWidth = this.$el.offsetWidth;
          const range = document.createRange();
          range.setStart(this.$el, 0);
          range.setEnd(this.$el, this.$el.childNodes.length);
          const contentWidth = range.getBoundingClientRect().width;
          // 判断是否开启tooltip功能
          if (contentWidth > parentWidth || this.$el.scrollWidth > parentWidth) {
            this.isShowTooltip = false;
          } else {
            this.isShowTooltip = true;
          }
        }
      }
    };
</script>
