import { ElTooltip } from 'element-plus'

export const ellipsisCell = (scope: any, ellipsisLength = 5) => {
  return defineComponent({
    setup() {
      const cellValue = scope.row[scope.column.property]

      return () =>
        typeof cellValue === 'string' ? (
          <ElTooltip
            disabled={cellValue.length <= ellipsisLength}
            content={cellValue}
          >
            <span>
              {cellValue.length <= ellipsisLength
                ? cellValue
                : `${cellValue.slice(0, ellipsisLength)}…`}
            </span>
          </ElTooltip>
        ) : (
          ''
        )
    },
  })
}
