import { Tooltip } from "antd"
import React, { useEffect, useRef, useState } from "react"
import style from './index.less'
import { copy } from "@/utils/utils"

interface Props {
    value?: string | number,
    isCopy?: boolean
}
/**
 * 表格溢出展示
 * @returns 
 */
const WidthEllipsis: React.FC<Props> = (props) => {

    /*********************************/
    const { value, isCopy } = props
    const ref: any = useRef(null)
    const ref1: any = useRef(null)
    const [data, setData] = useState<{ visible?: boolean }>({})
    /*********************************/

    useEffect(() => {
        // 容器宽度
        let width = ref.current.clientWidth
        // 文字实际宽度
        let actualWidth = ref1.current.childNodes[0].getBoundingClientRect().width
        if (actualWidth > width) {
            setData({})
        } else {
            setData({ visible: false })
        }
    }, [ref, ref1])

    return <Tooltip title={value} {...data}>
        <div className={style.myEll}>
            <div ref={ref} className="ellipsisOne" style={isCopy ? { color: '#1890ff' } : {}} onClick={() => { if(isCopy) copy((value || '') as any) }}>{value || '--'}</div>
            <div ref={ref1} className={style.hiddenCon}><span>{value}</span></div>
        </div>
    </Tooltip>
}

export default React.memo(WidthEllipsis)