system-copyright-react/src/components/ai/mod/AiHelperMod.tsx

import './ai-helper-mod.css'
import {
    Button,
    //  Divider, Dropdown, Space, 
    Table, TableProps, Modal,
    // notification
} from "antd";
// const close = () => {
//     console.log(
//         'Notification was closed. Either the close button was clicked or duration time elapsed.',
//     );
// };
import {
    //  CheckOutlined,
    LoadingOutlined,
    //   ReloadOutlined,
    RedoOutlined
} from "@ant-design/icons";
import { useEffect, useState } from "react";
import { IProjMod } from "../../../interfaces/proj/IProj.ts";
import EditModal from '../../EditModal/EditModal.tsx'
import ConfigModModal from '../../ConfigModModal/ConfigModModal.tsx'
import { get } from "../../../util/AjaxUtils.ts";
import { useParams } from "react-router-dom";
import { SearchOutlined } from '@ant-design/icons';
import noTextImg from '../../../static/noText.png'
import {
    message
} from "antd";
type PropsType = {
    mods: IProjMod[];
    newMods: ProjModType[],
    handleGenerate: () => void;
    handleSave: (index: number, mod: ProjModType) => void;
    handleResaveField: (index: number, projModId: string) => void;
    handleRemove: (index: number, projModId: string, item: IProjMod) => void;
    handleEdit: (index: number, projModId: string, item: IProjMod) => void;
    setActiveTab: (key: string) => void;
    xixi: any;
    projIntroduction: string;
    isFast: boolean;
    setisFast: any;
    setIsProjModArrayLoading: any;
    chargeType: string;
    isDisabled?: boolean;
}

type ProjModType = {
    name: string,
    desc: string,
}

export default function AiHelperMod(props: PropsType) {
    const height = window.innerHeight - 265;
    // 菜单状态是否可以编辑
    const [messageApi] = message.useMessage();
    const [modArray, setModArray] = useState<IProjMod[]>([]);
    const [newModArray, setNewModArray] = useState<ProjModType[]>([]);
    const [id, setId] = useState('')

    const [configModal, setConfigModal] = useState(false)
    const [editModal, setEditModal] = useState(false)
    const [updata, setUpdata] = useState<any[]>([])
    const [status, setStatus] = useState('')

    // const [items, setItems] = useState<any[]>([])
    const pathParams = useParams();
    // useEffect(() => {
    //     // console.log('mods', props.mods);

    //     if( newModArray.length > 0){
    //         alert('请先保存')

    //     }
    // }, [modArray, newModArray]);
    // const key = `open${Date.now()}`;
    useEffect(() => {


        setModArray(props.mods);
        setNewModArray(props.newMods);
        get<any>({
            messageApi,
            url: `/api/proj/get/${pathParams.projId}`,
            onSuccess({ data }) {
                // console.log('其他页面状态判断', data);
                // setStatus(data.generate.generateStatus)
                if (data.aiSetting.modsStatus == 'GENERATING') {
                    // console.log('嘻嘻');
                    props.setIsProjModArrayLoading()

                }
            }
        })

    }, [props.mods, props.newMods]);
    // useEffect(() => {
    //     // console.log('mods', props.mods);
    //     if (newModArray.length > 0 && newModArray != props.newMods) {
    //         notification.open({
    //             message: '提示',
    //             description:
    //                 `功能列表已生成完毕,是否前去查看？`,
    //             btn: (
    //                 <div>
    //                     <Button size="small" type="primary" onClick={() => {
    //                         notification.destroy(key)
    //                         props.setActiveTab('模块')
    //                     }}>
    //                         确定
    //                     </Button>
    //                 </div>

    //             ),
    //             key,
    //             onClose: close,
    //             duration: null,
    //             placement: 'bottomRight', // 设置通知框显示在右下角
    //             style: {
    //                 width: 300, // 设置通知框的宽度
    //                 height: 150, // 设置通知框的高度
    //             },

    //         });
    //     }

    // }, [newModArray]);

    useEffect(() => {
        if (updata.length != 0) {
            // console.log('更新数据', updata);
            setModArray(updata)
        }

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

    }, [])
    const returnValue = (value: string) => {
        // 如果value包含. / \ ` ! @ # $ % ^ & * ( ) 等特殊符号 去掉
        // return value.replace(/[\\/:*?"<>|]/g, '');
        return value.replace(/[./\\`!@#$%^&*()]/g, '');
    }
    const modColumnArray: TableProps<IProjMod>['columns'] = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 60,
            align: 'center',
            render: (_value, _record, index) => {
                return index + 1
            }
        },
        {
            title: '模块名称', dataIndex: 'modName', key: 'name', width: 200, align: 'center',
            render: (value) => {
                return (
                    <div>
                        {returnValue(value)}
                    </div>
                )
            }
        },
        { title: '模块描述', dataIndex: 'modDesc', key: 'desc', align: 'center' },
        {
            title: 'AI状态',
            dataIndex: 'aiFieldStatus',
            key: 'desc',
            width: 100,
            align: 'center',
            render: (value) => {
                if (value == 'GENERATING') {
                    return '处理中'
                }
                if (value == 'FAILED') {
                    return (
                        <span style={{ color: '#FF4040 ' }}>失败</span>
                    )
                }
                if (value == 'SUCCESS') {
                    return <span style={{ color: '#00A351' }}>成功</span>
                }
            }
        },
        {
            title: '操作',
            dataIndex: 'option',
            key: 'option',
            width: 100,
            align: 'center',
            render: (_value, record, index) => {
                if (status == 'SUCCESS') {
                    return (
                        <Button icon={<SearchOutlined />} onClick={() => {
                            setId(record.projModId)
                            setConfigModal(true)
                        }}></Button>
                    )
                } else if (status == 'GENERATING') {
                    return (
                        <LoadingOutlined />
                    )
                }

                else {
                    if (record.aiFieldStatus == 'GENERATING') {
                        return <LoadingOutlined />
                    }
                    if (record.aiFieldStatus == 'FAILED') {
                        return (
                            <div style={{
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                // 禁止换行
                                whiteSpace: 'nowrap',

                            }}>
                                <div
                                    style={{
                                        cursor: 'pointer',
                                        // background: 'pink',
                                        width: 40,
                                    }}
                                    onClick={() => {
                                        props.handleResaveField(index, record.projModId);
                                    }}><RedoOutlined /></div>
                                <div
                                    style={{
                                        cursor: 'pointer',
                                        marginLeft: 5,
                                        color: '#FF4040',
                                        width: 40,


                                    }}
                                    onClick={() => {
                                        props.handleRemove(index, record.projModId, record);
                                    }}
                                >删除</div>
                            </div>
                        )
                    }
                    return (
                        <div
                            style={{
                                whiteSpace: 'nowrap', display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',

                            }}
                        >
                            <div
                                style={{
                                    cursor: 'pointer',
                                    width: 40,
                                }}
                                onClick={() => {
                                    setId(record.projModId)
                                    setEditModal(true)
                                }}
                            >编辑</div>
                            <div
                                style={{
                                    cursor: 'pointer',
                                    marginLeft: 5,
                                    color: '#FF4040',
                                    width: 40,
                                }}
                                onClick={() => {
                                    props.handleRemove(index, record.projModId, record);
                                }}
                            >删除</div>
                        </div>


                    )
                }
                // if (record.aiFieldStatus == 'GENERATING') {
                //     return <LoadingOutlined />
                // }
                // if (record.aiFieldStatus == 'FAILED') {
                //     return <Button onClick={() => {
                //         props.handleResaveField(index, record.projModId);
                //     }}><RedoOutlined /></Button>
                // }
                // return (
                //     <Dropdown menu={{
                //         items: [
                //             {
                //                 key: 'edit',
                //                 label: '编辑',
                //                 onClick: () => {
                //                     // props.handleEdit(index, record.projModId, record);
                //                     setId(record.projModId)
                //                     setEditModal(true)
                //                 }
                //             }, {
                //                 key: 'remove',
                //                 label: '删除',
                //                 onClick: () => {
                //                     props.handleRemove(index, record.projModId, record);
                //                 }
                //             },
                //         ]
                //     }} placement="bottom" arrow>
                //         <Button>…</Button>
                //     </Dropdown>
                // )
                // if (record.aiFieldStatus == 'SUCCESS' || status == 'GENERATING') {
                //     return (
                //         <Dropdown menu={{
                //             items: [

                //             ]
                //         }} placement="bottom" arrow>
                //             <Button>…</Button>
                //         </Dropdown>
                //     )
                // }else{
                //     return(
                //         <Dropdown menu={{
                //             items: [
                //                 {
                //                     key: 'edit',
                //                     label: '编辑',
                //                     onClick: () => {
                //                         // props.handleEdit(index, record.projModId, record);
                //                         setId(record.projModId)
                //                         setEditModal(true)
                //                     }
                //                 }, {
                //                     key: 'remove',
                //                     label: '删除',
                //                     onClick: () => {
                //                         props.handleRemove(index, record.projModId, record);
                //                     }
                //                 },
                //             ]
                //         }} placement="bottom" arrow>
                //             <Button>…</Button>
                //         </Dropdown>
                //     )
                // }
            }
        },
    ];

    const newModColumnArray: TableProps<ProjModType>['columns'] = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 60,
            align: 'center',
            render: (_value, _record, index) => {
                return index + 1
            }
        },
        {
            title: '模块名称', dataIndex: 'name', key: 'name', width: 200, align: 'center',
            render: (value) => {
                return (
                    <div>
                        {returnValue(value)}
                    </div>
                )
            }
        },
        { title: '模块描述', dataIndex: 'desc', key: 'desc', align: 'center' },
        {
            title: '操作',
            dataIndex: 'option',
            key: 'option',
            width: 80,
            align: 'center',
            render: (_value, record, index) => {
                return (
                    // <Button onClick={() => {
                    //     props.handleSave(index, record);
                    // }}>
                    //   添加
                    // </Button>
                    <span style={{ cursor: 'pointer' }}
                        onClick={() => {
                            if (props.isDisabled) {
                                return
                            }else{
                                props.handleSave(index, record);
                            }
                            // props.handleSave(index, record);
                        }}
                    >
                        添加
                    </span>
                )
            }
        },
    ];

    return (
        // <>
        //     <div style={{ padding: '5px 0 0 0', fontWeight: 'bold' }}>模块管理</div>
        //     <div style={{ padding: '5px 0 0 0' }}>
        //         {newModArray.length > 0 ? <Divider orientation="right" plain>原模块</Divider> : <></>}
        //         <Table columns={modColumnArray} dataSource={modArray} size="small" bordered={true} scroll={{ y: 240 }}
        //             pagination={false} rowKey="projModId" />
        //         {
        //             newModArray.length > 0 ? (
        //                 <>
        //                     <Divider orientation="right" plain>新模块</Divider>
        //                     <Table columns={newModColumnArray} dataSource={newModArray} size="small" bordered={true}
        //                         scroll={{ y: 240 }} pagination={false} rowKey="id" />
        //                 </>
        //             ) : <></>
        //         }
        //     </div>
        //     <div style={{ padding: '5px 0 0 0', textAlign: 'center' }}>
        //         {
        //             newModArray.length > 0 ? (
        //                 <Space>
        //                     <Button type="link" style={{ cursor: 'pointer' }}
        //                         onClick={() => {
        //                             props.handleGenerate();
        //                         }}><ReloadOutlined /> 重新生成</Button>
        //                 </Space>
        //             ) : <Button type="link" disabled={status == 'SUCCESS' || status == 'GENERATING' ? true : false} style={{ cursor: 'pointer' }}
        //                 onClick={() => {
        //                     props.handleGenerate();
        //                 }}>AI生成</Button>
        //         }
        //     </div>
        //     <Modal title="编辑"
        //         destroyOnClose={true}

        //         open={editModal} footer={null} onCancel={() => { setEditModal(false) }} width={1200} >
        //         < EditModal id={id} onConfirm={() => setEditModal(false)} setUpdata={setUpdata} />
        //     </Modal>
        //     <Modal title="查看"
        //         destroyOnClose={true}

        //         open={configModal} footer={null} onCancel={() => { setConfigModal(false) }} width={1200} >
        //         <ConfigModModal id={id} onConfirm={() => setConfigModal(false)} ></ConfigModModal>
        //     </Modal>
        // </>

        <div style={{ height: `${height}px`, border: '1px solid  #D5D5D5', overflow: 'auto' }}>
            <div className="aiMod-top">
                {modArray.length > 0 ?
                    <>
                        <div className='aiMod-top-table' >
                            <Table columns={modColumnArray} dataSource={modArray} size="small" bordered={true}
                                pagination={false}
                                rowKey="projModId"
                            />
                        </div>
                        {/* <div className="aiMod-top-btn">
                            <Button type="primary"
                                style={{
                                    marginLeft: 15
                                }}
                            >保存</Button>
                        </div> */}
                    </>
                    :
                    <div style={{
                        display: 'flex',

                        alignItems: 'center',
                        justifyContent: 'center',
                        fontSize: '14px',

                    }}
                    >
                        <div style={{
                            width: 300, height: 300, marginTop: 10, position: 'relative',
                            // backgroundColor:'pink'
                        }}>
                            <img src={noTextImg} alt="" width={'100%'} />
                            <div style={{ position: 'absolute', left: 90, bottom: 100, color: '#99A5B7' }}>
                                <div>
                                    暂无内容,点击
                                    <span style={{ color: '#FF9D00', cursor: 'pointer' }}
                                        onClick={() => {
                                            props.setisFast()
                                            if (props.isFast) {
                                                return
                                            } else {
                                                if (props.projIntroduction) {
                                                    props.handleGenerate()
                                                } else {
                                                    props.xixi()
                                                }
                                            }


                                        }}
                                    >自动生成</span>

                                </div>
                            </div>
                            <div style={{ color: 'red', position: 'absolute', bottom: 70, textAlign: 'center', width: 600, left: -140 }}>为了合理生成功能列表，建议在系统简介生成完成后再生成功能列表</div>


                        </div>

                    </div>
                }

            </div>
            <div className="aiMod-center">
                <div style={{
                    height: 42, background: " #EFEFEF",
                    display: 'flex', justifyContent: 'center', alignItems: 'center',
                }}>
                    <div style={{
                        color: 'red',
                        fontSize: 14,
                        
                    }}>
                        {props.chargeType =='FREE'?'*功能列表数量为3~5个，如数量不满足请继续用AI生成':'*功能列表数量为10~15个，如数量不满足请继续用AI生成'}
                        {/* *功能列表数量为10~15个，如数量不满足请继续用AI生成 */}
                    </div>
                </div>
            </div>
            <div className="aiMod-bot">
                <div className='aiMod-bot-table'>
                    {newModArray.length > 0 ?

                        <div style={{
                            border: '1px solid  #f0f0f0',
                            borderRadius: '10px'
                        }}>
                            <Table columns={newModColumnArray} dataSource={newModArray} size="small" bordered={true}
                                pagination={false} rowKey="id" />
                        </div>
                        :
                        <>
                            <span style={{
                                color: '#ABABAB',
                                fontSize: 16
                            }}> 点击AI自动生成后可自动生成功能列表...</span>
                        </>}
                </div>

                <div className="aiMod-bot-btn">
                    <Button type="primary"
                        style={{
                            marginLeft: 15,
                            width: 109,
                        }}
                        disabled={status == 'SUCCESS' || status == 'GENERATING' || props.isFast ? true : false}
                        onClick={() => {
                            props.setisFast()
                            if (props.projIntroduction) {
                                props.handleGenerate()
                            } else {
                                props.xixi()
                            }
                            // props.handleGenerate()
                        }}
                    >AI生成</Button>
                </div>

            </div>
            <Modal title="编辑"
                destroyOnClose={true}
                open={editModal} footer={null} onCancel={() => { setEditModal(false) }} width={1200} >
                < EditModal id={id} onConfirm={() => setEditModal(false)} setUpdata={setUpdata} />
            </Modal>
            <Modal title="查看"
                destroyOnClose={true}
                open={configModal} footer={null} onCancel={() => { setConfigModal(false) }} width={1200} >
                <ConfigModModal id={id} onConfirm={() => setConfigModal(false)} ></ConfigModModal>
            </Modal>
        </div>
    )
}