<script lang="ts" setup>

const props = defineProps({
  // 显示的文字内容
  content: {
    type: String,
    default: () => {
      return ''
    }
  },
  // 外层框的样式，在传入的这个类名中设置文字显示的宽度
  className: {
    type: String,
    default: () => {
      return ''
    }
  },
  line: {
    type: Number,
    default: () => {
      return 1
    }
  },
  // 为页面文字标识（如在同一页面中调用多次组件，此参数不可重复）
  refName: {
    type: String,
    default: () => {
      return ''
    }
  },
  popperClass: {
    type: String,
    default: () => {
      return ''
    }
  },
})

const isShowTooltip = ref(true);

const refMap: Record<string, any> = {}
const setRefMap = (el: any, item: string) => {
  if (el) {
    refMap[`${item}`] = el
  }
}

const onMouseOver = (str) => {
  let parentWidth = refMap?.[str]?.parentNode?.offsetWidth;
  let parentHeight = refMap?.[str]?.parentNode?.offsetHeight;
  let contentWidth = refMap?.[str]?.offsetWidth;
  let contentHeight = refMap?.[str]?.offsetHeight;
  // 判断是否开启tooltip功能

  if (props.line == 2) {
    if (contentHeight > parentHeight) {
      isShowTooltip.value = false;
    } else {
      isShowTooltip.value = true;
    }
  } else {
    if (contentWidth > parentWidth) {
      isShowTooltip.value = false;
    } else {
      isShowTooltip.value = true;
    }
  }
}
</script>

<template>
  <el-tooltip class="item" placement="top" effect="light" :popper-class="popperClass ?? 'table_tooltip'" :disabled="isShowTooltip" :open-delay="400" :content="content">
    <p class="over-flow" :class="className" @mouseover="onMouseOver(refName)">
      <span :ref="(el) => setRefMap(el, refName)" v-html="content || '-'"></span>
    </p>
  </el-tooltip>
</template>
  
<style lang="scss" scoped>
.over-flow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wid190 {
  width: 100%;
}

p {
  margin: 0;
}
</style>