system-copyright-react/src/components/ai/text/AiHelperText.tsx

import {
    Button,
    //  Divider, Empty, Space
} from "antd";
import './ai-helper-text.css'
import TextArea from "antd/es/input/TextArea";
import { useEffect, useState } from "react";
// import { CheckOutlined, EditOutlined, ReloadOutlined } from "@ant-design/icons";
import { get } from "../../../util/AjaxUtils.ts";
import { useParams } from "react-router-dom";
import noTextImg from '../../../static/noText.png'
import {
    message
} from "antd";
type PropsType = {
    title: string;
    maxLength: number;
    text: string;
    newText: string;
    handleGenerate: () => void;
    handleSave: (newText: string) => void;
}

export default function AiHelperText(props: PropsType) {
    const height = window.innerHeight - 265;
    const pathParams = useParams();
    const [status, setStatus] = useState('')

    useEffect(() => {
        get<any>({
            messageApi,
            url: `/api/proj/get/${pathParams.projId}`,
            onSuccess({ data }) {
                console.log('其他页面状态判断', data);
                setStatus(data.generate.generateStatus)
            }
        })

    }, [])

    const [messageApi] = message.useMessage();

    const [text, setText] = useState('');
    const [newText, setNewText] = useState('');
    const [isTextEdit, setIsTextEdit] = useState(false);
    // const [isNewTextEdit, setIsNewTextEdit] = useState(false);

    useEffect(() => {
        setText(props.text);
        setNewText(props.newText);
    }, [props.text, props.newText])

    // const renderTextBtn = () => {
    //     if (!newText) {
    //         if (!isTextEdit) {
    //             return (
    //                 <Space>
    //                     <Button type="link" style={{ cursor: 'pointer' }}
    //                         disabled={status == 'SUCCESS' || status == 'GENERATING' ? true : false}
    //                         onClick={() => {
    //                             props.handleGenerate();
    //                         }}>AI生成</Button>
    //                     {
    //                         text ? (
    //                             <Button type="link" style={{ cursor: 'pointer' }}
    //                                 disabled={status == 'SUCCESS' || status == 'GENERATING' ? true : false}
    //                                 onClick={() => {
    //                                     setIsTextEdit(true);
    //                                 }}><EditOutlined /> 编辑</Button>
    //                         ) : <></>
    //                     }
    //                 </Space>
    //             )
    //         }
    //         return (
    //             <Space>
    //                 <Button type="link" style={{ cursor: 'pointer' }} onClick={() => {
    //                     props.handleSave(text);
    //                     setIsTextEdit(false);
    //                 }}><CheckOutlined /> 保存结果</Button>
    //             </Space>
    //         )
    //     }
    //     if (!isNewTextEdit) {
    //         return (
    //             <Space>
    //                 <Button type="link" style={{ cursor: 'pointer' }} onClick={() => {
    //                     props.handleSave(newText);
    //                     setIsNewTextEdit(false);
    //                 }}><CheckOutlined /> 保存结果</Button>
    //                 <Button type="link" style={{ cursor: 'pointer' }} onClick={() => {
    //                     props.handleGenerate();
    //                 }}><ReloadOutlined /> 重新生成</Button>
    //                 <Button type="link" style={{ cursor: 'pointer' }} onClick={() => {
    //                     setIsNewTextEdit(true);
    //                 }}><EditOutlined /> 编辑</Button>
    //             </Space>
    //         )
    //     }
    //     return (
    //         <Space>
    //             <Button type="link" style={{ cursor: 'pointer' }} onClick={() => {
    //                 setIsNewTextEdit(false);
    //             }}><CheckOutlined /> 确定</Button>
    //         </Space>
    //     )
    // }

    // const renderTextDom = () => {
    //     if (!text) {
    //         return <Empty description="暂无内容" />
    //     }
    //     if (!isTextEdit) {
    //         return (<div>{text}</div>)
    //     }
    //     return (
    //         <TextArea autoSize={true} value={text} placeholder={`请编辑${props.title}`} maxLength={props.maxLength} onChange={(e) => {
    //             setText(e.currentTarget.value);
    //         }} />
    //     )
    // }
    const renderTextDom = () => {
        if (!text) {
            return (
                <div className="aiText-top-notext">
                    {/* <Empty description="暂无内容" /> */}
                    <div className="aiNotext">
                        <img src={noTextImg} alt="" width={'100%'} />
                        <div className="aiNotext-text">
                            暂无内容,点击
                            <span style={{ color: '#FF9D00', cursor: 'pointer' }}
                                onClick={() => {
                                    props.handleGenerate();
                                }}
                            >自动生成</span>
                        </div>
                    </div>

                </div>
            )
        }
        if (!isTextEdit) {
            return (
                <div className="aiText-top-text">
                    {text}
                </div>
            )
        }
        return (

            <TextArea style={{ height: ' 77%', resize: 'none', fontSize: 16, textIndent: 32 }} value={text} onChange={(e) => {
                setText(e.currentTarget.value);
            }}></TextArea>
        )
    }
    // const renderNewTextDom = () => {
    //     if (!newText) {
    //         return <></>
    //     }
    //     if (!isNewTextEdit) {
    //         return (
    //             <>
    //                 <Divider orientation="right" plain>新{props.title}</Divider>
    //                 <div>{newText}</div>
    //             </>
    //         )
    //     }
    //     return (
    //         <>
    //             <Divider orientation="right" plain>新{props.title}</Divider>
    //             <TextArea autoSize={true} value={newText} placeholder={`请编辑${props.title}`} maxLength={props.maxLength} onChange={(e) => {
    //                 setNewText(e.currentTarget.value);
    //             }} />
    //         </>
    //     )
    // }

    return (
        <>
            {/* <div style={{padding: '5px 0 0 0', fontWeight: 'bold'}}>{props.title}</div>
            <div style={{padding: '5px 0 0 0'}}>
                {newText ? <Divider orientation="right" plain>原{props.title}</Divider> : <></>}
                {renderTextDom()}
                {renderNewTextDom()}
            </div>
            <div style={{padding: '5px 0 0 0', textAlign: 'center'}}>
                {renderTextBtn()}
            </div> */}



            <div className="aiText" style={{ height: `${height}px` }}>
                <div className="aiText-top">
                    {renderTextDom()}
                    <div className="aiText-top-btn" style={{ display: text ? 'block' : 'none' }}>
                        <div style={{ display: "flex", justifyContent: 'flex-end' }}>
                            <Button disabled={status == 'SUCCESS' || status == 'GENERATING' ? true : false}

                                onClick={() => {
                                    setIsTextEdit(true);
                                }}>编辑</Button>
                            <Button
                                disabled={status == 'SUCCESS' || status == 'GENERATING' ? true : false}
                                // size="large"
                                style={{
                                    marginLeft: 15,

                                }}
                                type="primary" onClick={() => {
                                    props.handleSave(text);
                                    setIsTextEdit(false);
                                }}>保存</Button>
                        </div>
                    </div>
                </div>
                <div style={{height:42,background:" #EFEFEF"}}></div>
                <div className="aiText-bot">
                    <div className="aiText-bot-text">
                        {newText ? <>
                            {newText}
                        </> : <>

                            <span style={{
                                color: '#ABABAB',
                                fontSize: 16
                            }}> 点击AI自动生成后可自动生{props.title}...</span> </>}
                    </div>
                    <div style={{ display: "flex", justifyContent: 'flex-end', marginTop: 10 }}>
                        <Button
                            //  size="large"
                            style={{
                                width: 109,
                                display: newText ? 'block' : 'none'
                            }}
                            onClick={() => {
                                setText(newText)
                                // setNewText('')
                            }}
                        >确认使用</Button>
                        <Button
                            disabled={status == 'SUCCESS' || status == 'GENERATING' ? true : false}
                            // size="large" 
                            type="primary" style={{
                                width: 109,
                                marginLeft: 15,
                            }}
                            onClick={() => {
                                props.handleGenerate();
                            }}
                        >AI生成</Button>
                    </div>
                </div>
            </div>
        </>
    )

}