<template>
  <el-tooltip
      effect="dark"
      :content="props.content"
      placement="bottom-start"
      :disabled="isShow"
  >
    <div :class="lines?'content-lines':textAlign=='left'?'left-content':'content'" :style="{width: props.width+'px'}" @mouseover="isShowTooltip">
      <span ref="contentRef">
        <slot name="content">{{ props.content }}</slot>
      </span>
    </div>
  </el-tooltip>
</template>
<script setup>
const props = defineProps({
  content: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '100%'
  },
  lines: {
    type: Boolean,
    default: false
  },
  textAlign: {
    type: String,
    default: ''
  },
})
const contentRef = ref()
const isShow = ref(false)
const isShowTooltip = () => {
  isShow.value = parseInt(props.width) > contentRef.value.offsetWidth;
}
</script>
<style scoped>
.left-content{
  width: 45px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.content {
  width: 45px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.content-lines{
  word-break:break-all;
  overflow:hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
</style>
