import React, { useEffect, useRef, useState } from 'react';
import classNames from 'classnames';
import { Tooltip } from 'antd';
import styles from './index.less';
import { TextAreaProps } from '../detailInterface';

export const ApolloTextAreaDetail = (props: TextAreaProps) => {
    const { className, origin, componentAttr, rowData, formatter } = props;
    const formatValue = formatter ? formatter(props.value) : props.value;
    if (!formatValue) {
        return null;
    }
    const [value, setValue] = useState(formatValue);
    const { cutLength, getDetail } = componentAttr;
    const [dotVisible, setDotVisible] = useState(false);
    const container = useRef(null);
    const dom = useRef(null);
    useEffect(() => {
        const containerTarget: any = container.current;
        const target: any = dom.current;
        if (containerTarget && target) {
            if (target.clientWidth > containerTarget.clientWidth) {
                setDotVisible(true);
            } else {
                setDotVisible(false);
            }
        }
    }, [value]);

    const getMore = async () => {
        let newValue = await getDetail({ rowId: rowData.id });
        if (newValue) {
            newValue = formatter ? formatter(newValue) : newValue;
            setValue(newValue);
        }
    };

    if (origin === 'detailForm') {
        return <div className={classNames(styles.text, className)}>{value}</div>;
    }

    if (typeof value === 'string') {
        return (
            <div className={styles.container} ref={container}>
                {dotVisible ? (
                    <Tooltip
                    overlayClassName={styles.tooltip}
                        title={
                            <div className={styles.tooltipTitle}>
                                {value}
                                {value.length === cutLength && <span className={styles.more} onClick={getMore}>查看更多</span>}
                            </div>
                        }
                    >
                        <div className={classNames(styles.text, className)}>{value}</div>
                    </Tooltip>
                ) : (
                    <div className={classNames(styles.text, className)}>{value}</div>
                )}
                <div className={styles.itemBgTxt} ref={dom}>
                    {value}
                </div>
            </div>
        );
    }
    return '数据错误';
};