/* eslint-disable @typescript-eslint/no-unused-vars */
import './card-proj.css';
// import { useDispatch } from 'react-redux'
import { GlobalDispatchContext, reloadUser } from "../../context/GlobalContext.ts";
import {
    CheckOutlined,
    ClockCircleOutlined,
    CloseCircleOutlined,
    DownloadOutlined,
    EditOutlined,
    EyeOutlined,
    LoadingOutlined,
    SearchOutlined,
    WarningOutlined,
    RedoOutlined,
    CloseOutlined
} from '@ant-design/icons';
import { Button, Tag, Modal, Carousel, Dropdown } from 'antd';
import type { MenuProps } from 'antd';
import { GenerateStatus } from "../../interfaces/proj/IProj.ts";
import { useNavigate } from "react-router-dom";
import { Axios, post, downloadUrl, get, del } from "../../util/AjaxUtils.ts";
import { useEffect, useState, useContext } 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 globalDispatchContext = useContext(GlobalDispatchContext);
    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;
    // const [data, setData] = useState(props.item);
    // data.generate.generateStatus == GenerateStatus.SUCCESS ?'查看':'编辑'

    const [tagIdArray, setTagIdArray] = useState(data.tagDataIds)
    const [RemindIdArray, setRemindIdArray] = useState(data.projRemindIds)
    const [showBuyPic, setShowBuyPic] = useState(data.projPkg.payStatus == 'UNPAID' ? true : false) //显示购买安装包
    const [showBuyPicIng, setShowBuyPicIng] = useState(data.projPkg.pkgStatus == 'PKGING' ? true : false) //显示安装包正在打包
    const [showBuyPicAgain, setShowBuyPicAgain] = useState(data.projPkg.pkgStatus == 'SUCCESS') //显示重新购买安装包
    const [showBuyPicError, setShowBuyPicError] = useState(data.projPkg.pkgStatus == 'FAIL' ? true : false) //显示安装包打包失败
    const [showBuyVideo, setShowBuyVideo] = useState(data.projVideo.payStatus == 'UNPAID' ? true : false) //显示购买视频
    const [showBuyVideoIng, setShowBuyVideoIng] = useState(data.projVideo.videoStatus == 'PKGING' ? true : false) //显示视频正在打包
    const [showBuyVideoAgain, setShowBuyVideoAgain] = useState(data.projVideo.videoStatus == 'SUCCESS' ? true : false) //显示重新购买视频
    const [showBuyVideoError, setShowBuyVideoError] = useState(data.projVideo.videoStatus == 'FAIL' ? true : false) //显示视频打包失败
    // const [showBuyPic, setShowBuyPic] = useState(true) //显示购买安装包
    // const [showBuyPicIng, setShowBuyPicIng] = useState(false) //显示安装包正在打包
    // const [showBuyPicAgain, setShowBuyPicAgain] = useState(false) //显示重新购买安装包
    const [buyModalShow, setBuyModalShow] = useState(false) //显示购买安装包提示弹窗
    const [buyVideoModalShow, setBuyVideoModalShow] = useState(false) //显示购买视频提示弹窗
    // const [pkgPrice, setPkgPrice] = useState(0) //安装包价格
    // const [videoPrice, setVideoPrice] = useState(0) //视频价格
    // const getPrice = () => {
    //     get<any>({
    //         messageApi: messageApi,
    //         url: '/api/proj/charge/get',
    //         onSuccess({ data }) {
    //             console.log('获取价格', data.additional.pkg/100,data.additional.videoDemo/100);
    //             setPkgPrice(data.additional.pkg/100)
    //             setVideoPrice(data.additional.videoDemo/100)
    //         }
    //     })
    // }
    // 付款安装包
    const payPkg = () => {
        post<any>({
            messageApi,
            url: `/api/proj/pkg/save-pkg/proj-id/${projId}`,

            onBefore() {

            },
            onSuccess() {
                reloadUser(messageApi, globalDispatchContext).then(() => {
                    messageApi.success('扣款成功');
                    setShowBuyPic(false);
                    setShowBuyPicIng(true);
                    setBuyModalShow(false);
                    setShowBuyPicAgain(false)
                });

            },
            onFinally() {

            }
        })
    }
    // 重新打包安装包
    const againPkg = () => {
        post<any>({
            messageApi,
            url: `/api/proj/pkg/save-pkg/proj-id/${projId}`,

            onBefore() {

            },
            onSuccess() {
                messageApi.success('重新打包安装包');
                setShowBuyPic(false);
                setShowBuyPicIng(true);
                setBuyModalShow(false);
                setShowBuyPicAgain(false)
                setShowBuyPicError(false)
            },
            onFinally() {

            }
        })
    }
    // 付款视频
    const payVideo = () => {
        post<any>({
            messageApi,
            url: `/api/proj/video/save-pkg/proj-id/${projId}`,

            onBefore() {

            },
            onSuccess() {
                reloadUser(messageApi, globalDispatchContext).then(() => {
                    messageApi.success('扣款成功');
                    setShowBuyVideo(false);
                    setShowBuyVideoIng(true);
                    setBuyVideoModalShow(false);
                    setShowBuyVideoAgain(false)
                });

            },
            onFinally() {

            }
        })
    }
    // 重新打包视频
    const againVideo = () => {
        post<any>({
            messageApi,
            url: `/api/proj/video/save-pkg/proj-id/${projId}`,

            onBefore() {

            },
            onSuccess() {
                messageApi.success('重新打包演示视频');
                setShowBuyVideo(false);
                setShowBuyVideoIng(true);
                setBuyVideoModalShow(false);
                setShowBuyVideoAgain(false)
                setShowBuyVideoError(false)

            },
            onFinally() {

            }
        })
    }
    // 点击刷新页面数据获取安装包状态
    const upData = () => {
        get<any>({
            messageApi: messageApi,
            url: `api/proj/pkg/get/proj-id/${projId}`,
            onSuccess({ data }) {
                // console.log(data);
                if (data.pkgStatus == 'SUCCESS') {
                    messageApi.success('安装包生成完毕,请下载');
                    setShowBuyPicAgain(true)
                    setShowBuyPicIng(false)
                } else if (data.pkgStatus == 'FAIL') {
                    messageApi.error('安装包打包失败,点击重新打包');
                    setShowBuyPicError(true)
                    setShowBuyPicIng(false)
                } else {
                    messageApi.error('安装包正在生成,请稍后');
                }
            }
        })

    }
    // 点击刷新页面数据获取演示视频状态
    const upVideoData = () => {
        get<any>({
            messageApi: messageApi,
            url: `api/proj/video/get/proj-id/${projId}`,
            onSuccess({ data }) {
                // console.log(data);
                if (data.videoStatus == 'SUCCESS') {
                    messageApi.success('演示视频生成完毕,请下载');
                    setShowBuyVideoAgain(true)
                    setShowBuyVideoIng(false)
                } else if (data.videoStatus == 'FAIL') {
                    messageApi.error('演示视频打包失败,点击重新打包');
                    setShowBuyPicError(true)
                    setShowBuyVideoIng(false)
                } else {
                    messageApi.error('演示视频正在生成,请稍后');
                }
            }
        })

    }
    const downAll = (projId: string, name: string) => {
        setHasDown(true)
        if (!hasDown) {
            get({
                messageApi,
                url: `/route/proj/download/all/${projId}`,
                config: {
                    responseType: 'blob'  // 指定响应类型为 blob
                },
                onBefore() {
                    setDownModal(true); // 打开下载模态框
                    setHasDown(true);   // 设置正在下载状态
                },
                onSuccess(data: any) {
                    // 处理下载成功的逻辑
                    const blob = new Blob([data.data]); // 创建 Blob 对象
                    const url = window.URL.createObjectURL(blob); // 创建下载链接
                    const link = document.createElement('a'); // 创建临时的 <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);
                },
                onFinally() {
                    // 在请求完成后（成功或失败）都会执行
                    setHasDown(false); // 重置 hasDown 状态
                    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() {

            }
        })
    }
    // 保存提示标签
    const saveRemind = (projRemindId: string, projId: string) => {
        post<any>({
            messageApi,
            url: `/api/proj/remind/task/save`,
            body: {
                projRemindId,
                projId
            },
            onBefore() {

            },
            onSuccess() {

                setRemindIdArray((prevArray: any) => [...prevArray, projRemindId]);
            },
            onFinally() {

            }
        })
    }
    // 删除提示标签
    const deleteRemind = (projRemindId: string, projId: string) => {
        // setRemindIdArray((prevArray: any[]) => prevArray.filter(id => id !== projRemindId));

        del<any>({
            messageApi,
            url: `/api/proj/remind/task/delete/proj-id/${projId}/proj-remind-id/${projRemindId}`,
            onSuccess() {
                setRemindIdArray((prevArray: any[]) => prevArray.filter(id => id !== projRemindId));

            }
        })
    }
    // 更改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 ? '查看' : '编辑'
                // })
                sessionStorage.setItem('projName', data.projName);
                sessionStorage.setItem('projStatus', data.generate.generateStatus == GenerateStatus.SUCCESS ? '查看' : '编辑');
                // sessionStorage.setItem('projStatus',  '查看' );
            } 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 ? '查看' : '编辑'
                // })
                sessionStorage.setItem('projName', data.projName);
                sessionStorage.setItem('projStatus', 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 ? '查看' : '编辑'
                // })
                //将data.projName储存到缓sessionStorage存里面 key为projName
                sessionStorage.setItem('projName', data.projName);
                sessionStorage.setItem('projStatus', data.generate.generateStatus == GenerateStatus.SUCCESS ? '查看' : '编辑');


            }
        }

    }
    const applyItems: MenuProps['items'] = [
        {
            key: '1',
            label: (
                <div
                    onClick={() => {
                        window.open(`${Axios.defaults?.baseURL}/route/proj/download/apply/${data.projId}`)
                    }}
                    style={{ maxWidth: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}

                >
                    Word
                </div>

            ),
        },
        {
            key: '2',
            label: (
                <div
                    onClick={() => {
                        window.open(`${Axios.defaults?.baseURL}/route/proj/download/apply-txt/${data.projId}`)
                    }}
                    style={{ maxWidth: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}

                >
                    TxT
                </div>
            ),

        },


    ]
    const manualItems: MenuProps['items'] = [
        {
            key: '1',
            label: (
                <div
                    onClick={() => {
                        window.open(`${Axios.defaults?.baseURL}/route/proj/download/manual/${data.projId}`)
                    }}
                    style={{ maxWidth: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}

                >
                    Word
                </div>

            ),
        },
        {
            key: '2',
            label: (
                <div
                    onClick={() => {
                        window.open(`${Axios.defaults?.baseURL}/route/proj/download/manual/pdf/${data.projId}`)
                    }}
                    style={{ maxWidth: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}

                >
                    Pdf
                </div>
            ),

        },


    ]
    const codeItems: MenuProps['items'] = [
        {
            key: '1',
            label: (
                <div
                    onClick={() => {
                        window.open(`${Axios.defaults?.baseURL}/route/proj/download/code/${data.projId}`)
                    }}
                    style={{ maxWidth: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}

                >
                    Word
                </div>

            ),
        },
        {
            key: '2',
            label: (
                <div
                    onClick={() => {
                        window.open(`${Axios.defaults?.baseURL}/route/proj/download/code/pdf/${data.projId}`)
                    }}
                    style={{ maxWidth: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}

                >
                    Pdf
                </div>
            ),

        },


    ]
    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>
                        {/* 标签 */}
                        <div className='selectTagmax'>
                            {props.tagArray.map((item: any) => {
                                const [part1, part2] = item.value.split(':');
                                if (part2 == 'TAG_NOT') {
                                    return (
                                        // <div className='proj-progress' key={part1} style={{

                                        //     border: ' 1px dashed #5a5a5a',
                                        //     // display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? 'block' : 'none'
                                        //     marginBottom: 10,
                                        //     // 禁止换行
                                        //     textWrap: 'nowrap'
                                        // }}
                                        // >
                                        //     {item.label}
                                        //     {/* 提交版权中心 */}
                                        // </div>
                                        <div key={item.value}></div>
                                    );
                                } else {
                                    return (
                                        <div className='proj-progress' key={item.value} style={{
                                            background: tagIdArray.includes(part1) ? '#ff7b00' : '',
                                            color: tagIdArray.includes(part1) ? '#ffffff' : '#5a5a5a',
                                            border: tagIdArray.includes(part1) ? ' 1px solid #ff7b00' : ' 1px solid #5a5a5a',
                                            // display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? 'block' : 'none'
                                        }}
                                            onClick={() => {
                                                // console.log('查看数据', item.value);

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

                                    )
                                }

                            })}
                        </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" onClick={goEdit}>
                                    <SearchOutlined />
                                    <span className='text-btn' >查看</span>
                                </span>
                            ) : (
                                <span className="cpt-text-btn" onClick={goEdit}>
                                    <EditOutlined />
                                    <span className='text-btn' >编辑</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 onClick={() => {
                                window.open(`${Axios.defaults?.baseURL}/${data.previewUrl}`, '_blank')
                            }} />
                            <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} */}
                                        {data.pay.servicePackageId ? 0 : data.pay.payment / 100}

                                        {/* 2000.00 */}
                                    </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 className='cpbl-btn-box'>
                                <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 className='selectTagmin'

                                    style={{ marginLeft: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? 20 : 220, marginRight: 10 }}>
                                    {props.tagArray.map((item: any) => {
                                        const [part1, part2] = item.value.split(':');
                                        if (part2 == 'TAG_NOT') {
                                            return (
                                                // <div className='proj-progress' key={part1} style={{

                                                //     border: ' 1px dashed #5a5a5a',
                                                //     // display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? 'block' : 'none'
                                                //     marginBottom: 10,
                                                //     // 禁止换行
                                                //     textWrap: 'nowrap'
                                                // }}
                                                // >
                                                //     {item.label}
                                                //     {/* 提交版权中心 */}
                                                // </div>
                                                <div key={item.value}></div>
                                            );
                                        } else {
                                            return (
                                                <div className='proj-progress' key={item.value} style={{
                                                    background: tagIdArray.includes(part1) ? '#ff7b00' : '',
                                                    color: tagIdArray.includes(part1) ? '#ffffff' : '#5a5a5a',
                                                    border: tagIdArray.includes(part1) ? ' 1px solid #ff7b00' : ' 1px solid #5a5a5a',
                                                    // display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? 'block' : 'none'
                                                    marginBottom: 10,
                                                    // 禁止换行
                                                    textWrap: 'nowrap'
                                                }}
                                                    onClick={() => {
                                                        // console.log('查看数据', item.value);

                                                        upTag(part1, data.projId)
                                                        // upData(item.value)
                                                        // props.updata()
                                                    }}
                                                >
                                                    {item.label}
                                                    {/* 提交版权中心 */}
                                                </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> */}

                                        <Dropdown
                                            // menu={{
                                            //     applyItems
                                            // }} 
                                            menu={{ items: applyItems }}
                                        >
                                            <div
                                            ><Button size="small" type="text" ><DownloadOutlined /> 申请表</Button>


                                            </div>
                                        </Dropdown>

                                        {/* <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> */}
                                        <Dropdown
                                            // menu={{
                                            //     applyItems
                                            // }} 
                                            menu={{ items: manualItems }}
                                        >
                                            <div
                                            ><Button size="small" type="text" ><DownloadOutlined /> 操作手册</Button>


                                            </div>
                                        </Dropdown>
                                        {/* </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> */}
                                        <Dropdown
                                            // menu={{
                                            //     applyItems
                                            // }} 
                                            menu={{ items: codeItems }}
                                        >
                                            <div
                                            ><Button size="small" type="text" ><DownloadOutlined /> 源代码</Button>


                                            </div>
                                        </Dropdown>
                                        {/* </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>
                                        <Button style={{ display: showBuyPicAgain ? 'unset' : 'none' }} size="small" type="text" onClick={() => {
                                            window.open(`${Axios.defaults?.baseURL}/route/proj/download/pkg/${data.projId}`)
                                        }}><DownloadOutlined />
                                            <span style={{ marginLeft: 5 }}>安装包</span>
                                        </Button>
                                        <Button style={{ display: showBuyVideoAgain ? 'unset' : 'none' }} size="small" type="text" onClick={() => {
                                            window.open(`${Axios.defaults?.baseURL}/route/proj/download/video/${data.projId}`)
                                        }}><DownloadOutlined />
                                            <span style={{ marginLeft: 5 }}>演示视频</span>
                                        </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' }} title={data.apply.authorName}>

                            产权所属者:{data.apply.authorName}
                        </div>
                    </div>
                    {/* <div className='cline'></div> */}
                    <div className='cpb-right' style={{
                        paddingLeft: 5,
                        paddingRight: 5,
                    }}>
                        <div className='cpbr-top'>
                            -当前状态-
                        </div>
                        <div className='cpbr-bot'>
                            {renderGenerateStatus()}
                        </div>
                        <div style={{
                            display: data.generate.generateStatus == GenerateStatus.SUCCESS && payCharge !== '免费试用' ? 'unset' : 'none'
                        }}>
                            <div style={{ display: 'flex', flexDirection: 'column' }}>
                                <div className='buyBox buyBtn'
                                    style={{
                                        display: showBuyPic ? 'unset' : 'none'
                                    }}
                                    onClick={() => {
                                        setBuyModalShow(true);
                                    }}
                                >购买安装包</div>
                                <div className='buyBox buyIng'
                                    title='点击刷新状态'
                                    style={{
                                        display: showBuyPicIng ? 'unset' : 'none',
                                        cursor: 'pointer',
                                        // 禁止换行
                                        textWrap: 'nowrap'

                                    }}
                                    onClick={() => {
                                        upData()
                                    }}
                                >
                                    <span style={{ marginRight: 5 }}> 安装包制作中</span>
                                    <RedoOutlined spin /></div>
                                <div className='buyBox buyAgein'
                                    onClick={() => {
                                        setBuyModalShow(true);
                                    }}
                                    style={{
                                        display: showBuyPicAgain ? 'unset' : 'none'
                                    }}
                                >重新购买安装包</div>
                                <div className='buyBox buyAgein'
                                    title='安装包打包失败,点击重新打包'
                                    onClick={() => {
                                        // setBuyModalShow(true);
                                        againPkg()
                                    }}
                                    style={{
                                        display: showBuyPicError ? 'unset' : 'none',
                                        cursor: 'pointer',
                                        textWrap: 'nowrap'
                                    }}
                                >
                                    <span style={{ marginRight: 5 }}>安装包打包失败</span><CloseOutlined />
                                </div>
                            </div>
                            <div style={{ display: 'flex', flexDirection: 'column', marginTop: 5 }}>
                                <div className='buyBox buyBtn'
                                    style={{
                                        display: showBuyVideo ? 'unset' : 'none'
                                    }}
                                    onClick={() => {
                                        setBuyVideoModalShow(true);
                                    }}
                                >购买演示视频</div>
                                <div className='buyBox buyIng'
                                    title='点击刷新状态'
                                    style={{
                                        display: showBuyVideoIng ? 'unset' : 'none',
                                        cursor: 'pointer',
                                        // 禁止换行
                                        textWrap: 'nowrap'

                                    }}
                                    onClick={() => {
                                        // upData()
                                        upVideoData()
                                    }}
                                >
                                    <span style={{ marginRight: 5 }}> 演示视频制作中</span>
                                    <RedoOutlined spin /></div>
                                <div className='buyBox buyAgein'
                                    onClick={() => {
                                        setBuyVideoModalShow(true);
                                    }}
                                    style={{
                                        display: showBuyVideoAgain ? 'unset' : 'none'
                                    }}
                                >重新购买演示视频</div>
                                <div className='buyBox buyAgein'
                                    title='演示视频打包失败,点击重新打包'
                                    onClick={() => {
                                        // setBuyModalShow(true);
                                        // againPkg()
                                        againVideo()
                                    }}
                                    style={{
                                        display: showBuyVideoError ? 'unset' : 'none',
                                        cursor: 'pointer',
                                        textWrap: 'nowrap'
                                    }}
                                >
                                    <span style={{ marginRight: 5 }}>演示视频打包失败</span><CloseOutlined />
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
                <div style={{
                    display: props.remindTagArray.length > 0 ? 'unset' : 'none',
                }}>
                    <div className='promptTags' >

                        {/* {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',
                                }}
                                    onClick={() => {

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

                            )
                        })} */}
                        {props.remindTagArray.map((item: any) => {
                            return (

                                <div className='proj-progress' key={item.value} style={{
                                    background: RemindIdArray.includes(item.value) ? '#ff7b00' : '',
                                    color: RemindIdArray.includes(item.value) ? '#ffffff' : '#5a5a5a',
                                    border: RemindIdArray.includes(item.value) ? ' 1px solid #ff7b00' : ' 1px solid #5a5a5a',
                                    // display: props.remindTagArray.length > 0 ? 'unset' : 'none',

                                }}
                                    onClick={() => {
                                        if (RemindIdArray.includes(item.value)) {
                                            deleteRemind(item.value, data.projId)
                                        } else {
                                            saveRemind(item.value, data.projId)
                                        }

                                    }}
                                >
                                    <ClockCircleOutlined style={{ marginRight: 3 }} /> {item.label}
                                </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>
            < Modal open={buyModalShow}
                centered
                title="提示"
                destroyOnClose={true}
                width={500}
                onCancel={() => {
                    setBuyModalShow(false);
                }
                }
                // onOk={() => {
                //     setShowBuyPic(false)
                //     setShowBuyPicIng(true)
                //     setBuyModalShow(false);

                // }
                // }
                footer={[
                    <Button key="cancel" onClick={() => setBuyModalShow(false)}>取消</Button>,
                    <Button key="ok" type="primary" onClick={() => {

                        payPkg()
                    }}>确定</Button>,
                ]}

            >
                <div className='modalText'> 购买安装包需要花费{props.pkgPrice}元，是否继续购买？</div>
                <div className='modalTip'>*注：购买后无法退款，修改后需重新购买下载！</div>
                {/* <div className='modalTip'>注：安装包制作时长为1-3个工作日</div> */}
            </ Modal>
            < Modal open={buyVideoModalShow}
                centered
                title="提示"
                destroyOnClose={true}
                width={500}
                onCancel={() => {
                    setBuyVideoModalShow(false);
                }
                }
                // onOk={() => {
                //     setShowBuyPic(false)
                //     setShowBuyPicIng(true)
                //     setBuyModalShow(false);

                // }
                // }
                footer={[
                    <Button key="cancel" onClick={() => setBuyVideoModalShow(false)}>取消</Button>,
                    <Button key="ok" type="primary" onClick={() => {
                        payVideo()
                        // payPkg()
                    }}>确定</Button>,
                ]}

            >
                <div className='modalText'> 购买演示视频需要花费{props.videoPrice}元，是否继续购买？</div>
                <div className='modalTip'>*注：购买后无法退款，修改后需重新购买下载！</div>
                {/* <div className='modalTip'>注：安装包制作时长为1-3个工作日</div> */}
            </ Modal>
        </>
    )
}