system-copyright-react/src/components/card/CardProj.tsx

/* eslint-disable @typescript-eslint/no-unused-vars */
import './card-proj.css';
import {
    CheckOutlined,
    ClockCircleOutlined,
    CloseCircleOutlined,
    CreditCardOutlined, DeleteOutlined,
    DownloadOutlined, DownOutlined,
    EditOutlined,
    EyeOutlined,
    LoadingOutlined,
    SearchOutlined,
    SettingOutlined,
    WarningOutlined,
    FolderOutlined
} from '@ant-design/icons';
import { Button, ConfigProvider, Dropdown, Tag } from 'antd';
import { GenerateStatus, IProj, PayStatus, ProjChargeType } from "../../interfaces/proj/IProj.ts";
import { useNavigate } from "react-router-dom";
import { Axios, put } from "../../util/AjaxUtils.ts";
import { useContext, useEffect, useState } from "react";
import { IndexListContext } from "../../context/IndexListContext.ts";
import useMessage from "antd/es/message/useMessage";
import setImg from '../../static/right/set.png'
import orderImg from '../../static/right/order.png'
import menuImg from '../../static/right/menu.png'
import testImg from '../../static/test.jpg'
export default function CardProj(props: { item: IProj }) {
    const nav = useNavigate();
    // const [showZpi,setShowZpi] = useState(false)
    const data = props.item;
    const isShow = data.pay.chargeAdditionals.includes('PKG')
    
    const [messageApi, messageContext] = useMessage();
    const [projCategoryId, setProjCategoryId] = useState(data.projCategoryId);
    const [projCategoryName, setProjCategoryName] = useState(data.projCategoryName);
    const [charge, setCharge] = useState('');
    const [payCharge, setPayCharge] = useState('');
    const indexListContext = useContext(IndexListContext);

    /**
     * 生成状态
     */
    const renderGenerateStatus = () => {
        if (data.generate.generateStatus == GenerateStatus.PENDING) {
            return <Tag color="cyan"><ClockCircleOutlined /> 等待生成</Tag>
        }
        if (data.generate.generateStatus == GenerateStatus.GENERATING) {
            return <Tag color="magenta"><LoadingOutlined /> 正在生成</Tag>
        }
        if (data.generate.generateStatus == GenerateStatus.SUCCESS) {
            return <Tag color="green"><CheckOutlined /> 生成成功</Tag>
        }
        if (data.generate.generateStatus == GenerateStatus.FAILED) {
            return <Tag color="red"><WarningOutlined /> 生成失败</Tag>
        }
        if (data.generate.generateStatus == GenerateStatus.NONE) {
            return <Tag color="cyan">未生成</Tag>
        }
        return <Tag color="red"><CloseCircleOutlined /> 错误</Tag>
    }

    const renderOption = () => {
        if (data.pay.payStatus == PayStatus.UNPAID) {
            return (
                <>
                    <div className="option">
                        <Button size="small" type="text"><CreditCardOutlined /> 待付款</Button>
                    </div>
                </>
            )
        }
        return (
            <>
                <div className="option">
                    <Button size="small" type="text" onClick={() => {
                        if (data.generate.generateStatus == GenerateStatus.SUCCESS) {
                            nav(`/proj-edit/config-loginpage-show/${data.projId}`)
                        } else {
                            nav(`/proj-edit/config-loginpage/${data.projId}`)
                        }
                    }}><SettingOutlined /> 登录界面设置</Button>
                    <Button size="small" type="text" onClick={() => {
                        if (data.generate.generateStatus == GenerateStatus.SUCCESS) {
                            nav(`/proj-edit/config-mod-list-show/${data.projId}`)
                        } else {
                            nav(`/proj-edit/config-mod-list/${data.projId}`)
                        }
                    }}><SettingOutlined /> 系统菜单管理({data.projModCount})</Button>
                    <Button size="small" type="text" onClick={() => {
                        if (data.generate.generateStatus == GenerateStatus.SUCCESS) {
                            nav(`/proj-edit/config-menu-list-show/${data.projId}`)
                        } else {
                            nav(`/proj-edit/config-menu-list/${data.projId}`)

                        }
                    }}><SettingOutlined /> 菜单排序({data.projModCount})</Button>
                </div>
                {
                    data.generate.generateStatus == GenerateStatus.SUCCESS ? (
                        <div className="option">
                            <Button size="small" type="text" onClick={() => {
                                window.open(`${Axios.defaults?.baseURL}/route/proj/download/apply/${data.projId}`)
                            }}><DownloadOutlined /> 申请表</Button>
                            <Button size="small" type="text" onClick={() => {
                                window.open(`${Axios.defaults?.baseURL}/route/proj/download/manual/${data.projId}`)
                            }}><DownloadOutlined /> 操作手册</Button>
                            <Button size="small" type="text" onClick={() => {
                                window.open(`${Axios.defaults?.baseURL}/route/proj/download/code-zip/${data.projId}`)
                            }}><DownloadOutlined /> 代码压缩包</Button>
                            <Button size="small" type="text" onClick={() => {
                                window.open(`${Axios.defaults?.baseURL}/route/proj/download/code/${data.projId}`)
                            }}><DownloadOutlined /> 代码文档</Button>
                        </div>
                    ) : <></>
                }
            </>
        )
    }

    const goEdit = () => {
        if (charge == ProjChargeType.ALL) {
            nav(`/proj-eall/${data.projId}`);
        } else if (charge == ProjChargeType.FREE) {
            nav(`/proj-efree/${data.projId}`);
        } else {
            nav(`/proj-edit/${data.projId}`);
        }
    }

    useEffect(() => {
        const charge = props.item.pay.charge.split(':')[0];
        let chargeName = '';
        if (charge == ProjChargeType.ALL) {
            chargeName = '全托管';
        } else if (charge == ProjChargeType.MATERIAL_AGENT) {
            chargeName = '写材料+代理';
        } else if (charge == ProjChargeType.MATERIAL_AGENT_URGENT) {
            chargeName = '写材料+代理(加急)';
        } else if (charge == ProjChargeType.MATERIAL) {
            chargeName = '写材料';
        } else {
            chargeName = '免费试用';
        }
        setCharge(charge)
        setPayCharge(chargeName);
    }, [])

    return (
        <>
            <div className="card-proj">
                <div className='cp-top'>
                    <div className='cpt-left'>
                        <div className='dottedLine'></div>
                        <div className='cpt-title' onClick={goEdit}>{data.projName}</div>
                        <div className='cp-tag'>
                            {payCharge}
                        </div>
                        <div className='cp-num'>
                            编号：{data.projContext}
                        </div>
                        <div className='cp-smallLine'>
                        </div>
                        <div className='cp-time'>
                            {data.gmtCreate}
                        </div>
                    </div>
                    <div className='cpt-right'>
                        {
                            data.generate.generateStatus == GenerateStatus.SUCCESS ? (
                                <span className="cpt-text-btn">
                                    <SearchOutlined />
                                    <span className='text-btn' onClick={goEdit}>查看</span>
                                </span>
                            ) : (
                                <span className="cpt-text-btn">
                                    <EditOutlined />
                                    <span className='text-btn' onClick={goEdit}>编辑</span>
                                </span>
                            )
                        }
                        <span className='orignLine'>|</span>
                        <span className="cpt-text-btn">
                            <EyeOutlined />
                            <span className='text-btn' onClick={() => {
                                window.open(`${Axios.defaults?.baseURL}/${data.previewUrl}`, '_blank')
                            }}>预览</span>
                        </span>

                    </div>
                </div>
                <div className='cp-bot'>
                    <div className='cpb-left'>
                        <img src={data.img} className='cpb-left-img' alt="" />
                        <div className='cpbl-right'>
                            <div className='cpbl-money'>
                                <span className='money'>金额(￥) : </span>
                                <span className='num'>{data.pay.payment / 100}</span>
                            </div>
                            <div className='cpbl-btn'>
                                <div className='threeBtn' onClick={() => {
                                    if (data.generate.generateStatus == GenerateStatus.SUCCESS) {
                                        nav(`/proj-edit/config-loginpage-show/${data.projId}`)
                                    } else {
                                        nav(`/proj-edit/config-loginpage/${data.projId}`)
                                    }
                                }}>
                                    <img src={setImg} alt="" />
                                    <div>登录界面设置</div>
                                </div>
                                <div className='threeBtn' onClick={() => {
                                    if (data.generate.generateStatus == GenerateStatus.SUCCESS) {
                                        nav(`/proj-edit/config-mod-list-show/${data.projId}`)
                                    } else {
                                        nav(`/proj-edit/config-mod-list/${data.projId}`)
                                    }
                                }}>
                                    <img src={menuImg} alt="" />
                                    <div>系统菜单管理({data.projModCount})</div>
                                </div>
                                <div className='threeBtn rightBit' onClick={() => {
                                    if (data.generate.generateStatus == GenerateStatus.SUCCESS) {
                                        nav(`/proj-edit/config-menu-list-show/${data.projId}`)
                                    } else {
                                        nav(`/proj-edit/config-menu-list/${data.projId}`)

                                    }
                                }}>
                                    <img src={orderImg} alt="" />
                                    <div>菜单排序({data.projModCount})</div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div className='cline'></div>
                    <div className='cpb-center'>
                        <div className='cpbc-top'>
                            {
                                data.generate.generateStatus == GenerateStatus.SUCCESS ? (
                                    <div className="option">
                                        <Button size="small" type="text" onClick={() => {
                                            window.open(`${Axios.defaults?.baseURL}/route/proj/download/apply/${data.projId}`)
                                        }}><DownloadOutlined /> 申请表</Button>
                                        <Button size="small" type="text" onClick={() => {
                                            window.open(`${Axios.defaults?.baseURL}/route/proj/download/manual/${data.projId}`)
                                        }}><DownloadOutlined /> 操作手册</Button>
                                        {
                                            isShow && <Button size="small" type="text" onClick={() => {
                                                window.open(`${Axios.defaults?.baseURL}/route/proj/download/code-zip/${data.projId}`)
                                            }}><DownloadOutlined /> 代码压缩包</Button>
                                        }
                                        {/* <Button size="small" type="text" onClick={() => {
                                            window.open(`${Axios.defaults?.baseURL}/route/proj/download/code-zip/${data.projId}`)
                                        }}><DownloadOutlined /> 代码压缩包</Button> */}
                                        <Button size="small" type="text" onClick={() => {
                                            window.open(`${Axios.defaults?.baseURL}/route/proj/download/code/${data.projId}`)
                                        }}><DownloadOutlined /> 代码文档</Button>
                                    </div>
                                ) : <></>
                            }

                        </div>
                        <div className='cpbc-bot'>
                            <div>
                                <FolderOutlined />
                            </div>
                            {/* 层级 */}
                            <Dropdown menu={{
                                items: indexListContext.categorys,
                                onClick: (e) => {
                                    const span = e.domEvent.target as HTMLSpanElement;
                                    put<any>({
                                        messageApi,
                                        url: `/api/proj/update-category/${data.projId}/${e.key}`,
                                        onSuccess() {
                                            messageApi.success('修改成功');
                                            setProjCategoryId(e.key);
                                            setProjCategoryName(span.innerText);
                                        }
                                    });
                                }
                            }}>
                                <span>
                                    <span className="text-btn">{projCategoryId ? projCategoryName : '无目录'}</span>
                                    <DownOutlined />
                                </span>
                            </Dropdown>
                            {
                                projCategoryId ? (
                                    <DeleteOutlined title="移除目录" onClick={() => {
                                        put<any>({
                                            messageApi,
                                            url: `/api/proj/cancel-category/${data.projId}`,
                                            onSuccess() {
                                                messageApi.success('取消成功');
                                                setProjCategoryId('');
                                                setProjCategoryName('');
                                            }
                                        });
                                    }} />
                                ) : <></>
                            }
                        </div>
                    </div>
                    {/* <div className='cline'></div> */}
                    <div className='cpb-right'>
                        <div className='cpbr-top'>
                            -当前状态-
                        </div>
                        <div className='cpbr-bot'>
                            {renderGenerateStatus()}
                        </div>
                    </div>
                </div>


                {/* <div className="card-proj-title">
                    <div className='titleLift'>


                        <div className="left">
                            <div className='boxline'></div>
                            <span className="text-btn" onClick={goEdit}>{data.projName}</span>
                        </div>
                        <div className="right">
                            <span className="context">编号：{data.projContext}</span>
                            <span className='line'></span>
                            <span className="date">{data.gmtCreate}</span> */}
                {/* 状态标签 */}
                {/* <span className="status">{renderGenerateStatus()}</span> */}
                {/* </div>
                    </div>
                    <div className="titleRight">
                        {
                            data.generate.generateStatus == GenerateStatus.SUCCESS ? (
                                <span>
                                    <SearchOutlined />
                                    <span className="text-btn" onClick={goEdit}>查看</span>
                                </span>
                            ) : (
                                <span>
                                    <EditOutlined />
                                    <span className="text-btn" onClick={goEdit}>编辑</span>
                                </span>
                            )
                        }
                        <span className='orignLine'>|</span>
                        <span>
                            <EyeOutlined />
                            <span className="text-btn" onClick={() => {
                                window.open(`${Axios.defaults?.baseURL}/${data.previewUrl}`, '_blank')
                            }}>预览</span>
                        </span>
                    </div>
                </div> */}
                {/* <hr/> */}
                {/* <div className="body">
                    <div className="line">
                        <div className="left"> */}
                {/* <Tag color="magenta">{payCharge}</Tag> */}
                {/* 金额 */}
                {/* <Tag color="gold">￥{data.pay.payment / 100}</Tag> */}
                {/* </div> */}
                {/* <div className='centerl'>
                            <div className='c-top'>
                                <span className='money'>金额(￥) : </span>
                                <span className='num'>{data.pay.payment / 100}</span>
                            </div>
                            <div className='c-bot'>
                                <div className='set' onClick={() => {
                                    if (data.generate.generateStatus == GenerateStatus.SUCCESS) {
                                        nav(`/proj-edit/config-loginpage-show/${data.projId}`)
                                    } else {
                                        nav(`/proj-edit/config-loginpage/${data.projId}`)
                                    }
                                }}>
                                    <img src={setImg} alt="" />
                                    <div>登录界面设置</div>
                                </div>
                                <div className='set' onClick={() => {
                                    if (data.generate.generateStatus == GenerateStatus.SUCCESS) {
                                        nav(`/proj-edit/config-mod-list-show/${data.projId}`)
                                    } else {
                                        nav(`/proj-edit/config-mod-list/${data.projId}`)
                                    }
                                }}>
                                    <img src={menuImg} alt="" />
                                    <div>系统菜单管理({data.projModCount})</div>
                                </div>
                                <div className='set' onClick={() => {
                                    if (data.generate.generateStatus == GenerateStatus.SUCCESS) {
                                        nav(`/proj-edit/config-menu-list-show/${data.projId}`)
                                    } else {
                                        nav(`/proj-edit/config-menu-list/${data.projId}`)

                                    }
                                }}>
                                    <img src={orderImg} alt="" />
                                    <div>菜单排序({data.projModCount})</div>
                                </div>
                            </div>
                        </div> */}
                {/* 目录层级结构*/}
                {/* <div className='centerr'>

                        </div>
                        <div className='right'>
                            <div className='rigth-t'>
                                - 当前状态 -
                            </div>
                            <div className="status">{renderGenerateStatus()}</div>
                        </div> */}





                {/* <div className="right">
                        {
                                data.generate.generateStatus == GenerateStatus.SUCCESS ? (
                                    <span>
                                        <SearchOutlined/>
                                        <span className="text-btn" onClick={goEdit}>查看</span>
                                    </span>
                                ) : (
                                    <span>
                                        <EditOutlined/>
                                        <span className="text-btn" onClick={goEdit}>编辑</span>
                                    </span>
                                )
                            }
                            <span>
                                <EyeOutlined/>
                                <span className="text-btn" onClick={() => {
                                    window.open(`${Axios.defaults?.baseURL}/${data.previewUrl}`, '_blank')
                                }}>预览</span>
                            </span>
                        </div> */}
                {/* </div> */}
                {/* <div className="line">
                        <div className="left">
                            {
                                data.generate.generateStatus == GenerateStatus.SUCCESS ? (
                                    <span>
                                        <SearchOutlined/>
                                        <span className="text-btn" onClick={(e) => {
                                            e.preventDefault();
                                            nav(`/agent-select/${data.projId}`);
                                        }}>找代理</span>
                                    </span>
                                ) : <></>
                            }
                        </div>
                        <div className="right">
                            <Dropdown menu={{
                                items: indexListContext.categorys,
                                onClick: (e) => {
                                    const span = e.domEvent.target as HTMLSpanElement;
                                    put<any>({
                                        messageApi,
                                        url: `/api/proj/update-category/${data.projId}/${e.key}`,
                                        onSuccess() {
                                            messageApi.success('修改成功');
                                            setProjCategoryId(e.key);
                                            setProjCategoryName(span.innerText);
                                        }
                                    });
                                }
                            }}>
                                <span>
                                    <span className="text-btn">{projCategoryId ? projCategoryName : '无目录'}</span>
                                    <DownOutlined/>
                                </span>
                            </Dropdown>
                            {
                                projCategoryId ? (
                                    <DeleteOutlined title="移除目录" onClick={() => {
                                        put<any>({
                                            messageApi,
                                            url: `/api/proj/cancel-category/${data.projId}`,
                                            onSuccess() {
                                                messageApi.success('取消成功');
                                                setProjCategoryId('');
                                                setProjCategoryName('');
                                            }
                                        });
                                    }}/>
                                ) : <></>
                            }
                        </div>
                    </div> */}
                {/* </div> */}
                {/* <hr/> */}
                {/* <div className="foot">
                    <ConfigProvider theme={{
                        components: {
                            Button: {
                                contentFontSizeSM: 12,
                            }
                        }
                    }}>
                        {renderOption()}
                    </ConfigProvider>
                </div> */}
            </div>
            {messageContext}
        </>
    )
}