<template>
  <div class="el-upload-tooltip">
    <el-tooltip effect="light" :disabled="isShowTooltip" :content="content" placement="top">
      <span class="el-upload-tooltip__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 '';
      }
    }
  },
  data() {
    return {
      isShowTooltip: false
    };
  },
  methods: {
    onMouseOver(e) {
      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>
