system-copyright-react/src/route/proj/ProjNew.tsx

import './proj-new.css';
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { Table, AutoComplete, Button, Flex, Form, Input, message, Modal, Spin, Checkbox, DatePicker, Select } from "antd";
import { useContext, useEffect, useState, useRef } from "react";
// import { useLocation } from 'react-router-dom';
import { get, post } from "../../util/AjaxUtils.ts";
// import {GlobalContext} from "../../context/GlobalContext.ts";
import {
    // IProjCharge, 
    ProjAdditionalType, ProjChargeType
} from "../../interfaces/proj/IProj.ts";
import locale from 'antd/es/date-picker/locale/zh_CN';
import { GlobalDispatchContext, reloadUser } from "../../context/GlobalContext.ts";
import BelongPeople from '../../components/BelongPeople/BelongPeople.tsx'
import ContactPeople from '../../components/ContactPeople/ContactPeople.tsx'
import dayjs from 'dayjs';
import SelectCouponModal from '../../components/CouponModal/SelectCouponModal.tsx'
// import { key } from 'localforage';
import homes from '../../static/homes.png'
const { TextArea } = Input;
// const { TextArea } = Input;
type ProjInfo = {
    projName: string;
    projIntroduction: string;
    belongPeople: string;
    contacts: string;
    projDevCompleteDate: string;
    coupon?: string;
    projVersion: string;
    backendCodeLang: string;
    envIndustry?: string
    packageName?: string
};
import type {
    TableColumnsType,
    TableProps
} from 'antd';
interface DataType {
    key: React.Key;
    packageName: string;
    packageMoney: number;
    packageDescription: string;
    packageInfoId: string;
    packageOrderId: string;
}

import { useDispatch,useSelector } from 'react-redux'
export default function ProjNew() {
    const dispath = useDispatch()
    // 更新redux的套餐包信息
    const getMyPackNum = () => {
        get<any>({
            messageApi,
            url: `/api/proj/servicepkg/packageorder/count/self`,
            onBefore() {

            },
            onSuccess({ data }) {
                dispath({
                    type: 'upPackNum',
                    val: {
                        ALL: data.ALL,
                        MATERIAL: data.MATERIAL,
                    }
                })
            },
            onFinally() {

            }
        })
    }
    const redxuState: any = useSelector(state => state)
    // const [packageType, setPackageType] = useState('')
    const packNum = redxuState.packNum
    const [packselectShow, setPackselectShow] = useState(false)
    const [debounceTimer, setDebounceTimer] = useState<any>(null);
    // 创建一个 ref 来引用推荐列表容器
    const recommendListRef = useRef<HTMLDivElement>(null);
    // const [projNameValue, setProjNameValue] = useState('');
    const [recommendModal, setRecommendModal] = useState(false) //推荐弹窗
    // 土建弹窗输入框内容
    const [recommendInput, setRecommendInput] = useState('')
    // 推荐窗口加载中
    // const [ailoading, setAiloading] = useState(false)
    const [recommendList, setRecommendList] = useState<any[]>([
        // '呵呵呵哒系统',
        // '坐的我屁股疼系统',
        // '坐的腰也非常疼系统',
        // '减肥还是不减肥系统系统',
        // '我要酷酷吃吃吃吃吃吃系统我要酷酷吃吃吃吃吃吃系统我要酷酷吃吃吃吃吃吃系统我要酷酷吃吃吃吃吃吃系统',
        // '晚上吃点啥系统',
        // '晚上吃点啥系统',
        // '晚上吃点啥系统',
        // '晚上吃点啥系统',
        // '晚上吃点啥系统',
        // '晚上吃点啥系统',
        // '晚上吃点啥系统',


    ]) //推荐系统全称列表
    // 根据输入内容获取标题
    const getRecommendList = () => {
        // // setRecommendList([])

        post<any>({
            messageApi,
            url: `/api/proj/recommend/list-proj-name/ai`,
            body: {
                prompt: recommendInput
            },
            onBefore() {
                setRecommendLoading(true)
            },
            onSuccess({ data }) {
                if (recommendListRef.current) {
                    recommendListRef.current.scrollTop = 0;
                }
                // console.log(data);
                setRecommendList(data)

            },
            onFinally() {
                setRecommendLoading(false)

            },
        })
    }
    const [recommendLoading, setRecommendLoading] = useState(false) //推荐系统全称列表加载状态
    const [selectList, setSelectList] = useState<any[]>([]) //联想先择的系统名列表
    // 获取历史项目名称列表
    const getHistoryList = (value: string) => {
        // const encodedValue = encodeURIComponent(value);
        get({
            messageApi,
            url: `/api/proj/recommend/list-proj-name/history`,
            config: {
                params: {
                    keywords: value
                }
            },
            onBefore() {

            },
            onSuccess({ data }: any) {
                // console.log(data);
                setSelectList(data.map((item: any, index: any) => {
                    return {
                        key: index,
                        value: item
                    }
                }))
            },
            onFinally() {

            },
        })
    }
    const [packList, setPackList] = useState<any[]>([]) //服务包列表

    // const location = useLocation();
    // const { price } = location.state || {};
    // const [showPrice, setShowPrice] = useState(location.state.price) //显示的价格
    const [selectPack, setSelectPack] = useState(false) //是否选择了服务器套餐
    // 是否显示优惠券
    const [couponShow, setcouponShow] = useState(true)
    // const globalContext = useContext(GlobalContext);
    const dateFormat = 'YYYY年MM月DD日';
    const globalDispatchContext = useContext(GlobalDispatchContext);
    const nav = useNavigate();
    const pathParams = useParams();
    const [queryParams] = useSearchParams();

    const [messageApi, contextHolder] = message.useMessage();
    const [loading, setLoading] = useState<boolean>(false);
    const height = window.innerHeight - 180;
    // 提示结尾是否带关键字弹窗
    // const [hasKeywords, setHasKeywords] = useState<boolean>(false);
    // 创建项目弹窗
    const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
    const [chargePrice, setChargePrice] = useState(0);
    const [projInfo, setProjInfo] = useState<ProjInfo>({
        projName: '',
        projIntroduction: '',
        belongPeople: '',
        contacts: '',
        projDevCompleteDate: '',
        projVersion: '',
        backendCodeLang: '',
        // packageInfoId: ''
    });
    const [form] = Form.useForm<ProjInfo>();
    // 所属者弹窗
    const [belongModal, setBelongModal] = useState(false)
    // 联系人弹窗
    const [concatModal, setConcatModal] = useState(false)
    // const [belongPeopleName ,setBelongPeopleName] = useState('')
    const [belongPeopleInfo, setBelongPeopleInfo] = useState({
        authorName: '',
        authorType: '',
        authorIdCardType: '',
        authorIdCard: '',
        authorCrcAccount: 0,
        authorId: '',
        authorProvinceCity: '',
        authorCrcAccountPassword: '',
        authorCrcAccountUsername: ''
    })
    const [concatPeopleInfo, setConcatPeopleInfo] = useState({
        applyConcatId: '',
        applyContactCsaNo: '',
        applyContactEmail: '',
        applyContactName: '',
        applyContactPhone: '',
        applyContactCompany: ''
    })
    // 优惠券弹窗
    const [couponModal, setCouponModal] = useState(false)
    // 服务包弹窗
    const [packModal, setPackModal] = useState(false)


    // 套餐包弹窗表格信息

    const [total, setTotal] = useState(0)
    const [nowPackageName, setNowPackageName] = useState('') //临时选择名字
    // const [nowpackageInfoId, setNowpackageInfoId] = useState('') //临时选择包id
    // const [packageInfoId, setPackageInfoId] = useState('') //确定选择包id
    const [nowpackageOrderId, setNowpackageOrderId] = useState('') //临时选择订单id
    const [packageOrderId, setPackageOrderId] = useState('') //确定选择订单id
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([packageOrderId]); //被选择的而项目
    const rowSelection: TableProps<DataType>['rowSelection'] = {
        selectedRowKeys,
        onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
            setSelectedRowKeys(selectedRowKeys);
            setNowPackageName(selectedRows[0].packageName)
            // setNowpackageInfoId(selectedRows[0].packageInfoId)
            setNowpackageOrderId(selectedRows[0].packageOrderId)
        },

    };


    const setValue = (value: string) => {
        form.setFieldsValue({
            belongPeople: value
        })
    }
    const setConcatValue = (value: string) => {
        form.setFieldsValue({
            contacts: value
        })
    }
    const [createProjId, setCreateProjId] = useState('');
    const oldlistProjChargeAdditional: string[] = [];
    const [listProjChargeAdditional, setlistProjChargeAdditional] = useState<string[]>([])
    // 是否可用优惠券
    const [hasCoupon, setHasCoupon] = useState(false)
    // 给优惠券栏赋值
    const setCouponTitle = (value: string) => {
        form.setFieldsValue({
            coupon: value
        });
    }
    // 优惠券id
    const [couponId, setCouponId] = useState('')


    // 优惠券减的钱数
    const [couponNum, setCouponNum] = useState(0)
    // 查看是否有可用获取优惠券信息
    const getCouponData = () => {
        get({
            messageApi,
            url: `/api/coupon/user/listpage/self`,
            // url: `/api/proj/refund/apply/listpage?applyStatus=${state.type}`,
            config: {
                params: {
                    page: 1,
                    rows: 10,
                    isEffective: 1,
                    isUsed: 0,
                }
            },
            onBefore() {

            },
            onSuccess(data: any) {
                if (data.data.rows.length > 0) {
                    setHasCoupon(true)
                }
            },
            onFinally() {

            },
        })
    }
    //判断是否以“软件”、“系统”、“平台”或“APP”结尾
    function isEndsWithKeywords(str: string) {
        const keywords = ["软件", "系统", "平台", "APP"];
        return keywords.some(keyword => str.endsWith(keyword));
    }
    // 提示信息是否显示
    const [showTip, setShowTip] = useState(false)
    const [page, setPage] = useState(1);
    const packColumns: TableColumnsType<DataType> = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'packageOrderId',
            align: 'center',
            render: (_text, _record, index) => (page - 1) * 5 + index + 1, // 显示序号，从1开始

        },
        {
            title: '套餐名称',
            dataIndex: 'packageName',
            key: 'packageOrderId',
            // 居中显示
            align: 'center',
        },
        {
            title: '当前剩余次数',
            dataIndex: 'packageTotalSurplusCount',
            align: 'center',
            key: 'packageOrderId',
            render: (text: number) => {
                return <div>{text} </div>
            }
        },
        {
            title: '下单时间',
            align: 'center',
            dataIndex: 'gmtCreate',
            key: 'packageOrderId',
            // render: (text: string) => {
            //     return <div title={text} style={{ width: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{text}</div>
            // }
        },
    ];

    // 获取我得服务包信息
    const getPickList = (page: number) => {

        get<any>({
            messageApi,
            url: `/api/proj/servicepkg/packageorder/listpage/self`,
            config: {
                params: {
                    page: page,
                    rows: 5,
                    keyong: "keyong",
                    packageType: pathParams.projChargeType,
                }
            },
            onBefore() {

            },
            onSuccess({ data }) {
                // console.log(data);
                // const list = data as any;
                // setSelectList(data.rows)
                setPackList(data.rows)
                setTotal(data.total)
                // const newPackList = data.rows.map((item: any) => {
                //     return {
                //         value: item.packageInfoId,
                //         label: item.packageName,
                //         key: item.packageNo,
                //     }
                // });
                // // 
                // setPackList(newPackList);
                // setHasMore(data.total / 5 > page);
            },
            onFinally() {

            }
        })
    }
    // useEffect(() => {
    //     getPickList();
    // }, [page]);
    // useEffect(() => {
    //     if(projInfo.packageInfoId == ''){
    //         setPage(1)
    //     }
    // },[projInfo.packageInfoId])
      useEffect(() => {
        if(packNum.ALL > 0 && pathParams.projChargeType == 'ALL'){
            setPackselectShow(true)
        }
        if(packNum.MATERIAL > 0 && pathParams.projChargeType == 'MATERIAL'){
            setPackselectShow(true)
        }
    }, [packNum]);
 
    useEffect(() => {
        get({
            messageApi: messageApi,
            url: '/api/proj/charge/get',
            onSuccess({ data }) {
                // console.log(data);

                const charge = data as any;
                // console.log('创建页price',charge.proj.materialAgent);

                let price = 0;
                switch (pathParams.projChargeType) {
                    case ProjChargeType.ALL:
                        // price = charge.proj.all;
                        price = charge.projTypes[0].price;
                        break;
                    // case ProjChargeType.MATERIAL_AGENT:
                    //     price = charge.proj.materialAgent;
                    //     break;
                    // case ProjChargeType.MATERIAL_AGENT_URGENT:
                    //     price = charge.proj.materialAgentUrgent;
                    //     break;
                    case ProjChargeType.MATERIAL:
                        price = charge.projTypes[1].price;
                        break;
                    case ProjChargeType.FREE:
                        price = charge.projTypes[2].price;
                        break;
                    default:
                        messageApi.error({
                            type: 'error',
                            content: '价格类型错误',
                        })
                }
                const pkg = queryParams.get('pkg') == 'true' ? true : false
                const videoDemo = queryParams.get('videoDemo') == 'true' ? true : false
                const urgent = queryParams.get('urgent') == 'true' ? true : false
                if (pkg) {
                    price += charge.additional.pkg;
                    oldlistProjChargeAdditional.push(ProjAdditionalType.PKG);
                    // console.log(listProjChargeAdditional);

                }
                if (videoDemo) {
                    price += charge.additional.videoDemo;
                    oldlistProjChargeAdditional.push(ProjAdditionalType.VIDEO_DEMO);
                    // console.log(listProjChargeAdditional);

                }
                if (urgent) {
                    price += charge.additional.urgent;
                    oldlistProjChargeAdditional.push(ProjAdditionalType.URGENT);
                    // console.log(listProjChargeAdditional);
                }
                setChargePrice(price);
                setlistProjChargeAdditional(oldlistProjChargeAdditional)
                // console.log('传递信息pkg:',pkg,'videoDemo:',videoDemo);

            }
        })

        // console.log('类型', pathParams.projChargeType);
        if (pathParams.projChargeType == 'FREE') {
            setcouponShow(false)
        }
        getCouponData()
        // console.log('价格', showPrice);
        getPickList(1)
        // console.log()

    }, []);

    return (
        <>
            {contextHolder}
            {/* <Breadcrumb
                items={[
                    {title: <Link to={'/'}>首页</Link>},
                    {title: <Link to={'/proj-create'}>创建项目</Link>},
                    {title: '新建项目'},
                ]}
            /> */}
            <div className='projNew' style={{ height: `${height}px`, overflow: 'auto' }}>
                <div className="proj-new">
                    {/* <div className="proj-title">请完善项目的基本信息</div> */}
                    <div className="proj-form">
                        <Form
                            name="basic"
                            form={form}
                            initialValues={{
                                projVersion: 'V1.0',
                                backendCodeLang: 'JAVA'
                            }} // 添加 initialValues 属性
                            layout={'vertical'}
                            labelCol={{ span: 24 }}
                            wrapperCol={{ span: 24 }}
                            style={{ width: '100%' }}
                            onFinish={(formData) => {
                                // console.log(formData.projName);


                                setIsCreateModalOpen(true);
                                setProjInfo({
                                    projName: formData.projName,
                                    projIntroduction: formData.projIntroduction,
                                    belongPeople: formData.belongPeople,
                                    contacts: formData.contacts,
                                    projDevCompleteDate: formData.projDevCompleteDate,
                                    projVersion: formData.projVersion ? formData.projVersion : 'V1.0',
                                    backendCodeLang: formData.backendCodeLang,
                                    // packageInfoId: formData.packageInfoId?formData.packageInfoId : '',
                                })
                            }}
                            autoComplete="off"
                        >
                            <div style={{
                                width: 800,
                                marginLeft: 130,
                                display: 'flex',
                                justifyContent: 'center',
                                marginBottom: 30,
                                fontWeight: 'bold',
                                fontSize: 18,
                                marginTop: 5
                            }}>
                                <img src={homes} width={19} height={19} style={{
                                    marginTop: 4,
                                    marginRight: 5,
                                }} alt="" />
                                <div> 项目信息</div>

                            </div>

                            <div style={{ position: 'relative' }}>
                                <div className='formItemOne'>
                                    <div className='formItem-title oneTitle'>系统全称<span style={{ color: 'red' }}>*</span></div>
                                    <Form.Item<ProjInfo>
                                        name="projName"
                                        rules={[
                                            { required: true, message: '请输入系统全称' },
                                        ]}
                                    >

                                        {/* <Input onChange={(e) => {
                                                // 打印值
                                                // console.log(e.target.value);
                                                if (e.target.value) {
                                                    if (isEndsWithKeywords(e.target.value)) {
                                                        setShowTip(false)
                                                    } else {
                                                        setShowTip(true)
                                                    }
                                                } else {
                                                    setShowTip(false)
                                                }


                                            }} style={{ background: '#eeeeee', width: '800px', height: '50px', fontSize: '16px' }} placeholder="请输入系统全称 (注：系统全称建议以“软件”、“系统”、“平台”或“APP”结尾)" /> */}

                                        <AutoComplete
                                            className='changeStyle'
                                            allowClear
                                            style={{
                                                // background: '#eeeeee',
                                                // fontSize: '16px',
                                                width: '780px',
                                                height: '42px',
                                            }}
                                            placeholder="请输入系统全称 (注：系统全称建议以“软件”、“系统”、“平台”或“APP”结尾)"
                                            options={selectList}
                                            onSearch={(value) => {
                                                // setProjNameValue(value);
                                                if (value) {
                                                    if (isEndsWithKeywords(value)) {
                                                        setShowTip(false);
                                                    } else {
                                                        setShowTip(true);
                                                    }
                                                } else {
                                                    setShowTip(false);
                                                }
                                            }}
                                            onChange={(value) => {
                                                // setProjNameValue(value);
                                                // console.log(value);

                                                if (value) {
                                                    // getHistoryList(value);
                                                    if (isEndsWithKeywords(value)) {
                                                        setShowTip(false);
                                                    } else {
                                                        setShowTip(true);
                                                    }
                                                    // 清除之前的定时器
                                                    if (debounceTimer) {
                                                        clearTimeout(debounceTimer);
                                                    }

                                                    // 设置新的定时器
                                                    const newTimer = setTimeout(() => {
                                                        getHistoryList(value);
                                                    }, 1000);

                                                    // 更新定时器 ID
                                                    setDebounceTimer(newTimer);
                                                } else {
                                                    setShowTip(false);
                                                    setSelectList([])
                                                }
                                            }}

                                        />

                                    </Form.Item>

                                </div>
                                <a
                                    onClick={() => {
                                        // form.setFieldsValue({
                                        //     projName: '嘻嘻'
                                        // });
                                        setRecommendModal(true)
                                        setRecommendList([])
                                    }}
                                    style={{
                                        position: 'absolute',
                                        right: -35,
                                        top: 10,
                                    }}>推荐</a>
                                <div style={{
                                    position: 'absolute', left: 165,
                                    display: showTip ? 'unset' : 'none',
                                    color: 'green',
                                }}>系统全称建议以“软件”、“系统”、“平台”或“APP”结尾</div>
                            </div>
                            <div style={{
                                display: 'flex',
                                marginTop: 20
                            }}>

                                <div className='formItemOne' style={{ position: 'relative' }}>
                                    <div className='formItem-title ' style={{
                                        // position: 'relative',
                                        // background: 'pink',
                                    }}>
                                        产权所属者

                                    </div>
                                    <Form.Item<ProjInfo>
                                        name="belongPeople"
                                        rules={[
                                            // { required: true, message: '请选择/创建知识产权所属者' }
                                        ]}
                                    >
                                        <Input style={{ background: '#eeeeee', width: '310px', height: '42px', color: '#3B3B3B' }} placeholder="请选择/创建知识产权所属者" disabled />

                                    </Form.Item>
                                    <div style={{
                                        display: belongPeopleInfo.authorId ? 'none' : 'unset',
                                        position: 'absolute', right: 20,
                                        // fontSize: 16,
                                        color: " #1F79FF", cursor: 'pointer',
                                        // background:'pink',
                                        width: 290,
                                        textAlign: 'right',
                                    }} onClick={() => {
                                        setBelongModal(true)
                                    }}>选择</div>
                                    <div style={{
                                        display: belongPeopleInfo.authorId ? 'unset' : 'none',

                                        position: 'absolute', right: 0,
                                        // fontSize: 16,
                                        color: " #1F79FF", cursor: 'pointer',
                                        // background:'pink',
                                        width: 50,
                                        textAlign: 'center',

                                    }} onClick={() => {
                                        setValue('')
                                        setBelongPeopleInfo({
                                            authorName: '',
                                            authorType: '',
                                            authorIdCardType: '',
                                            authorIdCard: '',
                                            authorCrcAccount: 0,
                                            authorId: '',
                                            authorProvinceCity: '',
                                            authorCrcAccountUsername: '',
                                            authorCrcAccountPassword: '',
                                        })
                                    }}>取消</div>
                                </div>
                                <div className='formItemOne' style={{ position: 'relative' }}>
                                    <div className='formItem-title '>
                                        产权联系人<span style={{ color: 'red' }}>*</span>
                                    </div>
                                    <Form.Item<ProjInfo>
                                        name="contacts"
                                        rules={[{ required: true, message: '请选择/创建知识产权联系人' }]}
                                    >
                                        <Input style={{ background: '#eeeeee', width: '310px', height: '42px', color: '#3B3B3B' }} placeholder="请选择/创建知识产权联系人" disabled />

                                    </Form.Item>
                                    <div style={{
                                        position: 'absolute', right: 20,
                                        // fontSize: 16,
                                        color: " #1F79FF", cursor: 'pointer',
                                        width: 290,
                                        textAlign: 'right',

                                    }} onClick={() => {
                                        setConcatModal(true)
                                    }}>选择</div>
                                </div>
                            </div>
                            <div style={{
                                display: 'flex',
                                marginTop: 20
                            }}>
                                <div className='formItemOne' style={{}}>
                                    <div className='formItem-title oneTitle'>系统版本<span style={{ color: 'red' }}>*</span></div>
                                    <Form.Item<ProjInfo>
                                        name="projVersion"

                                    >
                                        <Input

                                            style={{
                                                // background: '#eeeeee',
                                                width: '310px', height: '42px',
                                                //  fontSize: '16px'
                                            }} placeholder="请输入系统版本 (注：默认版本为v1.0)" />

                                    </Form.Item>

                                </div>
                                <div className='formItemOne' style={{}}>
                                    <div className='formItem-title oneTitle'>系统语言<span style={{ color: 'red' }}>*</span></div>
                                    <Form.Item<ProjInfo>
                                        name="backendCodeLang"
                                        rules={[
                                            { required: true, message: '请选择系统语言' },
                                        ]}
                                    >
                                        <Select
                                            style={{
                                                width: '310px', height: '42px',
                                                // fontSize: '16px',
                                            }}
                                            placeholder="请选择系统语言"
                                            className='langselect'
                                            // defaultValue="JAVA"
                                            options={[
                                                { value: 'JAVA', label: 'JAVA' },
                                                // { value: 'NODE', label: 'NODE(JAVASCRIPT)' },
                                                // { value: 'PYTHON', label: 'PYTHON' },
                                                // { value: 'GO', label: 'GO' },
                                            ]}
                                        >
                                        </Select>
                                    </Form.Item>
                                </div>
                            </div>

                            <div style={{
                                display: 'flex',
                                marginTop: 20
                            }}>

                                {/* <div className='formItemOne' style={{}}>
                                    <div className='formItem-title oneTitle'>面向行业/领域*</div>
                                    <Form.Item<ProjInfo>
                                        name="envIndustry"
                                        rules={[
                                            { required: true, message: '请选面向行业/领域' },
                                        ]}
                                    >
                                        <Select
                                            style={{ width: '310px', height: '50px', fontSize: '16px', }}
                                            placeholder="请选面向行业/领域"
                                            className='langselect'
                                            // defaultValue="JAVA"
                                            options={[
                                                { value: '1', label: '中小企业' },
                                                { value: '2', label: '事业单位' },
                                                { value: '3', label: '个人' },
                                            ]}
                                        >
                                        </Select>
                                    </Form.Item>
                                </div> */}
                                <div className='formItemOne' style={{}}>
                                    <div className='formItem-title '>
                                        开发完成时间
                                    </div>
                                    <Form.Item<ProjInfo>
                                        // label="开发完成时间"
                                        name="projDevCompleteDate"
                                    // rules={[{ required: true, message: '请输入开发完成时间' }]}
                                    >
                                        <DatePicker placeholder="请选择开发完成日期"
                                            className='detaPicker'
                                            format={dateFormat}
                                            locale={locale}
                                            // style={{ width: '100%' }}
                                            style={{
                                                height: '42px', width: '310px',
                                                // fontSize: 16,
                                                //  background: '#eeeeee',
                                            }}
                                            disabledDate={(current) => current && current > dayjs().endOf('day')}

                                        />
                                    </Form.Item>
                                </div>
                                {/* 服务包 */}
                                <div style={{
                                    display: couponId || pathParams.projChargeType == 'FREE' ? 'none' : 'unset'
                                }}>
                                    <div className='formItemOne' >
                                        <div className='formItemOne' style={{ position: 'relative' }}>
                                            <div className='formItem-title oneTitle'>套餐包</div>
                                            <Form.Item<ProjInfo>
                                                name="packageName"
                                                rules={[
                                                    // { required: true, message: '请选择系统语言' },
                                                ]}
                                            >
                                                {/* <Select
                                                disabled={packList.length > 0 ? false : true}
                                                style={{ width: '310px', height: '50px', fontSize: '16px', }}
                                                placeholder={packList.length > 0 ? '请选择服务包' : '暂无服务包'}
                                                className='langselect'
                                                // defaultValue="JAVA"
                                                options={packList}
                                                allowClear
                                                onChange={(value) => {
                                                    if (value) {
                                                        setShowPrice(0)
                                                        setSelectPack(true)
                                                        setcouponShow(false)
                                                    } else {
                                                        setShowPrice(location.state.price)
                                                        setSelectPack(false)
                                                        setcouponShow(true)
                                                    }

                                                }}
                                            >
                                            </Select> */}
                                                <Input
                                                    className="custom-input"
                                                    style={{
                                                        // background: '#eeeeee',
                                                        // fontSize: 16,
                                                        width: '310px', height: '42px', color: '#3B3B3B'
                                                    }} 
                                                    // placeholder={packList.length > 0 ? '请选择套餐包' : '暂无套餐包'}
                                                    placeholder={packselectShow ? '请选择套餐包' : '暂无套餐包'}
                                                    disabled
                                                />

                                            </Form.Item>
                                            <div style={{
                                                position: 'absolute',
                                                //  left: 165,
                                                 left: 158,

                                                top: 40,
                                                // display: showTip ? 'unset' : 'none',
                                                color: 'red',
                                                fontSize: 18,
                                                fontWeight: 'bold',
                                            }}>注：已购买套餐包的请选择套餐包支付</div>
                                            <div
                                                style={{
                                                    display: selectPack ? 'none' : 'unset', position: 'absolute', right: 23,
                                                    //  fontSize: 16,
                                                    // color: packList.length ? '#1F79FF' : '#676767', cursor: 'pointer',
                                                    color: packselectShow ? '#1F79FF' : '#676767', cursor: 'pointer',
                                                    // background:'pink',
                                                    width: 290,
                                                    textAlign: 'right',
                                                }}
                                                onClick={() => {
                                                    if (packList.length > 0) {
                                                        setPackModal(true)
                                                        setPage(1)
                                                        setSelectedRowKeys([])
                                                        getPickList(1)
                                                        // #1F79FF
                                                    } else {
                                                        messageApi.error('无可用套餐包')
                                                    }

                                                }}>选择</div>
                                            <div style={{ display: selectPack ? 'unset' : 'none', position: 'absolute', right: 23,  color: '#1F79FF', cursor: 'pointer' }} onClick={() => {
                                                // setPackageInfoId('')
                                                setPackageOrderId('')
                                                setNowpackageOrderId('')
                                                setNowPackageName ('')
                                           
                                            
                                                form.setFieldsValue({
                                                    packageName: ''
                                                })
                                                setSelectPack(false)
                                                //   setcouponShow(true)
                                                setcouponShow(true)
                                                // setShowPrice(location.state.price)
                                            }}>取消</div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div style={{
                                display: 'flex',
                                marginTop: 20
                            }}>

                                <div style={{ display: couponShow ? 'unset' : 'none' }}>
                                    <div className='formItemOne' style={{ position: 'relative' }}>
                                        <div className='formItem-title '>
                                            优惠券
                                        </div>
                                        <Form.Item<ProjInfo>
                                            name="coupon"
                                        // rules={[{ required: true, message: '请选择优惠券' }]}
                                        >
                                            <Input style={{
                                                background: '#eeeeee',
                                                //  fontSize: 16,
                                                width: '310px', height: '42px', color: '#3B3B3B'
                                            }} placeholder={hasCoupon ? '请选择优惠券' : '暂无可用优惠券'} disabled />

                                        </Form.Item>
                                        <div style={{
                                            display: couponId ? 'none' : 'unset', position: 'absolute', right: 23,
                                            //  fontSize: 16, 
                                            color: hasCoupon ? '#1F79FF' : '#676767', cursor: 'pointer',
                                            width: 290,
                                            textAlign: 'right',
                                        }} onClick={() => {
                                            if (hasCoupon) {
                                                setCouponModal(true)
                                                // #1F79FF
                                            } else {
                                                messageApi.error('无可用优惠券')
                                            }
                                            // if (!selectPack) {
                                            //     if (hasCoupon) {
                                            //         setCouponModal(true);
                                            //     } else {
                                            //         messageApi.error('暂无可用优惠券');
                                            //     }
                                            // } else {
                                            //     messageApi.error('服务包已选择，不可使用优惠券');
                                            // }
                                        }}>选择</div>
                                        <div style={{ display: couponId ? 'unset' : 'none', position: 'absolute', right: 23, fontSize: 16, color: '#1F79FF', cursor: 'pointer' }} onClick={() => {
                                            setCouponTitle('')
                                            setCouponId('')
                                            setCouponNum(0)
                                        }}>取消</div>
                                    </div>
                                </div>
                            </div>
                            {/* <div style={{
                                marginLeft: 50,
                                //   fontWeight: 'bold',
                                fontSize: 16,
                                marginTop: 5,
                                color: 'green',
                                fontWeight: 'bold',
                            }}>知识产权选择 : </div> */}
                            {/* <div style={{
                                height: 2,
                                background: '#E9E9E9',
                                // width: 900,
                                marginLeft: 50,
                                marginTop: 20,
                                marginBottom: 20,
                            }}></div> */}
                            {/* <div style={{
                                width: 800,
                                marginLeft: 130,
                                display: 'flex',
                                justifyContent: 'center',
                                marginBottom: 30,
                                fontWeight: 'bold',
                                fontSize: 18,
                                marginTop: 20
                            }}>
                                <img src={homes} width={19} height={19} style={{
                                    marginTop: 4,
                                    marginRight: 5,
                                }} alt="" />
                                <div> 知识产权</div>

                            </div> */}

                            <div className='software-protocol'>
                                <Form.Item
                                    name="agreement"
                                    valuePropName="checked"
                                    rules={[
                                        {
                                            validator: (_, value) =>
                                                value ? Promise.resolve() : Promise.reject(new Error('请阅读并勾选《软件委托开发协议》')),
                                        },
                                    ]}
                                >
                                    <Checkbox>
                                        我同意平台 <a onClick={() => {
                                            window.open('https://www.aimzhu.com/Seda.html')
                                        }}>《软件委托开发协议》</a>
                                    </Checkbox>
                                </Form.Item>
                            </div>
                            <div style={{
                                height: 2,
                                background: '#E9E9E9',
                                // width: 900,
                                marginLeft: 50,
                                marginTop: 20,
                                marginBottom: 20,
                            }}></div>
                            {/* <div className='formItemTwo'>
                                <div className='formItem-title '>简单描述</div>
                                <Form.Item<ProjInfo>
                                    name="projIntroduction"
                                >
                                        <TextArea rows={10} style={{ background: '#eeeeee', resize: 'none',width:"328px",height:'220px',fontSize:'16px' }} placeholder="请对系统作出简单的描述，以使可准确生成资料..." />
                                </Form.Item>
                            </div> */}
                            <div style={{ marginTop: '' }}>
                                <div style={{
                                    // background: 'pink',
                                    display: 'flex',
                                    justifyContent: 'space-evenly',
                                    // alignItems: 'center',


                                }}>
                                    <div style={{
                                        fontSize: 30,
                                        // color:'red',
                                        fontWeight: 'bold',
                                        // background:'pink',
                                        lineHeight: '40px'

                                    }}>金额 ： 
                                        <span
                                            style={{
                                                color: 'red',
                                            }}
                                        >
                                            {/* {(showPrice / 100 - couponNum) < 0 ? 0 : showPrice / 100 - couponNum} */}
                                            {selectPack ? 0 : (chargePrice / 100 - couponNum) < 0 ? 0 : chargePrice / 100 - couponNum}
                                            元</span>
                                    </div>
                                    <div style={{
                                        // background:'skyBlue',
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'space-between',
                                        // width:200,
                                    }}>
                                        <Form.Item>
                                            <Flex align="center" justify="center" gap="large">

                                                <Button type="primary" htmlType="submit"
                                                    size='large'
                                                // style={{
                                                //     backgroundColor: 'var(--color-primary)', width: '216px',
                                                //     height: '50px', fontSize: '16px', marginLeft: '53px'
                                                // }}
                                                // onClick={()=>{
                                                //     // 打印


                                                // }}
                                                >
                                                    保存并付款
                                                </Button>
                                                <Button
                                                    style={{
                                                        marginLeft: 10,

                                                    }}
                                                    size='large'
                                                    type="default" htmlType="button" onClick={() => {
                                                        nav(-1);
                                                    }}
                                                >
                                                    返回
                                                </Button>

                                            </Flex>
                                        </Form.Item>
                                    </div>
                                </div>
                            </div>
                        </Form>
                    </div>
                </div>
            </div>
            <Modal title="提示"
                centered
                okText="确定"
                cancelText="取消"
                open={isCreateModalOpen}
                onOk={() => {
                    // console.log('最终',listProjChargeAdditional);
                    // console.log(belongPeopleInfo.authorId);

                    post<any>({
                        messageApi,
                        url: '/api/proj/create',
                        body: {
                            // packageInfoId: projInfo.packageInfoId,
                            projName: projInfo.projName,
                            projVersion: projInfo.projVersion,
                            backendCodeLang: projInfo.backendCodeLang,
                            projChargeType: pathParams.projChargeType,
                            listProjChargeAdditional: listProjChargeAdditional,
                            // dayjs(formInfo.getFieldValue('projDevCompleteDate')).format(dateFormat),
                            projDevCompleteDate: projInfo.projDevCompleteDate ? dayjs(projInfo.projDevCompleteDate).format(dateFormat) : '',
                            authorCrcAccount: belongPeopleInfo.authorCrcAccount,
                            authorCrcAccountPassword: belongPeopleInfo.authorCrcAccountPassword,
                            authorCrcAccountUsername: belongPeopleInfo.authorCrcAccountUsername,
                            authorId: belongPeopleInfo.authorId,
                            authorIdCard: belongPeopleInfo.authorIdCard,
                            authorIdCardType: belongPeopleInfo.authorIdCardType,
                            authorName: belongPeopleInfo.authorName,
                            authorProvinceCity: belongPeopleInfo.authorProvinceCity,
                            authorType: belongPeopleInfo.authorType,

                            applyContactCompany: concatPeopleInfo.applyContactCompany,
                            applyContactCsaNo: concatPeopleInfo.applyContactCsaNo,
                            applyContactEmail: concatPeopleInfo.applyContactEmail,
                            applyContactId: concatPeopleInfo.applyConcatId,
                            applyContactName: concatPeopleInfo.applyContactName,
                            applyContactPhone: concatPeopleInfo.applyContactPhone,
                            couponId: couponId ? couponId : '',
                            // packageInfoId: packageInfoId ? packageInfoId : ''
                            packageOrderId: packageOrderId ? packageOrderId : '',

                        },
                        onBefore() {
                            setLoading(true);
                        },
                        onSuccess({ data }) {
                            setIsEditModalOpen(true);
                            setCreateProjId(data.data);
                            reloadUser(messageApi, globalDispatchContext).then(() => {
                                messageApi.success('扣款成功');
                            });
                            getMyPackNum()
                        },
                        onFinally() {
                            setLoading(false);
                        }
                    })


                    setIsCreateModalOpen(false);

                }}
                onCancel={() => {
                    setIsCreateModalOpen(false);


                }}>
                <div>该操作会扣除
                    {/* {(chargePrice / 100 - couponNum) < 0 ? 0 : chargePrice / 100 - couponNum}  */}
                    {selectPack ? 0 : (chargePrice / 100 - couponNum) < 0 ? 0 : chargePrice / 100 - couponNum}
                    元，确定操作吗？</div>
            </Modal>
            <Modal title="提示"
                okText="确定"
                cancelText="取消"
                centered
                open={isEditModalOpen}
                onOk={() => {
                    sessionStorage.setItem('projName', projInfo.projName);
                    if (pathParams.projChargeType == ProjChargeType.ALL) {
                        nav(`/proj-eall/${createProjId}`);
                    } else if (pathParams.projChargeType == ProjChargeType.FREE) {
                        nav(`/proj-efree/${createProjId}`);
                    } else {
                        nav(`/proj-edit/${createProjId}`);
                    }
                }}
                onCancel={() => {
                    setIsEditModalOpen(false);
                }}>
                <div>项目创建成功，开始编辑项目？</div>
            </Modal>
            {/* <Modal title="提示"
                okText="更改"
                cancelText="继续"
                open={hasKeywords}
                onOk={() => {
                    //Form表单的projName变为空
                    form.resetFields(['projName']);
                    setHasKeywords(false);
                   
                }}
                centered 
                onCancel={() => {
                    setHasKeywords(false);
                    setIsCreateModalOpen(true);
                }}>
                <div>系统全称建议以“软件”、“系统”、“平台”或“APP”结尾，是否更改</div>
            </Modal> */}
            <Modal title="选择联系人"
                destroyOnClose
                centered
                open={concatModal}
                width={1200}

                footer={null}
                onCancel={() => {
                    setConcatModal(false)

                }}>

                <ContactPeople isShow={true} closeModal={() => { setConcatModal(false) }} setConcatPeopleInfo={setConcatPeopleInfo} concatPeopleInfo={concatPeopleInfo} setConcatValue={setConcatValue}></ContactPeople>
            </Modal>
            <Modal title="选择所属者"
                destroyOnClose
                centered
                open={belongModal}
                width={1200}

                footer={null}
                onCancel={() => {
                    setBelongModal(false)

                }}>

                <BelongPeople closeModal={() => { setBelongModal(false) }} setBelongPeopleInfo={setBelongPeopleInfo} belongPeopleInfo={belongPeopleInfo} setValue={setValue} isShow={true}></BelongPeople>
            </Modal>
            <Modal title="选择优惠券"
                destroyOnClose
                centered
                open={couponModal}
                width={809}

                footer={null}
                onCancel={() => {
                    setCouponModal(false)

                }}>
                <SelectCouponModal
                    couponId={couponId}
                    setCouponId={(value: string) => {
                        setCouponId(value)
                    }}
                    couponNum={couponNum}
                    setCouponNum={(value: number) => {
                        setCouponNum(value)
                    }}
                    setCouponTitle={(value: string) => {
                        setCouponTitle(value)
                    }}
                    closeModal={() => {
                        setCouponModal(false)
                    }}
                ></SelectCouponModal>
            </Modal>
            <Modal title="选择套餐包"
                destroyOnClose
                centered
                open={packModal}
                width={809}

                footer={null}
                onCancel={() => {
                    setPackModal(false)
                    setNowPackageName('')
                    // setNowpackageInfoId('')
                    setNowpackageOrderId('')
                    // setPage(1)

                }}>

                <div>
                    <Table
                        columns={packColumns}
                        dataSource={packList}
                        rowSelection={{
                            ...rowSelection,
                            // selectedRowKeys,
                            type: 'radio', // 设置为单选
                            // onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
                            //     setSelectedRowKeys(selectedRowKeys);



                            // },

                        }}
                        pagination={{
                            defaultPageSize: 5, // 设置默认一页显示 5 条数据,
                            current: page,
                            total: total,
                            onChange: (page: number) => {
                                setPage(page)
                                getPickList(page)
                                // console.log(page);


                            }
                        }}
                        rowKey="packageOrderId"
                        onRow={(record) => {
                            return {
                                onClick: (event: React.MouseEvent<HTMLTableRowElement>) => {
                                    event.stopPropagation();
                                    // setPackSelectNo(record.packageInfoId)
                                    setSelectedRowKeys([record.packageOrderId]);
                                    setNowPackageName(record.packageName)
                                    // setNowpackageInfoId(record.packageInfoId)
                                    setNowpackageOrderId(record.packageOrderId)
                                },
                                style: { cursor: 'pointer' } // 鼠标显示为小手
                            };
                        }}
                    />
                    <div style={{
                        display: 'flex',
                        justifyContent: 'flex-end',
                        marginTop: 10,
                    }}>
                        <Button onClick={() => {
                            setPackModal(false)
                            setNowPackageName('')
                            // setNowpackageInfoId('')
                            setNowpackageOrderId('')
                        }}>取消</Button>
                        <Button
                            style={{
                                marginLeft: 10
                            }}
                            type="primary"
                            onClick={() => {
                                if (!nowPackageName) {
                                    messageApi.error('请选择套餐包')
                                    return
                                }
                                // setPickSelectNo(nowPickSelectNo)
                                // setShowPrice(0)
                                setSelectPack(true)
                                setcouponShow(false)
                                // setPackageInfoId(nowpackageInfoId)
                                setPackageOrderId(nowpackageOrderId)
                                form.setFieldsValue({
                                    packageName: nowPackageName
                                })

                                setPackModal(false)
                            }}>确定</Button>
                    </div>
                </div>
            </Modal>
            <Modal title="推荐系统全称"
                destroyOnClose
                centered
                open={recommendModal}
                width={600}

                footer={null}
                onCancel={() => {
                    setRecommendModal(false)

                }}>
                <Spin tip="正在生成..." spinning={recommendLoading} >
                    <TextArea
                        placeholder='请简单介绍您想创建的系统，我们会根据您的描述为您推荐系统全称'
                        // 禁止下拉标
                        style={{
                            resize: 'none',
                            height: 133,
                            fontSize: 16,
                            padding: 20,
                        }}
                        // 回车事件
                        onKeyDown={(e) => {
                            if (e.keyCode == 13) {
                                // 禁止默认回车事件
                                e.preventDefault();
                                getRecommendList()
                            }
                        }}
                        onChange={(e) => {
                            // console.log(e.target.value);
                            setRecommendInput(e.target.value)

                        }}
                    />

                    <div style={{
                        display: recommendList.length > 0 ? 'unset' : 'none',
                    }}>
                        <div style={{
                            marginTop: 10,
                            fontSize: 16,
                            fontWeight: 'bold',
                        }}>
                            根据描述为您推荐
                        </div>
                        <div
                            ref={recommendListRef}
                            style={{

                                display: 'flex',
                                alignItems: 'center',
                                flexDirection: 'column',
                                // background: 'pink',
                                paddingBottom: 10,
                                height: 300,
                                overflowY: 'scroll',
                            }}>

                            {
                                recommendList.map((item, index) => {
                                    return (
                                        <div key={index}
                                            title={item}
                                            style={{
                                                fontSize: 18,
                                                marginTop: 10,
                                                cursor: 'pointer',
                                                width: '100%',
                                                background: '#F3F3F3',
                                                padding: 10,
                                                boxSizing: 'border-box',
                                                textAlign: 'center',
                                                // // 禁止换行 唱出部分用...代替
                                                // whiteSpace: 'nowrap',
                                                // overflowY: 'hidden',
                                                // textOverflow: 'ellipsis',
                                                // lineHeight: '20px',
                                            }}

                                            onClick={() => {
                                                form.setFieldsValue({
                                                    projName: item
                                                });
                                                if (isEndsWithKeywords(item)) {
                                                    setShowTip(false);
                                                } else {
                                                    setShowTip(true);
                                                }
                                                messageApi.success(`已选择${item}`);
                                                setRecommendModal(false)

                                            }}
                                        >
                                            {item}
                                        </div>
                                    )
                                })

                            }
                        </div>
                    </div>
                    <div style={{
                        // textAlign: 'right',
                        marginTop: 10,
                        // background: '#F3F3F3',
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
           
                    }}>
                        <div style={{
                            fontSize: 16,
                            fontWeight: 'bold',
                        }}>
                            <div><span style={{
                                color: 'red', 
                            }}>提问方式 ： 建筑</span> 行业方面的软件系统</div>
                            <div style={{
                                color:'#1677ff',
                            }}>请按以上方式提问，将“建筑”两字替换</div>
                        </div>
                        <Button type="primary"
                            style={{
                                width: 100,

                            }}
                            onClick={() => {
                                getRecommendList()
                            }}
                        >{
                                recommendList.length > 0 ? '换一批' : '生成'
                            }</Button>
                    </div>

                </Spin>

            </Modal>
            <Spin tip="正在提交..." spinning={loading} fullscreen />
        </>
    )
}