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

/* eslint-disable @typescript-eslint/no-unused-vars */
import './card-proj.css';
import { useDispatch } from 'react-redux'
import {
    CheckOutlined,
    ClockCircleOutlined,
    CloseCircleOutlined,
    DownloadOutlined,
    EditOutlined,
    EyeOutlined,
    LoadingOutlined,
    SearchOutlined,
    WarningOutlined,
} from '@ant-design/icons';
import { Button, Tag, Modal, Carousel } from 'antd';
import { GenerateStatus } from "../../interfaces/proj/IProj.ts";
import { useNavigate } from "react-router-dom";
import { Axios, post, downloadUrl, get } from "../../util/AjaxUtils.ts";
import { useEffect, useState } from "react";
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 LoginPage from '../../components/LoginPage/LoginPage.tsx'
import LoginPage from '../../route/proj/edit/ProjConfigLoginpage.tsx'
// import LoginPageShow from '../../components/LoginPageShow/LoginPageShow.tsx'
import LoginPageShow from '../../route/proj/edit/ProjConfigLoginpageShow.tsx'

import SoftwareManagement from '../../route/proj/edit/ProjConfigModList.tsx'
import SoftwareManagementShow from '../../route/proj/edit/ProjConfigModListShow.tsx'
import DisplayOrder from '../../route/proj/edit/ProjConfigMenuList.tsx'
import DisplayOrderShow from '../../route/proj/edit/ProjConfigMenuListShow.tsx'
export default function CardProj(props: any) {
    const height = window.innerHeight - 250;
    // 下载等待弹窗
    const [downModal,setDownModal] = useState(false)
    // 是否已经点击下载按钮
    const [hasDown,setHasDown] = useState(false)
    // // 选项数组
    // const [tagArray, setTagArray] = useState([])
    // // 获取标签
    // const getTag = () => {
    //     get({
    //         messageApi,
    //         url: `/api/proj/tag/list-tag`,
    //         onBefore() {

    //         },
    //         onSuccess(data: any) {
    //             // console.log('标签信息', data);
    //             const newarrty: any = (data.data).map((item: any) => ({
    //                 value: item.key,
    //                 label: item.value
    //             }));
    //             // console.log('标签信息', newarrty);

    //             setTagArray(newarrty)

    //         },
    //         onFinally() {

    //         }
    //     })
    // }
    const data = props.item;
    // data.generate.generateStatus == GenerateStatus.SUCCESS ?'查看':'编辑'

    const [tagIdArray, setTagIdArray] = useState(data.tagDataIds)
    // 动态显示标签状态
    // const [tagStatus, setTagStatus] = useState('')
    // const downAll = (projId: string) => {
    //     get({
    //         messageApi,
    //         url: `${Axios.defaults?.baseURL}/route/proj/download/all/${projId}`,
    //         onBefore() {
    //             console.log('正在打包')
    //         },
    //         onSuccess(data: any) {
    //             console.log(data)
                
    //         },
    //         onFinally() {

    //         }
    //     })
    // }
    const downAll = async (projId: string,name:string) => {
        setHasDown(true)
        if(!hasDown){
           
            try {
                setDownModal(true)
                setHasDown(true)
                // 发送请求
                const response = await Axios.get(
                    `${Axios.defaults?.baseURL}/route/proj/download/all/${projId}`,
                    {
                        responseType: 'blob', // 设置响应类型为 blob
                        headers: {
                            'Content-Type': 'application/octet-stream',
                        },
                    }
                );
        
                // 检查状态码
                if (response.status === 200) {
                    setDownModal(false)
                    // 创建 Blob 对象
                    const blob = new Blob([response.data], { type: response.headers['content-type'] });
                    // 创建下载链接
                    const url = window.URL.createObjectURL(blob);
                    // 创建一个临时的 <a> 元素
                    const link = document.createElement('a');
                    link.href = url;
                    link.setAttribute('download', `${name}全部资料.zip`); // 设置下载文件的名称
                    document.body.appendChild(link);
                    link.click(); // 触发下载
                    document.body.removeChild(link); // 下载完成后移除 <a> 元素
                    // 释放 URL 对象
                    window.URL.revokeObjectURL(url);
                } else {
                    console.error('下载失败');
                    // 你可以在这里处理错误情况，例如显示错误消息
                }
            } catch (error) {
                console.error('请求失败', error);
                // 你可以在这里处理错误情况，例如显示错误消息
            }finally {
                // 无论请求成功与否，下载完成后都重置 hasDown 状态
                setHasDown(false);
                setDownModal(false); // 关闭模态框
            }
        }else{
            setDownModal(true);
        }
        
      
    };
    // 更新标签状态
    const upTag = (dataId: string, projId: string) => {
        post<any>({
            messageApi,
            url: `/api/proj/tag/save-or-delete`,
            body: {
                dataId,
                projId
            },
            onBefore() {

            },
            onSuccess(data) {
                // console.log(data.data.data);
                //   props.upData
                // props.updata()
                // setTagStatus(data.data.data)
                // 根据返回的状态更新 tagIdArray
                if (data.data.data === 'SAVE') {
                    setTagIdArray((prevArray: any) => [...prevArray, dataId]);
                } else if (data.data.data === 'DELETE') {
                    setTagIdArray((prevArray: any[]) => prevArray.filter(id => id !== dataId));
                }

            },
            onFinally() {

            }
        })
    }
    // 更改data加入数组
    // const upData = (tagId:string) => {
    //     if(tagStatus=='SAVE'){
    //         setTagIdArray(tagIdArray.push(tagId))
    //     }
    // }
    // 第四步 登陆页面设置
    const [loginPageOpne, setLoginPageOpne] = useState(false)
    const [loginPageShowOpne, setLoginPageShowOpne] = useState(false)
    const nav = useNavigate();

    // 第五步 软件功能管理
    const [softwareManagementOpen, setSoftwareManagementOpen] = useState(false)
    const [softwareManagementShowOpen, setSoftwareManagementShowOpen] = useState(false)
    // const [showZpi,setShowZpi] = useState(false)
    // 第六步 显示顺序
    const [displayOrderOpen, setDisplayOrderOpen] = useState(false)
    const [displayOrderShowOpen, setDisplayOrderShowOpen] = useState(false)


    const pkg = data.pay.chargeAdditionals.match(/PKG:(\d+)/);
    const video = data.pay.chargeAdditionals.match(/VIDEO_DEMO:(\d+)/);
    const URGENT = data.pay.chargeAdditionals.match(/URGENT:(\d+)/);
    // 基础服务费
    // const basics = data.pay.charge.match(/:(\d+)/);

    const pkgValue: number | null = pkg ? parseInt(pkg[1], 10) / 100 : null;
    const videoDemoValue: number | null = video ? parseInt(video[1], 10) / 100 : null;
    const URGENTvalue: number | null = URGENT ? parseInt(URGENT[1], 10) / 100 : null;
    // const basicsValue: number | null = basics ? parseInt(basics[1], 10)/100 : null;
    const [projId] = useState(data.projId)
    // 修改
    const isShow = data.pay.chargeAdditionals.includes('PKG') || data.pay.chargeType == 'ALL'


    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 dispath = useDispatch()
    const goEdit = () => {
        if (data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' || data.pay.payStatus == 'CORRECTION2_REFUND' || data.pay.payStatus == 'CORRECTION1_REFUND') {
            if (data.pay.chargeType == 'ALL') {
                nav(`/proj-eall/${data.projId}`);
                dispath({
                    type: 'upProjName',
                    val: data.projName
                })
                dispath({
                    type: 'upProjStatus',
                    val: data.generate.generateStatus == GenerateStatus.SUCCESS ? '查看' : '编辑'
                })
            } else if (data.pay.chargeType == 'FREE') {
                nav(`/proj-efree/${data.projId}`);
                dispath({
                    type: 'upProjName',
                    val: data.projName
                })
                dispath({
                    type: 'upProjStatus',
                    val: data.generate.generateStatus == GenerateStatus.SUCCESS ? '查看' : '编辑'
                })
            } else {
                nav(`/proj-edit/${data.projId}`);
                dispath({
                    type: 'upProjName',
                    val: data.projName
                })
                dispath({
                    type: 'upProjStatus',
                    val: data.generate.generateStatus == GenerateStatus.SUCCESS ? '查看' : '编辑'
                })
            }
        }

    }

    useEffect(() => {
        // 修改
        // const charge = props.item.pay.charge.split(':')[0];
        let chargeName = '';
        if (data.pay.chargeType == 'ALL') {
            chargeName = '全托管';
        } else if (data.pay.chargeType == 'MATERIAL_AGENT') {
            chargeName = '写材料+代理';
        } else if (data.pay.chargeType == 'MATERIAL_AGENT_URGENT') {
            chargeName = '写材料+代理(加急)';
        } else if (data.pay.chargeType == 'MATERIAL') {
            chargeName = '写材料';
        } else {
            chargeName = '免费试用';
        }
        // data.pay.chargeType
        // setCharge(charge)
        setPayCharge(chargeName);
        // console.log('额外收费安装包',pkgValue);
        // console.log('额外收费视频',videoDemoValue);
        // console.log('额外收费加急',URGENTvalue);
        // console.log('基础服务费',basicsValue);
        // getTag()
        // console.log('查看数据', data);
        // console.log('查看状态', data.pay.payStatus);

    }, [])

    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'
                            style={{
                                background: payCharge == '全托管' ? '#6bd2b4' : payCharge == '免费试用' ? '#ff9226' : payCharge == '写材料' ? '#5279f4' : '', color: '#fff',
                                display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? 'unset' : 'none'
                            }}>
                            {payCharge}
                        </div>
                        <div className='cp-tag'
                            style={{
                                background: '#8a8a8a', color: '#fff',
                                display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? 'none' : 'unset'
                            }}>
                            {payCharge}
                        </div>
                        <div className='cp-num'>
                            编号：{data.projContext}
                        </div>
                        <div className='cp-smallLine'>
                        </div>
                        <div className='cp-time'>
                            {data.gmtCreate}
                        </div>
                        {props.tagArray.map((item: any) => {
                            return (

                                <div className='proj-progress' key={item.value} style={{
                                    background: tagIdArray.includes(item.value) ? '#ff7b00' : '',
                                    color: tagIdArray.includes(item.value) ? '#ffffff' : '#5a5a5a',
                                    border: tagIdArray.includes(item.value) ? ' 1px solid #ff7b00' : ' 1px solid #5a5a5a',
                                    // display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? 'block' : 'none'
                                }}
                                    onClick={() => {

                                        upTag(item.value, data.projId)
                                        // upData(item.value)
                                        // props.updata()
                                    }}
                                >
                                    {item.label}
                                </div>

                            )
                        })}


                    </div>




                    {/* <div style={{ display: payCharge !== '全托管' ? 'block' : 'none' }}>
                        <div className='proj-progress' style={{display:data.progress?'block':'none'}}>

                            {data.progress == 'DONE' ? '已完成' : data.progress == 'SUBMIT_FOR_REVIEW' ? '已提交版权中心' : data.progress == 'PRODUCTION' ? '正在制作中' : '等待制作中'}

                        </div>
                    </div> */}
                    <div className='cpt-right' style={{ display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' || data.pay.payStatus == 'CORRECTION2_REFUND' || data.pay.payStatus == 'CORRECTION1_REFUND' ? 'block' : 'none' }}>

                        {
                            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' style={{ display: data.projStatus == 'EXPIRED' || data.pay.payStatus == 'CORRECTION2_REFUND' ? 'none' : 'unset' }}>|</span>
                        <span className="cpt-text-btn" style={{ display: data.projStatus == 'EXPIRED' || data.pay.payStatus == 'CORRECTION2_REFUND' ? 'none' : 'unset' }}>
                            <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'>
                        {/* lyp */}
                        <div className='cpb-left-img' >
                            <Carousel autoplay dots={false}>

                                <div className='cpb-left-imgX'>
                                    <img src={downloadUrl(data.loginpage.loginpagePreviewImgs, false)} height={'143px'} alt="" />

                                </div>
                                <div className='cpb-left-imgX'>

                                    <img src={downloadUrl(data.codeTypePage.previewImgs, false)} height={'143px'} alt="" />

                                </div>

                            </Carousel>
                            <div className='payStatus' style={{ background: data.pay.payStatus == 'UNPAID' ? '#E85454 ' : data.pay.payStatus == 'PAID' ? '#40BF76' : data.pay.payStatus == 'ARREARS' ? '#FFA200' : data.pay.payStatus == 'FULL_REFUND' ? '#C9C9C9' : data.pay.payStatus == 'CORRECTION1_REFUND' ? '#99B5BD' : data.pay.payStatus == 'CORRECTION2_REFUND' ? '#99A3BD' : '' }}>
                                {data.pay.payStatus == 'UNPAID' ? '未付款' : data.pay.payStatus == 'PAID' ? '已付款' : data.pay.payStatus == 'ARREARS' ? '欠费' : data.pay.payStatus == 'FULL_REFUND' ? '全额退款' : data.pay.payStatus == 'CORRECTION1_REFUND' ? '补正1次退款' : data.pay.payStatus == 'CORRECTION2_REFUND' ? '补正2次退款' : ''}
                            </div>
                        </div>
                        {/* <img src={downloadUrl(data.codeTypePage.previewImgs)} className='cpb-left-img' alt="" /> */}
                        <div className='cpbl-right'>
                            <div style={{ display: 'flex' }}>
                                <div className='cpbl-money'
                                    style={{ background: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? '#f7edce' : '#ebebeb' }}
                                >
                                    <div className='money'
                                        style={{ color: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? '#FF5D15' : '#8a8a8a' }}

                                    >金额(￥) : </div>
                                    <div className='num'
                                        style={{ color: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? '#FF5D15' : '#8a8a8a' }}

                                    >
                                        {data.pay.payment / 100}
                                    </div>
                                    <div className='coupon-num' style={{ display: data.pay.couponAmount ? 'unset' : 'none', color: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? '#FF5D15' : '#8a8a8a' }}>(已优惠{data.pay.couponAmount / 100}元)</div>
                                </div>
                                <div className='otherMoney'>
                                    {/* <div>基础费用:{basicsValue}</div> */}
                                    <Tag color="#f50" style={{ display: URGENTvalue ? 'block' : 'none' }}>加急:{URGENTvalue}</Tag>
                                    <Tag color="#2db7f5" style={{ display: pkgValue ? 'block' : 'none' }}>安装包:{pkgValue}</Tag>
                                    <Tag color="#87d068" style={{ display: videoDemoValue ? 'block' : 'none' }}>演示视频:{videoDemoValue}</Tag>
                                </div>
                            </div>
                            <div style={{ display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? 'block' : 'none' }}>
                                <div className='cpbl-btn'>
                                    <div className='threeBtn' onClick={() => {
                                        if (data.generate.generateStatus == GenerateStatus.SUCCESS || payCharge == '全托管') {
                                            // nav(`/proj-edit/config-loginpage-show/${data.projId}`)
                                            setLoginPageShowOpne(true);

                                        } else {
                                            // nav(`/proj-edit/config-loginpage/${data.projId}`)
                                            setLoginPageOpne(true)
                                        }
                                    }}>
                                        <img src={setImg} alt="" />
                                        <div>登录界面设置</div>
                                    </div>
                                    <div className='threeBtn' onClick={() => {
                                        if (data.generate.generateStatus == GenerateStatus.SUCCESS || payCharge == '全托管') {
                                            // nav(`/proj-edit/config-mod-list-show/${data.projId}`)
                                            setSoftwareManagementShowOpen(true)
                                        } else {
                                            setSoftwareManagementOpen(true)
                                            // 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 || payCharge == '全托管') {
                                            // nav(`/proj-edit/config-menu-list-show/${data.projId}`)
                                            setDisplayOrderShowOpen(true);
                                        } else {
                                            // nav(`/proj-edit/config-menu-list/${data.projId}`)
                                            setDisplayOrderOpen(true);


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

                        </div>

                    </div>
                    <div className='cline'></div>
                    <div className='cpb-center'  >
                        <div style={{ fontSize: 16, fontWeight: 500, color: data.projStatus == 'REFUND_APPLYING' ? '' : data.projStatus == 'CLOSE' ? '#73A350 ' : data.projStatus == 'EXPIRED' ? '#FFB667 ' : '' }}>
                            {data.projStatus == 'REFUND_APPLYING' ? '退款申请中' : data.projStatus == 'CLOSE' ? '该项目已关闭' : data.projStatus == 'EXPIRED' ? '该项目已过期' : ''}
                        </div>
                        <div className='cpbc-top' style={{ display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' || data.pay.payStatus == 'CORRECTION2_REFUND' || data.pay.payStatus == 'CORRECTION1_REFUND' ? 'block' : 'none' }}>
                            {
                                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> */}
                                        <div className='downloadBox'>
                                            <div className='down-title'>
                                                <DownloadOutlined /> 操作手册
                                            </div>
                                            <div className='down-bot'>
                                                <Button size="small" type="text" onClick={() => {
                                                    window.open(`${Axios.defaults?.baseURL}/route/proj/download/manual/${data.projId}`)
                                                }}> word</Button>
                                                <Button size="small" type="text"
                                                    className='down-pdf'
                                                    onClick={() => {
                                                        window.open(`${Axios.defaults?.baseURL}/route/proj/download/manual/pdf/${data.projId}`)
                                                    }}> pdf</Button>
                                            </div>
                                        </div>
                                        {
                                            isShow && <Button className='zpibtn' 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 className='downloadBox'>
                                            <div className='down-title'>
                                                <DownloadOutlined /> 源代码
                                            </div>
                                            <div className='down-bot'>
                                                <Button size="small" type="text" onClick={() => {
                                                    window.open(`${Axios.defaults?.baseURL}/route/proj/download/code/${data.projId}`)
                                                }}> word</Button>
                                                <Button size="small"
                                                    className='down-pdf'
                                                    type="text" onClick={() => {
                                                        window.open(`${Axios.defaults?.baseURL}/route/proj/download/code/pdf/${data.projId}`)
                                                    }}> pdf</Button>
                                            </div>
                                        </div>
                                        <Button size="small" type="text" onClick={() => {
                                            // window.open(`${Axios.defaults?.baseURL}/route/proj/download/all/${data.projId}`)
                                            downAll(data.projId,data.projName)
                                        }}><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 className='cpbc-bot' style={{ color: '#FFA415' }}>

                            产权所属者:{data.apply.authorName}
                        </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 >
            {/* 第四步 设置 */}
            < Modal open={loginPageOpne}
                title="登陆页面设置"
                width={1700}
                destroyOnClose={true}

                onCancel={() => {
                    setLoginPageOpne(false);
                    // window.location.reload(); // 在取消时刷新页面
                }
                }

                footer={null}
            >
                <LoginPage projId={projId} closeModal={() => { setLoginPageOpne(false) }}></LoginPage>
            </ Modal>
            {/* 第四步 查看 */}
            < Modal open={loginPageShowOpne}
                title="登陆页面查看"
                width={1700}
                destroyOnClose={true}

                onCancel={() => {
                    setLoginPageShowOpne(false);

                }}

                footer={null}
            >
                <LoginPageShow projId={projId}></LoginPageShow>
            </Modal >
            {/* 第五步 设置 */}
            < Modal open={softwareManagementOpen}
                title="软件功能管理设置"
                width={1500}
                destroyOnClose={true}

                onCancel={() => {
                    // props.upreqData()
                    setSoftwareManagementOpen(false);
                    // props.getreqData()
                    // window.location.reload(); // 在取消时刷新页面
                }}
                footer={null}
            >
                <SoftwareManagement projId={projId}></SoftwareManagement>
            </Modal >
            {/* 第五步 查看 */}
            < Modal open={softwareManagementShowOpen}
                title="软件功能管理查看"
                width={1500}
                destroyOnClose={true}

                onCancel={() => {
                    setSoftwareManagementShowOpen(false);
                }}
                footer={null}
            >
                <SoftwareManagementShow projId={projId}></SoftwareManagementShow>
            </Modal >
            {/* 第六步 设置 */}
            < Modal open={displayOrderOpen}
                title="设置功能列表显示顺序"
                width={1500}
                destroyOnClose={true}

                onCancel={() => {
                    // props.upreqData()
                    setDisplayOrderOpen(false);
                }}
                footer={null}
            >
                <DisplayOrder projId={projId}></DisplayOrder>
            </Modal >
            {/* 第六步 查看 */}
            < Modal open={displayOrderShowOpen}
                title="查看功能列表显示顺序"
                width={1500}
                destroyOnClose={true}

                onCancel={() => {
                    setDisplayOrderShowOpen(false);
                }}
                footer={null}
            >
                <DisplayOrderShow projId={projId}></DisplayOrderShow>
            </Modal >
            {messageContext}
            <Modal title="提示"
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    height: `${height}px`,
                }}
                destroyOnClose={true}
                open={downModal} 
                footer={
                    <Button 
                        type="primary" 
                        onClick={() => setDownModal(false)} 
                        // style={{ 
                        //     backgroundColor: '#ff4d4f', // 自定义背景颜色
                        //     borderColor: '#ff4d4f', // 自定义边框颜色
                        //     color: '#fff', // 自定义文字颜色
                        // }}
                    >
                        关闭
                    </Button>
                }
                 onCancel={() => { setDownModal(false) }} width={500} >
                <div style={{width:500}}>
                    正在打包中请稍后<span style={{marginLeft:10}}><LoadingOutlined /></span> 
                </div>
            </Modal>
        </>
    )
}