<template>
  <Tooltip :content="text || ''" placement="top" :max-width="maxWidth">
    <div :class="ellipsisClass">{{ text || '' }}</div>
  </Tooltip>
</template>

<script>
export default {
  name: 'TableTextEllipsis',
  props: {
    // 要显示的文本内容
    text: {
      type: [String, Number],
      default: ''
    },
    // 显示的行数，默认为2行
    lines: {
      type: Number,
      default: 2,
      validator: (value) => [1, 2, 3, 4].includes(value)
    },
    // Tooltip 的最大宽度
    maxWidth: {
      type: Number,
      default: 300
    }
  },
  computed: {
    ellipsisClass () {
      return `text-ellipsis-${this.lines}`
    }
  }
}
</script>

<style scoped>
/* 样式已在 global.css 中定义 */
</style>
