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

import './ai-helper-mod.css'
import {
    Button,
    //  Divider, Dropdown, Space, 
    Table, TableProps, Modal
} from "antd";
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;
}

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);

        setModArray(props.mods);
        setNewModArray(props.newMods);
    }, [props.mods, props.newMods]);
    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: 80,
            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 <Button onClick={() => {
                            props.handleResaveField(index, record.projModId);
                        }}><RedoOutlined /></Button>
                    }
                    return (
                        <div>
                            <span
                                style={{
                                    cursor: 'pointer'
                                }}
                                onClick={() => {
                                    setId(record.projModId)
                                    setEditModal(true)
                                }}
                            >编辑</span>
                            <span
                                style={{
                                    cursor: 'pointer',
                                    marginLeft: 19,
                                    color: '#FF4040'
                                }}
                                onClick={() => {
                                    props.handleRemove(index, record.projModId, record);
                                }}
                            >删除</span>
                        </div>

                        // <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 == '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={() => {
                            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' }}>
                            <img src={noTextImg} alt="" width={'100%'} />
                            <div style={{ position: 'absolute', left: 90, bottom: 100 }}>
                                暂无内容点击
                                <span style={{ color: '#FF9D00', cursor: 'pointer' }}
                                    onClick={() => {
                                        props.handleGenerate()
                                    }}
                                >自动生成</span>
                            </div>
                        </div>
                    </div>
                }

            </div>
            <div className="aiMod-center">

            </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' ? true : false}
                        onClick={() => {
                            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>
    )
}