import './head.css'
// import { NodeJS } from 'types/node';
import {
    useDispatch,
    useSelector
} from 'react-redux'
import { getCode, checkPhone, updatePhone } from '../../request/api'
import BalanceHead from '../../components/balance/BalanceHead.tsx';
import RechargeHead from '../../components/recharge/RechargeHead.tsx';
import {
    //  Empty, 
    Dropdown, MenuProps, message, Modal, Space, Spin, Input, Table, Form, Button
    //   Form, Button, InputNumber
} from "antd";
import {
    CloseOutlined
} from '@ant-design/icons';
import title from '../../static/Phone/title.png'
import titleB from '../../static/Phone/titleB.png'
import line from '../../static/Phone/line.png'

import pack from '../../static/pack.png'
// import type { TableProps, FormProps } from 'antd';
interface DataType {
    usericId: string;
    icPriceMaterial: number;
    icPriceAll: number;
    createTime: string;

}
// interface icDataType {
//     contactName: string;//联系人姓名
//     contactPhone: string;//联系人电话
//     idCardNumber: string;//证件号
//     idCardType: string;//证件类型
//     lastLoginTime: string;//最后登录时间
//     userId: string;//用户id
//     userInfoId: string;//主键
//     userInfoName: string;//用户名称
//     userInfoNameEn: string;//用户英文名称
//     userInfoType: string;//用户类型
//     userUsername: string;//用户名
// }
// type FieldType = {
//     icPriceMaterial: string;
//     icPriceAll: string;
// };

// const data: DataType[] = [
//     {
//         key: '1',
//         code: 'xixi112',
//         price: 32,

//     },
//     {
//         key: '2',
//         code: 'xixi22',
//         price: 42,

//     },
//     {
//         key: '3',
//         code: 'hehe23',
//         price: 32,

//     },
//     {
//         key: '4',
//         code: 'hehe1232',
//         price: 32,

//     },
//     {
//         key: '4',
//         code: 'hehe123',
//         price: 32,

//     },
//     {
//         key: '5',
//         code: 'hehe1235',
//         price: 32,

//     },
//     {
//         key: '6',
//         code: 'hehe1236',
//         price: 32,

//     },
//     {
//         key: '7',
//         code: 'hehe1237',
//         price: 32,

//     },
//     {
//         key: '8',
//         code: 'hehe1238',
//         price: 32,

//     },
//     {
//         key: '9',
//         code: 'hehe1239',
//         price: 32,

//     },
// ];

import { DownOutlined, UserOutlined, QuestionCircleOutlined, BellOutlined, KeyOutlined, LogoutOutlined, GiftOutlined, AccountBookOutlined, ContainerOutlined, MenuFoldOutlined, UsergroupAddOutlined, TableOutlined } from "@ant-design/icons";
import { useContext, useEffect, useState } from "react";
import {
    put, get,
    // post,
    getUseUrl
} from "../../util/AjaxUtils.ts";
import { getLoginflag } from '../../request/api'
import { GlobalContext, GlobalDispatchContext, reloadUser } from "../../context/GlobalContext.ts";
import UserEdit from "../../components/user/UserEdit.tsx";
import PasswordChange from "../../components/password/PasswordChange.tsx";
// import headRightBg from '../../assets/head-right-bg.png';
import InvoiceList from "../../components/invoice/InvoiceList.tsx";
import logoImg from '../../static/head/logo.png'
// import userImg from '../../static/homeimg/userimg.png'
import kf from '../../static/head/kf.png'
import kfImg from '../../static/head/kfImg.png'
import { reMenuActive } from '../../util/cache';
// import BelongPeople from '../../components/BelongPeople/BelongPeople.tsx'
import BelongPeople from '../../components/BelongPeople/BelongPeople.tsx'
import ContactPeople from '../../components/ContactPeople/ContactPeople.tsx'
import inv from '../../static/inv.png'
import MyOrder from '../../components/myOrder/MyOrder.tsx'
import NoticeModal from '../../components/NoticeModal/NoticeModal.tsx';
import type {
    TableColumnsType,
} from 'antd';
// import HeadCouponModal from '../../components/CouponModal/HeadCouponModal.tsx'
export default function Head() {
    // lyp
    const [form] = Form.useForm<any>();
    const [isUpdateWxUsernamePhone, setIsUpdateWxUsernamePhone] = useState(false); // 绑定手机号号弹窗
    const [userId, setUserId] = useState(''); // 验证码ID
    const submit = async (phone: any, code: any) => {
        try {
            const formData = new URLSearchParams();
            formData.append('userId', userId);
            formData.append('phone', phone);
            formData.append('smsCode', code);

            const res = await updatePhone(formData.toString());
            console.log(res);

        } catch (error: any) {
            setPhoneLoading(false)
            if (error.response) {
                const data = error.response.data;
                messageApi.open({
                    type: 'error',
                    content: data.msg ? data.msg : `${data.path}(${data.status})`,
                });
            } else {
                console.error(error)
            }
        }
    }
    const [phoneloading, setPhoneLoading] = useState(false)
    const onFinish = async (values: any) => {
        // console.log('Success:', values);
        try {
            const res = await checkPhone(values.phone)
            // console.log(res);
            if (res.data == 'SUCCESS') {
                setPhoneLoading(true)
                submit(values.phone, values.smsCode)
                setPhoneLoading(false)
            } else {
                messageApi.open({
                    type: 'error',
                    content: '手机号已被绑定,请更换手机号',
                });
            }

        } catch (error: any) {

            if (error.response) {
                const data = error.response.data;
                messageApi.open({
                    type: 'error',
                    content: data.msg ? data.msg : `${data.path}(${data.status})`,
                });
            } else {
                console.error(error)
            }
        }

    };
    const [countdown, setCountdown] = useState(0); // 倒计时状态

    const sendCode = async () => {
        try {
            // 验证手机号输入项
            await form.validateFields(['phone']);

            setCountdown(120);
            console.log('发送验证码');
            const timer = setInterval(() => {
                setCountdown((prevCountdown) => {
                    if (prevCountdown > 0) {
                        return prevCountdown - 1;
                    } else {
                        clearInterval(timer);
                        return 0;
                    }
                });
            }, 1000);
            // 获取表单phone的值
            // const phone = form.getFieldValue('phone');
            await getCode(form.getFieldValue('phone'))

        } catch (error: any) {

            if (error.response) {
                const data = error.response.data;
                messageApi.open({
                    type: 'error',
                    content: data.msg ? data.msg : `${data.path}(${data.status})`,
                });
            } else {
                console.error(error)
            }
        }

    }



    const [packloading, setPackloading] = useState(false)
    const [packList, setPackList] = useState<any[]>([]) //服务包列表
    const [packPage, setPackPage] = useState(1) //服务包分页
    const [packTotal, setPackTotal] = useState(0) //服务包总数
    // const [packageType, setPackageType] = useState('')
    // 获取我得服务包信息
    const getPickList = (page: number, packageType: string) => {

        get<any>({
            messageApi,
            url: `/api/proj/servicepkg/packageorder/listpage/self`,
            config: {
                params: {
                    page: page,
                    rows: 10,
                    packageType: packageType
                }
            },
            onBefore() {
                setPackloading(true)
            },
            onSuccess({ data }) {

                setPackList(data.rows)
                setPackTotal(data.total)

            },
            onFinally() {
                setPackloading(false)
            }
        })
    }
    // useEffect(() => {
    //     getPickList();
    // }, [packPage]);


    // const [page, setPage] = useState(1) //邀请码使用人数分页
    // const [total, setTotal] = useState(0) //邀请码使用人数总量
    // const [icListLoading, setIcListLoading] = useState(false)

    // const [myInvModal, setMyInvModal] = useState(false) //我的邀请码弹窗
    // const [createInvModal, setCreateInvModal] = useState(false) //创建邀请码弹窗
    // const [icModal, setIcModal] = useState(false) //查看邀请码详情弹窗
    // const [selectIc, setSelectIc] = useState('') //选中的邀请码


    const redxuState: any = useSelector(state => state)
    // const [packageType, setPackageType] = useState('')
    const packNum = redxuState.packNum
    const phoneModal = redxuState.phoneModal
    // const packItems: MenuProps['items'] = [
    //     {
    //         key: '1',
    //         label: (
    //             <div
    //                 onClick={() => {
    //                     setPackageModal(true)
    //                     setPackPage(1);
    //                     getPickList(1, 'ALL')
    //                     setPackageType('ALL')

    //                 }}
    //             >
    //                 <span style={{
    //                     fontWeight: 'bold'
    //                 }}>全托管 : {packNum.ALL}件</span>
    //             </div>

    //         ),
    //     },
    //     {
    //         key: '2',
    //         label: (
    //             <div
    //                 onClick={() => {
    //                     setPackageModal(true)
    //                     setPackPage(1);
    //                     getPickList(1, 'MATERIAL')
    //                     setPackageType('MATERIAL')

    //                 }}
    //             >
    //                 <span style={{
    //                     fontWeight: 'bold'
    //                 }}>写材料 : {packNum.MATERIAL}件</span>
    //             </div>
    //         ),

    //     },


    // ]
    // 消息通知弹窗
    const [noticeModal, setNoticeModal] = useState(false)
    // 客服弹窗
    const [kfModal, setkfModal] = useState(false)
    // 未读消息数
    const [unRead, setUnRead] = useState(0)
    // 获取未读消息总数
    const getUnRead = () => {
        get<any>({
            messageApi,
            url: '/api/user-msg/count-un-read/self',
            onSuccess({ data }) {
                // console.log(data);
                setUnRead(data.data)
            }
        })
    }

    // 邀请码弹窗
    const [invitationModal, setinvitationModal] = useState(false)
    // 邀请码弹窗加载
    const [isLoading, setisLoading] = useState(false)
    // 解除绑定邀请码弹窗
    // const [relieveModal, setRelieveModal] = useState(false)
    // 申请的邀请码
    // const [invNum, setInvNum] = useState('')
    // 输入的邀请码
    const [inInvNum, setInInvNum] = useState('')
    // 已绑定的邀请码
    const [bindingInvNum, setBindingInvNum] = useState('')
    // 邀请码申请状态
    // const [icStatus, setIcStatus] = useState('')
    // 邀请码返利比例
    // const [icRebateRatio, seticRebateRatio] = useState('')
    // 全托管分账
    // const [icPriceAll, seticPriceAll] = useState(0)
    // 写材料分账
    // const [icPriceMaterial, seticPriceMaterial] = useState(0)
    // 获取邀请码申请状态
    // const getIcStatus = () => {
    //     get<any>({
    //         messageApi,
    //         url: '/api/ic/apply/get/self',
    //         onSuccess({ data }) {
    //             // console.log(data);
    //             if (data) {
    //                 setIcStatus(data.applyStatus)
    //             }
    //         }
    //     })
    // }
    // 获取邀请码信息
    const getIc = () => {
        get<any>({
            messageApi,
            url: '/api/ic/get/self',
            onBefore() {
                setisLoading(true)
            },
            onSuccess({ data }) {
                // console.log(data);
                // setInvNum(data.ic)
                setBindingInvNum(data.relationIc)
                // seticRebateRatio(data.icRebateRatio)
                // seticPriceAll(Number(data.icPriceAll) / 100 * Number(data.icRebateRatio) / 100)
                // seticPriceMaterial(Number(data.icPriceMaterial) / 100 * Number(data.icRebateRatio) / 100)
                if (data.ic == '') {
                    // getIcStatus()
                }
            },
            onFinally() {
                setisLoading(false)
            }
        })
    }
    // 绑定邀请码
    const putIc = () => {
        put<any>({
            messageApi,
            url: `/api/ic/update-relation-ic`,
            body: {
                value: inInvNum
            },
            onBefore() {

            },
            onSuccess() {
                // messageApi.success('保存成功,点击编辑按钮可继续修改项目简介');
                //    console.log(data);
                getIc()
            },
            onFinally() {

            }
        })
    }
    // 确定输入的邀请码事件
    const postInvNum = () => {
        if (!inInvNum) {
            messageApi.open({
                type: 'error',
                content: '请输入邀请码'
            })
        } else {
            // setBindingInvNum(inInvNum)
            // messageApi.open({
            //     type: 'success',
            //     content: '已绑定邀请码'
            // })
            putIc()
        }
    }
    // 我的邀请码列表
    // const [myIcList, setMyIcList] = useState([])
    // 获取我得邀请码列表
    // const getMyIcList = () => {
    //     get<any>({
    //         messageApi,
    //         url: '/api/ic/v2/list/self',
    //         // body: {
    //         //     value: inInvNum
    //         // },
    //         onBefore() {
    //             setIcListLoading(true)
    //         },
    //         onSuccess({ data }) {
    //             // console.log(data);
    //             setMyIcList(data)
    //             // setMyIcList([])
    //         },
    //         onFinally() {
    //             setIcListLoading(false)
    //         }
    //     })
    // }
    // const [minAllPrice, setMinAllPrice] = useState(0) //最低全托管折扣价
    // const [minMaterialPrice, setMinMaterialPrice] = useState(0) //最低写材料折扣价
    // 查看我得最低定价
    // const getMyIcMinPrice = () => {
    //     get<any>({
    //         messageApi,
    //         url: '/api/proj/charge/get',
    //         onBefore() {

    //         },
    //         onSuccess({ data }) {
    //             // console.log(data.projTypes);
    //             // console.log((data.projTypes.find((item:any) => item.type === 'MATERIAL')).price/100);

    //             setMinAllPrice((data.projTypes.find((item: any) => item.type === 'ALL')).price / 100)
    //             setMinMaterialPrice((data.projTypes.find((item: any) => item.type === 'MATERIAL')).price / 100)

    //         },
    //         onFinally() {

    //         }
    //     })
    // }
    // 查看我的邀请码是否超出限制
    // const getIcLimit = () => {
    //     get<any>({
    //         messageApi,
    //         url: '/api/ic/v2/list/self',
    //         onBefore() {

    //         },
    //         onSuccess({ data }) {
    //             // console.log(data);
    //             // console.log(data.length);

    //             if (data.length >= 10) {
    //                 messageApi.open({
    //                     type: 'error',
    //                     content: '您的邀请码已达上限'
    //                 })
    //             } else {
    //                 setCreateInvModal(true)
    //                 getMyIcMinPrice()
    //             }
    //         }
    //     })
    // }
    // 点击获取邀请码
    // const getInvNum = () => {
    //     post<any>({
    //         messageApi,
    //         url: `/api/ic/apply/apply`,
    //         onBefore() {

    //         },
    //         onSuccess() {
    //             messageApi.success('已申请')
    //             getIcStatus()
    //         },
    //         onFinally() {

    //         }
    //     })
    //     // setInvNum('RSDNQ5H7')
    // }

    // 表单事件
    // const onFinish: FormProps<FieldType>['onFinish'] = (values: any) => {
    //     // console.log('Success:', values.icPriceAll);
    //     // console.log('Success:', values.icPriceMaterial);
    //     post<any>({
    //         messageApi,
    //         url: `/api/ic/v2/save`,
    //         body: {
    //             icPriceAll: values.icPriceAll * 100,
    //             icPriceMaterial: values.icPriceMaterial * 100
    //         },
    //         onBefore() {
    //             setIcListLoading(true)
    //         },
    //         onSuccess() {
    //             // console.log(data);
    //             messageApi.success('创建成功')
    //             // 关闭弹窗
    //             setCreateInvModal(false)

    //         },
    //         onFinally() {
    //             setIcListLoading(false)
    //         }
    //     })
    // };

    // const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
    //     console.log('Failed:', errorInfo);
    // };
    // 使用的邀请码的人的信息列表
    // const [icList, setIcList] = useState<icDataType[]>([]);
    // 获取使用的邀请码的人的信息
    // const getIcUserInfo = (id: string, page: number) => {
    //     get<any>({
    //         messageApi,
    //         url: `/api/ic/v2/user-list/${id}`,
    //         config: {
    //             params: {
    //                 page: page,
    //                 rows: 10
    //             }
    //         },
    //         onBefore() {
    //             setIcListLoading(true)
    //         },
    //         onSuccess({ data }) {
    //             setIcList(data.rows)
    //             setTotal(data.total)

    //         },
    //         onFinally() {
    //             setIcListLoading(false)
    //         }

    //     })
    // }
    // 复制邀请码
    // const copyInvNum = (code: any) => {
    //     // 创建一个临时的 input 元素
    //     const tempInput = document.createElement('input');
    //     document.body.appendChild(tempInput);
    //     tempInput.value = code;

    //     // 选中 input 中的内容
    //     tempInput.select();
    //     tempInput.setSelectionRange(0, 99999); // 对于移动设备的支持

    //     // 执行复制操作
    //     try {
    //         document.execCommand('copy');
    //         messageApi.open({
    //             type: 'success',
    //             content: '已复制到剪切板'
    //         })
    //     } catch (err) {
    //         messageApi.open({
    //             type: 'error',
    //             content: '复制失败,请手动复制'
    //         })
    //     }

    //     // 移除临时的 input 元素
    //     document.body.removeChild(tempInput);
    // }
    // const columns: TableProps<DataType>['columns'] = [
    //     {
    //         title: '序号',
    //         align: 'center',
    //         dataIndex: 'usericId',
    //         key: 'usericId',
    //         render: (_text, _record, index) => <div>
    //             {index + 1}
    //         </div>,
    //     },
    //     {
    //         title: '邀请码',
    //         align: 'center',
    //         dataIndex: 'usericId',
    //         key: 'usericId',
    //         // render: (text) => <a>{text}</a>,
    //     },
    //     {
    //         title: '创建时间',
    //         align: 'center',
    //         dataIndex: 'createTime',
    //         key: 'usericId',
    //         // render: (text) => <a>{text}</a>,
    //     },
    //     {
    //         title: '写材料价格',
    //         align: 'center',
    //         dataIndex: 'icPriceMaterial',
    //         key: 'usericId',
    //         render: (text) => <>{text / 100}元</>
    //     },
    //     {
    //         title: '全托管价格',
    //         align: 'center',
    //         dataIndex: 'icPriceAll',
    //         key: 'usericId',
    //         render: (text) => <>{text / 100}元</>
    //     },
    //     // {
    //     //     title: '返利比例',
    //     //     align: 'center',
    //     //     dataIndex: 'icRebateTatio',
    //     //     key: 'usericId',
    //     //     render: (text) => <>{text}%</>,
    //     // },
    //     // {
    //     //     title: '产生的成交金额',
    //     //     align: 'center',
    //     //     dataIndex: 'totalMoney',
    //     //     key: 'usericId',
    //     // },

    //     {
    //         title: '操作',
    //         align: 'center',
    //         key: 'usericId',
    //         render: (_, record) => (
    //             <Space size="middle">

    //                 <a style={{
    //                     textDecoration: 'underline',
    //                 }} onClick={() => {
    //                     copyInvNum(record.usericId)
    //                 }}>复制</a>
    //                 <a style={{
    //                     textDecoration: 'underline',
    //                 }} onClick={() => {
    //                     setIcModal(true)
    //                     setSelectIc(record.usericId)
    //                     getIcUserInfo(record.usericId, page)
    //                 }}>查看使用用户</a>


    //             </Space>
    //         ),
    //     },
    // ];
    // const icColumns: TableProps<icDataType>['columns'] = [
    //     {
    //         title: '序号',
    //         align: 'center',
    //         dataIndex: 'index',
    //         key: 'userInfoId',
    //         render: (_text, _record, index) => <div>
    //             {index + 1}
    //         </div>,
    //     },
    //     // {
    //     //     title: '用户ID',
    //     //     align: 'center',
    //     //     dataIndex: 'userId',
    //     //     key: 'userInfoId',
    //     //     // render: (text) => <a>{text}</a>,
    //     // },
    //     {
    //         title: '账号',
    //         align: 'center',
    //         dataIndex: 'userUsername',
    //         key: 'userInfoId',
    //         // render: (text) => <a>{text}</a>,
    //     },
    //     {
    //         title: '昵称',
    //         align: 'center',
    //         dataIndex: 'userInfoName',
    //         key: 'userInfoId',
    //         // render: (text) => <a>{text}</a>,
    //     },
    //     {
    //         title: '最近登录时间',
    //         align: 'center',
    //         dataIndex: 'lastLoginTime',
    //         key: 'userInfoId',
    //         // render: (text) => <a>{text}</a>,
    //     },

    // ]
    const dispath = useDispatch()
    // 更新所属者表格储存至redux 
    const upBelongArray = () => {
        get({
            messageApi,
            url: `/api/proj-owner/list/self`,
            onBefore() {

            },
            onSuccess(data: any) {
                // console.log('所属者表格', data.data);
                // setBelongPeopleArray(data.data)
                // 存redux的belongArray
                dispath({
                    type: 'uparray',
                    val: data.data
                })
            },
            onFinally() {

            }
        })
    }
    const globalContext = useContext(GlobalContext);
    const globalDispatchContext = useContext(GlobalDispatchContext);
    const [messageApi, contextHolder] = message.useMessage();
    const [modal, modalHolder] = Modal.useModal();
    const [loading, setLoading] = useState<boolean>(false);
    const [isSelfModalOpen, setIsSelfModalOpen] = useState(false);
    const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false);
    const [isInvoiceModalOpen, setIsInvoiceModalOpen] = useState(false);
    // 我的订单弹窗
    const [myorderModal, setMyorderModal] = useState(false)
    // 所属者弹窗
    const [belongModal, setBelongModal] = useState(false)
    const [belongPeopleInfo, setBelongPeopleInfo] = useState({
        authorName: '',
        authorType: '',
        authorIdCardType: '',
        authorIdCard: '',
        authorCrcAccount: '',
        authorId: '',
        authorProvinceCity: ''
    })

    const setValue = () => {
        // console.log(value);
    }
    const setConcatValue = () => {

    }
    // 联系人弹窗
    const [contactModal, setContactModal] = useState(false)
    // 套餐包弹窗
    const [packageModal, setPackageModal] = useState(false)
    const [concatPeopleInfo, setConcatPeopleInfo] = useState({
        applyConcatId: '',
        applyContactCsaNo: '',
        applyContactEmail: '',
        applyContactName: '',
        applyContactPhone: '',
        applyContactCompany: ''
    })
    const packColumns: TableColumnsType<DataType> = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'packageOrderId',
            align: 'center',
            render: (_text, _record, index) => (packPage - 1) * 10 + index + 1, // 显示序号，从1开始

        },
        {
            title: '套餐名称',
            dataIndex: 'packageName',
            key: 'packageOrderId',
            // 居中显示
            align: 'center',
        },
        // packageType
        {
            title: '套餐类型',
            dataIndex: 'packageInfoAppDTO',
            key: 'packageOrderId',
            // 居中显示
            align: 'center',
            render: (text) => {
                return <div>{text.packageType == "ALL" ? '全托管' : '写材料'} </div>
            }
        },
        // {
        //     title: '套餐类型',
        //     dataIndex: 'packageInfoAppDTO',
        //     key: 'packageOrderId',
        //     // 居中显示
        //     align: 'center',
        //     render: (text) => {
        //         return <div>{text} </div>
        //     }
        // },
        {
            title: '价格',
            dataIndex: 'packageTotalMoney',
            key: 'packageOrderId',
            // 居中显示
            align: 'center',
            render: (text) => {
                return <div>{text / 100}元</div>
            }
        },
        {
            title: '剩余次数',
            dataIndex: 'packageTotalSurplusCount',
            align: 'center',
            key: 'packageOrderId',
            render: (text: number) => {
                return <div>{text} </div>
            }
        },
        {
            title: '总次数',
            dataIndex: 'packageTotalCount',
            align: 'center',
            key: 'packageOrderId',
            render: (text: any) => {
                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 [couponModal, setCouponModal] = useState(false)
    // const [belongArray,setBelongArray] = useState([])
    // // 获取初始所属者数组
    // const getLength = () => {
    //     get({
    //         messageApi,
    //         url: `/api/proj-owner/list/self`,
    //         onBefore() {

    //         },
    //         onSuccess(data: any) {
    //             // console.log('所属者表格', data.data);
    //             // setBelongPeopleArray(data.data)
    //             setBelongArray(data.data )
    //         },
    //         onFinally() {

    //         }
    //     })
    // }
    // // 获取更新的所属者数组并且做对比查看是否刷新网页
    // const getNewLength = () => {
    //     get({
    //         messageApi,
    //         url: `/api/proj-owner/list/self`,
    //         onBefore() {

    //         },
    //         onSuccess(data: any) {
    //             // console.log('所属者表格', data.data);
    //             // setBelongPeopleArray(data.data)
    //             console.log('查看结果',data.data != belongArray);

    //             // if (data.data == belongArray) {
    //             //     window.location.reload();
    //             // }
    //         },
    //         onFinally() {

    //         }
    //     })
    // }




    useEffect(() => {
        // getLength()
        reloadUser(messageApi, globalDispatchContext).then((data) => {
            // console.log('嘎嘎嘎哈哈', data);
            setUserId(data.userId)
            if (data.isUpdateWxUsernamePhone == 1) {
                // if (data.isUpdateWxUsernamePhone != 1) {
                setIsUpdateWxUsernamePhone(true);
                dispath({
                    type: 'changePhoneModal',
                    val: true
                })
            }
            //嘻嘻嘻
            // if(!data.hasUserInfo && data.isUpdateWxUsernamePhone != 1) {
            //     setIsSelfModalOpen(true);
            // }
            if (!data.hasUserInfo) {
                setIsSelfModalOpen(true);
            }
        });
    }, [globalContext.user]);
    const getUserData = () => {
        reloadUser(messageApi, globalDispatchContext).then((data) => {
            // console.log(data);

            //嘻嘻嘻
            if (!data.hasUserInfo) {
                setIsSelfModalOpen(true);
            }
            // if (!data.hasUserInfo && !phoneModal) {
            //     setIsSelfModalOpen(true);
            // }
        });
    }

    // 刷新用户信息
    const reloadUserInterval = async () => {
        await reloadUser(messageApi, globalDispatchContext);
    };
    // 我的套餐包统计
    const getMyPackNum = () => {
        get<any>({
            messageApi,
            url: `/api/proj/servicepkg/packageorder/count/self`,
            onBefore() {

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

            }
        })
    }

    useEffect(() => {
        getUnRead()
        // 五分钟刷新一次用户信息
        setInterval(reloadUserInterval, 5 * 60 * 1000);
        getMyPackNum()
        // console.log('是否关闭',phoneModal);

    }, [])
    const loginFlag = async () => {
        try {
            await getLoginflag(globalContext.user.userId)
            sessionStorage.setItem('isLoggedIn', 'true');

        }
        catch (error: any) {
            if (error.response) {
                const data = error.response.data;
                messageApi.open({
                    type: 'error',
                    content: data.msg ? data.msg : `${data.path}(${data.status})`,
                });
            } else {
                console.error(error)
            }
        }


    }
    useEffect(() => {
        if (globalContext.user.userId) {
            const islogin = sessionStorage.getItem('isLoggedIn');
            if (!islogin) {
                loginFlag()
            }
            // loginFlag()
        }
        // loginFlag()

    }, [globalContext.user.userId])

    const items: MenuProps['items'] = [
        {
            key: 'userinfo',
            label: (
                <div className="dropdown-item">
                    <UserOutlined />
                    <span className="title">个人信息</span>
                </div>
            ),
            onClick: () => {
                setIsSelfModalOpen(true);
            }
        },
        {
            key: 'changePass',
            label: (
                <div className="dropdown-item">
                    <KeyOutlined />
                    <span className="title">修改密码</span>
                </div>
            ),
            onClick: () => {
                setIsPasswordModalOpen(true);
            }
        },
        {
            key: 'invoice',
            label: (
                <div className="dropdown-item">
                    <AccountBookOutlined />
                    <span className="title">发票管理</span>
                </div>
            ),
            onClick: () => {
                setIsInvoiceModalOpen(true);
            }
        },
        {
            key: 'myorder',
            label: (
                <div className="dropdown-item">
                    {/* <UsergroupAddOutlined /> */}
                    <ContainerOutlined />
                    <span className="title">我的订单</span>
                </div>
            ),
            onClick: () => {
                setMyorderModal(true)
            }
        },
        {
            key: 'belong',
            label: (
                <div className="dropdown-item">
                    <MenuFoldOutlined />
                    <span className="title">产权所属者</span>
                </div>
            ),
            onClick: () => {
                setBelongModal(true)
            }
        },
        {
            key: 'contact',
            label: (
                <div className="dropdown-item">
                    <UsergroupAddOutlined />
                    <span className="title">产权联系人</span>
                </div>
            ),
            onClick: () => {
                setContactModal(true)
            }
        },
        {
            key: 'coupon',
            label: (
                <div className="dropdown-item">
                    <GiftOutlined />
                    <span className="title">优惠券</span>
                </div>
            ),
            onClick: () => {
                // setCouponModal(true)
                dispath({
                    type: 'changeCouponModal',
                    val: true
                })
            }
        },
        {
            key: 'package',
            label: (
                <div className="dropdown-item">
                    <TableOutlined />
                    <span className="title">套餐包</span>
                </div>
            ),
            onClick: () => {
                // setCouponModal(true)
                setPackageModal(true)
                setPackPage(1);
                getPickList(1, '')
                // setPackageType('')
            }
        },

        {
            key: 'logout',
            label: (
                <div className="dropdown-item">
                    <LogoutOutlined />
                    <span className="title">退出系统</span>
                </div>
            ),
            onClick: () => {
                reMenuActive()
                // 清除缓存
                sessionStorage.clear()
                window.location.href = '/copyright/logout'
            }
        },


    ]

    return (
        <>
            <div className="head">
                <div className="center">
                    <div className="left">
                        {/* <span className="sys-title">AI引擎软著</span>
                        <Divider type="vertical"/>
                        <span className="sys-title-sub">软件著作权一站式服务平台</span> */}
                        <img src={logoImg} alt="" />
                    </div>
                    {/* <div className="right" style={{backgroundImage: `url(${headRightBg})`}}> */}

                    <div className="right">
                        <div className='kf' onClick={() => {
                            setkfModal(true)
                        }}>
                            <div className='kfIcon'>
                                <img src={kf} width={20} alt="" />
                            </div>
                            <div className='kfText'>
                                在线客服
                            </div>

                        </div>
                        <div className='headLine'></div>

                        {/* <div style={{ padding: '10px 20px', background: 'rgba(255,228,181,0.2)', display: 'flex' }}>
                            <div style={{
                                fontSize: 16,
                                color: '#FF9F08',
                                fontWeight: 700,
                                cursor: 'pointer'
                            }}
                                onClick={() => {
                                    setPackageModal(true)
                                    setPackPage(1);
                                    getPickList(1, '')
                                }}
                            > 套餐包</div>

                            <div className='headLine' style={{ background: "#FFEDCA" }}></div>
                            <div>
                                <span style={{
                                    fontSize: 12,
                                    color: '#FF9F08',
                                    // fontWeight: 700,
                                }}>全托管</span>
                                <span style={{
                                    fontSize: 16,
                                    color: '#FF9F08',
                                    fontWeight: 700,
                                    marginLeft: 5,
                                    marginRight: 5,
                                }}>{packNum.ALL}</span>
                                <span style={{
                                    fontSize: 12,
                                    color: '#FF9F08',
                                    // fontWeight: 700,
                                }}>件</span>
                            </div>
                            <div style={{ marginLeft: 10 }}>
                                <span style={{
                                    fontSize: 12,
                                    color: '#FF9F08',
                                    // fontWeight: 700,
                                }}>写材料</span>
                                <span style={{
                                    fontSize: 16,
                                    color: '#FF9F08',
                                    fontWeight: 700,
                                    marginLeft: 5,
                                    marginRight: 5,
                                }}>{packNum.MATERIAL}</span>
                                <span style={{
                                    fontSize: 12,
                                    color: '#FF9F08',
                                    // fontWeight: 700,
                                }}>件</span>
                            </div>
                        </div> */}

                        <div style={{
                            padding: '3px 20px',
                            // boxSizing: 'border-box',
                            background: 'rgba(222,222,222,0.3)',
                            marginTop: -3,
                        }}>
                            <div style={{
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                cursor: 'pointer',
                            }}
                                onClick={() => {
                                    setPackageModal(true)
                                    setPackPage(1);
                                    getPickList(1, '')
                                }}
                            >
                                <img src={pack} width={19} height={19} alt="" />
                                <div style={{
                                    fontSize: 14,
                                    marginLeft: 5
                                }}>套餐包</div>
                            </div>
                            <div style={{
                                display: 'flex',
                                alignItems: 'center',
                                marginTop: 5
                            }}>
                                <div>
                                    <span style={{
                                        fontSize: 12,
                                        color: '#FF9F08',

                                    }}>全托管  </span>
                                    <span
                                        style={{
                                            fontSize: 16,
                                            color: '#FF9F08',
                                            fontWeight: 700,
                                        }}
                                    >{packNum.ALL}</span>
                                    <span style={{
                                        fontSize: 12,
                                        color: '#FF9F08',

                                    }}>  件</span>
                                </div>
                                <div style={{
                                    marginLeft: 15
                                }}>
                                    <span style={{
                                        fontSize: 12,
                                        color: '#FF9F08',

                                    }}>写材料  </span>
                                    <span
                                        style={{
                                            fontSize: 16,
                                            color: '#FF9F08',
                                            fontWeight: 700,
                                        }}
                                    >{packNum.MATERIAL}</span>
                                    <span style={{
                                        fontSize: 12,
                                        color: '#FF9F08',

                                    }}> 件</span>
                                </div>
                            </div>
                        </div>

                        <div className='headLine'></div>
                        {/* <div className='head-nav' onClick={() => {
                            window.open('https://www.aimzhu.com/operator/route/agreementportal/view?agreementId=c0c5683a-bef3-40c3-8395-900a362ea234&title=系统操作流程')
                        }}>
                            <QuestionCircleOutlined />
                        </div> */}
                        {/* <div className='headLine'></div> */}
                        <BalanceHead />
                        {/* <div className='headLine'></div> */}


                        <RechargeHead />
                        <div className='headLine'></div>



                        {/* <Dropdown

                            menu={{ items: packItems }}
                        >

                            <div className='kfText' style={{
                                fontSize: 16,
                                color: '#FF9F08',
                                fontWeight: 700,
                                cursor: 'pointer'
                            }}
                            // onClick={() => {
                            //     setPackageModal(true)
                            //     setPackPage(1);
                            //     getPickList(1,packageType)

                            // }}
                            >套餐包</div>


                        </Dropdown> */}

                        {/* <div className='headLine'></div> */}
                        <div className='invitationButton' onClick={() => {
                            setinvitationModal(true)
                            getIc()
                        }}>
                            邀请码
                        </div>
                        <div className='headLine'></div>
                        <div className='head-nav' title='系统操作流程' onClick={() => {

                            // window.open('https://www.aimzhu.com/operator/route/agreementportal/view?agreementId=c0c5683a-bef3-40c3-8395-900a362ea234&title=系统操作流程')
                            getUseUrl()

                        }}>
                            <QuestionCircleOutlined />
                        </div>
                        <div className='headLine'></div>
                        <div className='head-notice' onClick={() => {
                            setNoticeModal(true)
                        }}>
                            <BellOutlined />
                            <div className='noticeNum' style={{ display: unRead == 0 ? 'none' : 'block' }}>{unRead}</div>
                        </div>
                        <div className='headLine'></div>

                        {/*<MessageHead/>*/}
                        <div style={{ display: 'flex', alignContent: 'center', padding: '0', cursor: 'pointer' }}>
                            {/* <div style={{ width: '50px', height: '50px', borderRadius: '25px', marginLeft: '', marginRight: '10px' }} >
                                <img src={userImg} alt="" width={50} height={50} />
                            </div> */}
                            <Dropdown menu={{
                                items: items
                            }}>
                                <Space>
                                    {/* 您好：{globalContext.user.nickname} */}
                                    个人中心
                                    <DownOutlined />
                                </Space>
                            </Dropdown>
                        </div>
                    </div>
                </div>
            </div>
            <Modal open={isSelfModalOpen && !phoneModal}
                centered
                zIndex={100}
                destroyOnClose={true}
                title="个人信息"
                footer={false}
                onCancel={() => {
                    if (!globalContext.user.hasUserInfo) {
                        messageApi.info('请完善个人信息');
                        return;
                    }
                    setIsSelfModalOpen(false)
                    // console.log('用户信息',globalContext.user.hasUserInfo);

                }}>
                <UserEdit handleConfirm={(data) => {
                    modal.confirm({
                        title: '提示',
                        content: '确定保存吗？',
                        okText: '确认',
                        cancelText: '取消',
                        centered: true,
                        okButtonProps: {
                            style: {
                                backgroundColor: 'var(--color-primary)'
                            }
                        },
                        onOk: () => {
                            setIsSelfModalOpen(false);
                            put({
                                messageApi,
                                url: '/api/user-info/update-self',
                                body: data,
                                onBefore() {
                                    setLoading(true);
                                },
                                onSuccess() {
                                    messageApi.success('修改成功');
                                },
                                onFinally() {
                                    setLoading(false);
                                }
                            })
                        }
                    });
                }} />
            </Modal>
            <Modal open={isPasswordModalOpen}
                centered
                title="修改密码"
                footer={false}
                onCancel={() => {
                    setIsPasswordModalOpen(false)
                }}>
                <PasswordChange handleConfirm={(data) => {
                    modal.confirm({
                        title: '提示',
                        content: '确定修改吗？',
                        okText: '确认',
                        cancelText: '取消',
                        okButtonProps: {
                            style: {
                                backgroundColor: 'var(--color-primary)'
                            }
                        },
                        onOk: () => {
                            put({
                                messageApi,
                                url: '/api/user/update-password',
                                body: data,
                                onBefore() {
                                    setLoading(true);
                                },
                                onSuccess() {
                                    setIsPasswordModalOpen(false);
                                    messageApi.success('修改成功，重新登录生效');
                                },
                                onFinally() {
                                    setLoading(false);
                                }
                            })
                        }
                    });
                }} />
            </Modal>
            <Modal open={isInvoiceModalOpen}
                centered
                title="发票管理"
                width={1300}
                footer={false}
                onCancel={() => setIsInvoiceModalOpen(false)}
                destroyOnClose
            >
                <InvoiceList />
            </Modal>
            <Modal title="知识产权所属者"
                destroyOnClose
                centered
                open={belongModal}
                width={1200}

                footer={null}
                onCancel={() => {
                    upBelongArray()
                    // getNewLength()
                    setBelongModal(false)

                }}>

                <BelongPeople closeModal={() => { setBelongModal(false) }} setBelongPeopleInfo={setBelongPeopleInfo} belongPeopleInfo={belongPeopleInfo} setValue={setValue} isShow={false} ></BelongPeople>
            </Modal>
            <Modal title="知识产权联系人"
                destroyOnClose
                centered
                open={contactModal}
                width={1200}

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

                }}>

                <ContactPeople isShow={false} closeModal={() => { setContactModal(false) }} setConcatPeopleInfo={setConcatPeopleInfo} concatPeopleInfo={concatPeopleInfo} setConcatValue={setConcatValue}></ContactPeople>
            </Modal>
            <Modal title="套餐包"
                destroyOnClose
                centered
                open={packageModal}
                width={1000}
                footer={null}
                onCancel={() => {
                    setPackageModal(false)
                    setPackPage(1);
                }}>
                <Spin tip="加载中..." spinning={packloading} >
                    <Table
                        columns={packColumns}
                        dataSource={packList}
                        pagination={{
                            defaultPageSize: 10, // 设置默认一页显示 5 条数据,
                            current: packPage,
                            total: packTotal,
                            onChange: (page: number) => {
                                setPackPage(page);
                                getPickList(page, '')
                                // console.log(page);
                            }
                        }}
                        rowKey="packageOrderId"
                    />
                </Spin>
            </Modal>
            <Modal title="邀请码"
                destroyOnClose
                centered
                open={invitationModal}
                width={578}

                footer={null}
                onCancel={() => {
                    // getNewLength()
                    setinvitationModal(false)
                    // setInvNum('')
                    setInInvNum('')
                }}>
                <Spin tip="加载中..." spinning={isLoading}>
                    {/* <div className='invitation-box'> */}
                    {/* <div className='invBox-top'>
                            <div className='invBox-title'>
                                我的邀请码
                            </div>
                            <div className='invBox-line'></div>
                            <div className='invBox-btn' onClick={() => {
                                getInvNum()
                            }} style={{ display: invNum || icStatus ? 'none' : 'block' }}>
                                点击申请
                            </div>
                            <div className='invBox-btnTwo' style={{ display: icStatus == 'PENDING' ? 'block' : 'none' }}>
                                正在申请中
                            </div>
                            <div className='invBox-btnthree' style={{ display: icStatus == 'REJECTED' ? 'block' : 'none' }}>
                                <div className='errorBox'>
                                    <div className='errorBox-title'> 申请失败!</div>
                                    <div className='errorBox-btn' onClick={() => {
                                        getInvNum()
                                    }}>重新申请</div>
                                </div>

                            </div>
                            <div className='invBox-Num' style={{ display: invNum ? 'block' : 'none' }}>
                                <div className='invNum-box'>
                                    <div className='invNum'>
                                        {invNum}
                                    </div>
                                    <div className='copyBtn' onClick={() => {
                                        copyInvNum()
                                    }}>
                                        复制
                                    </div>
                                </div>
                            </div>
                        </div> */}
                    {/* <div className='invBox-top'>
                            <div className='invBox-titleTop'

                            >
                                <span
                                    onClick={() => {
                                        getMyIcList()
                                        setMyInvModal(true)
                                    }}
                                    style={{
                                        cursor: 'pointer'
                                    }}>查看我的邀请码</span>
                            </div>
                            <div className='invBox-lineTop'></div>
                            <div className='createInv'>
                                <span
                                    onClick={() => {
                                     
                                        getIcLimit()

                                    }}
                                    style={{
                                        cursor: 'pointer'
                                    }}>创建邀请码</span>
                            </div>
                        </div> */}


                    {/* <div className='invBox-bot'>
                            <div className='invBox-tips' >
                              
                                {icRebateRatio ?
                                    (<div>
                                        <div>  邀请码分享给他人，即可获得{icRebateRatio}%佣金</div>
                                       
                                    </div>

                                    )
                                    : (<>邀请码分享给他人，即可获得佣金</>)}
                             

                            </div>
                          
                        </div> */}

                    {/* </div> */}
                    <div className='invitation-box'>
                        <div className='invBox-top'>
                            <div className='invBox-title' style={{
                                fontSize: '24px',
                                width: bindingInvNum ? 264 : 362,
                            }}>
                                他人邀请码
                            </div>
                            <div className='invBox-line'></div>
                            <div className='invBox-input' style={{ display: bindingInvNum ? 'none' : 'block' }}>
                                <div className='invInput'>
                                    <Input value={inInvNum} style={{ width: 261, height: 60, borderRadius: 25, fontSize: 24, textAlign: 'center' }} onChange={(e) => {
                                        setInInvNum(e.target.value)
                                    }} />
                                    <div className='invImg' onClick={() => {
                                        postInvNum()
                                    }}>
                                        <img src={inv} alt="" style={{ width: 31, height: 30 }} />
                                    </div>
                                </div>
                            </div>
                            <div className='invBox-inputl' style={{ display: bindingInvNum ? 'block' : 'none' }}>
                                <div className='invInputl'>
                                    <div className='invNum-box'>
                                        <div className='invNum' >
                                            {bindingInvNum}
                                        </div>
                                        {/* <div className='relieveBtn' onClick={() => {
                                        setRelieveModal(true)
                                    }}>
                                        解绑
                                    </div> */}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className='invBox-bot'>
                            <div className='invBox-tips' >
                                {bindingInvNum ? '已绑定邀请码' : '输入他人的邀请码，即可获得相应优惠'}
                            </div>


                        </div>
                    </div>
                </Spin>
            </Modal>
            {/* <Modal title="提示"
                okText="确认"
                cancelText="取消"
                destroyOnClose
                open={relieveModal}
                onOk={() => {
                    setBindingInvNum('')
                    setInInvNum('')
                    setRelieveModal(false)
                }}
                onCancel={() => {
                    setRelieveModal(false)

                }}>
                <div>
                    确定解绑当前邀请码吗?
                </div>
            </Modal> */}
            <Modal title="我的订单"
                footer={null}
                centered
                // okText="确认"
                // cancelText="取消"
                destroyOnClose
                open={myorderModal}
                // onOk={() => {
                //     setBindingInvNum('')
                //     setInInvNum('')
                //     setRelieveModal(false)
                // }}
                width={1500}
                onCancel={() => {
                    setMyorderModal(false)

                }}>
                <MyOrder></MyOrder>
            </Modal>
            <Modal title="消息通知"
                footer={null}
                centered
                destroyOnClose
                open={noticeModal}

                width={1200}
                onCancel={() => {
                    setNoticeModal(false)
                    getUnRead()
                    // setUnRead(0)
                }}>
                <NoticeModal></NoticeModal>
            </Modal>
            <Modal title="在线客服"
                footer={null}

                destroyOnClose
                open={kfModal}
                centered
                width={450}
                onCancel={() => {
                    setkfModal(false)

                }}>
                <div className='kfBox'>
                    <div className='kfTitle'>微信扫码咨询客服</div>
                    <div className='kfImg'>
                        <img src={kfImg} width={300} alt="" />
                    </div>
                    <div className='kfHttp' >
                        <span>若已登录电脑端，</span><span className='kfHttpText' onClick={
                            () => {
                                window.open('https://work.weixin.qq.com/kfid/kfc599f9d40b65ac392')
                            }
                        }>点击联系客服</span>
                    </div>
                </div>
            </Modal>

            {/* <Modal
                title="绑定手机号"
                okText="确认"
                cancelText="取消"
                destroyOnClose={true}
                footer={null}
                open={isUpdateWxUsernamePhone}
               
                onCancel={() => {
                    setIsUpdateWxUsernamePhone(false);
                    dispath({
                        type: 'changePhoneModal',
                        val: false
                    })
                    getUserData()
                }}
                width={500}
                centered
          
            >
                <div className='phoneBox'>
                    <Form name="Form"
                        form={form}
                        onFinish={onFinish}
                        initialValues={{ softWare: '' }}
                 
                    >
                        <div className='phoneBoxInput'>
                            <div className='phoneBoxTitle'>手机号<span style={{ color: 'red' }}>*</span></div>
                            <Form.Item name="phone" label="" rules={[{ required: true, message: '请输入手机号' },
                            {
                                pattern: /^1[3-9]\d{9}$/,
                                message: '请输入有效的手机号'
                            }
                            ]}>
                                <Input style={{
                                    width: '300px',
                                    height: '42px',
                                }} placeholder="请输入手机号" />
                            </Form.Item>
                        </div>
                        <div className='phoneBoxInput' style={{
                            position: 'relative',
                       
                        }}>
                            <div className='phoneBoxTitle'>验证码<span style={{ color: 'red' }}>*</span></div>
                            <Form.Item name="smsCode" label="" rules={[{ required: true, message: '请输入验证码' }]}>
                                <Input style={{
                                    width: '300px',
                                    height: '42px',
                                }} placeholder="请输入验证码" />
                            </Form.Item>
                            {countdown === 0 ? (
                                <div
                                    style={{
                                        position: 'absolute',
                                        right: '0',
                                        top: '0',
                                        width: '90px',
                                        height: '42px',
                                        justifyContent: 'center',
                                        alignItems: 'center',
                                        display: 'flex',
                                        cursor: 'pointer',
                                        color: '#929292',
                                        paddingRight: 10,
                                    }}
                                    onClick={sendCode}
                                >
                                    发送验证码
                                </div>
                            ) : (
                                <div
                                    style={{
                                        position: 'absolute',
                                        right: '0',
                                        top: '0',
                                        width: '90px',
                                        height: '42px',
                                        justifyContent: 'center',
                                        alignItems: 'center',
                                        display: 'flex',
                                        color: '#929292',
                                        paddingRight: 10,
                                    }}
                                >
                                    倒计时 {countdown} 秒
                                </div>
                            )}
                        </div>
                        <div>
                            <Form.Item>
                                <Button type="primary" htmlType="submit">
                                    提交
                                </Button>
                            </Form.Item>
                        </div>

                    </Form>
                </div>
            </Modal> */}
            {/* 绑定手机号 */}

            <div style={{
                display: isUpdateWxUsernamePhone ? 'block' : 'none',
                position: 'fixed', // 固定定位
                top: 0,
                left: 0,
                width: '100vw', // 宽度占满视口
                height: '100vh', // 高度占满视口
                backgroundColor: 'rgba(0, 0, 0, 0.5)', // 半透明黑色背景
                zIndex: 100, // 确保在其他元素之上

            }}>

                <div style={{
                    width: '100%',
                    height: '100%',
                    // background:'pink'
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                }}>
                    <Spin tip="正在绑定..." spinning={phoneloading} >
                        <div className='phoneMaskBox'>
                            <div className='phoneBoxLeft'>
                                <div
                                    style={{
                                        marginTop: 79,
                                        marginLeft: 43
                                    }}
                                >
                                    <img src={title} alt="" width={79} height={27} />
                                </div>
                                <div
                                    style={{
                                        marginTop: 16,
                                        marginLeft: 43
                                    }}
                                >
                                    <img src={titleB} alt="" width={109} height={17} />
                                </div>
                                <div
                                    style={{
                                        marginTop: 10,
                                        marginLeft: 38,
                                    }}
                                >
                                    <img src={line} alt="" width={180} height={19} />
                                </div>
                            </div>
                            <div className='phoneBoxRight'>
                                <div style={{
                                    width: '100%',
                                    fontSize: 20,
                                    display: 'flex',
                                    justifyContent: 'flex-end',
                                    // height: 21,
                                    // background: 'pink'

                                }}>
                                    <div style={{ cursor: 'pointer' }} onClick={() => {
                                        setIsUpdateWxUsernamePhone(false);
                                        dispath({
                                            type: 'changePhoneModal',
                                            val: false
                                        })
                                        getUserData()
                                    }}>
                                        <CloseOutlined />
                                    </div>

                                </div>
                                <div style={{
                                    // background:'pink',
                                    width: '100%',
                                    height: '100%',
                                    display: 'flex',
                                    flexDirection: 'column',
                                    justifyContent: 'center',
                                    alignItems: 'center'
                                }}>
                                    <div className='phoneTitle'>您正在绑定手机号</div>
                                    <div className='phoneTitleB'>绑定手机号后，您可以通过手机号码登录平台</div>
                                    <div style={{
                                        marginTop: 30
                                    }}>
                                        <Form name="Form"
                                            form={form}
                                            onFinish={onFinish}
                                            initialValues={{ softWare: '' }}
                                        // style={{ maxWidth: 600 }}
                                        >
                                            <div className='phoneBoxInput'>

                                                <Form.Item name="phone" label="" rules={[{ required: true, message: '请输入手机号' },
                                                {
                                                    pattern: /^1[3-9]\d{9}$/,
                                                    message: '请输入有效的手机号'
                                                }
                                                ]}>
                                                    <Input style={{
                                                        width: '300px',
                                                        height: '42px',
                                                        fontSize: 16,
                                                        background: '#F7F7F7',
                                                    }} placeholder="请输入手机号" />
                                                </Form.Item>
                                            </div>
                                            <div className='phoneBoxInput' style={{
                                            }}>

                                                <Form.Item name="smsCode" label="" rules={[{ required: true, message: '请输入验证码' }]}>
                                                    <Input style={{
                                                        width: '200px',
                                                        height: '42px',
                                                        fontSize: 16,
                                                        background: '#F7F7F7',
                                                    }} placeholder="请输入验证码" />
                                                </Form.Item>
                                                {countdown === 0 ? (
                                                    <div
                                                        className='sendCode'
                                                        // style={{

                                                        //     width: '90px',
                                                        //     height: '42px',
                                                        //     justifyContent: 'center',
                                                        //     alignItems: 'center',
                                                        //     display: 'flex',
                                                        //     cursor: 'pointer',
                                                        //     color: '#929292',
                                                        //     paddingRight: 10,
                                                        // }}
                                                        onClick={sendCode}
                                                    >
                                                        发送验证码
                                                    </div>
                                                ) : (
                                                    <div
                                                        className='sendCode'
                                                        style={{
                                                            cursor: 'unset',

                                                        }}
                                                    >
                                                        倒计时 {countdown} 秒
                                                    </div>
                                                )}
                                            </div>
                                            <div>
                                                <Form.Item>
                                                    <Button style={{
                                                        width: 300,
                                                        height: 42,
                                                        background: '#3B2C0D',
                                                        color: '#fff',
                                                        fontSize: 16,
                                                        borderRadius: 10,
                                                        marginTop: 20,
                                                    }}
                                                        type="primary" htmlType="submit"
                                                        disabled={phoneloading}
                                                    >
                                                        {phoneloading? '正在绑定...' : '绑定'}
                                                    </Button>
                                                </Form.Item>
                                            </div>

                                        </Form>
                                    </div>
                                    <div className='closeTitle' onClick={() => {
                                        setIsUpdateWxUsernamePhone(false);
                                        dispath({
                                            type: 'changePhoneModal',
                                            val: false
                                        })
                                        getUserData()
                                    }}>跳过，下次再说</div>
                                </div>
                            </div>
                        </div>
                    </Spin>
                </div>
            </div>


            {/* <Modal title="优惠券"
                footer={null}

                destroyOnClose
                open={couponModal}

                width={809}
                onCancel={() => {
                    // setCouponModal(false)
                    // setUnRead(0)
                }}>
                <HeadCouponModal closeModal={() => {
                    // setCouponModal(false)
                }}></HeadCouponModal>
            </Modal> */}
            {/* <Modal title="我的邀请码"
                // footer={null}
                centered
                destroyOnClose
                open={myInvModal}
                footer={null}
                width={1000}
                onCancel={() => {
                    setMyInvModal(false)

                }}>
                <Spin tip="加载中..." spinning={icListLoading}>
                    <div>

                        <Table columns={columns} dataSource={myIcList}

                            pagination={false}
                            bordered
                            key="usericId"
                            rowKey="usericId"
                            locale={{
                                emptyText: () => {
                                    return (
                                        <div style={{
                                            display: 'flex',
                                            justifyContent: 'center',
                                            alignItems: 'center',
                                            height: 300,
                                        }}>
                                            <Empty description="暂无邀请码" />
                                        </div>
                                    )
                                },
                            }}
                        />
                    </div>
                </Spin>
            </Modal> */}
            {/* <Modal title="创建邀请码"
                // footer={null}
                centered
                destroyOnClose
                open={createInvModal}
                footer={null}
                width={400}
                onCancel={() => {
                    setCreateInvModal(false)

                }}>
                <div style={{
                    paddingTop: 20,

                }}>
                    <Spin tip="加载中..." spinning={icListLoading}>
                        <Form
                            name="basic"
                            // labelCol={{ span: 8 }}
                            // wrapperCol={{ span: 16 }}
                            // style={{ maxWidth: 600 }}
                            initialValues={{ remember: true }}
                            onFinish={onFinish}
                            // onFinishFailed={onFinishFailed}
                            autoComplete="off"
                        >  <div style={{
                            display: 'flex',
                            // alignItems:'center',
                            justifyContent: "center"
                        }}>
                                <div style={{ fontSize: 16, height: 40, lineHeight: "40px", marginRight: 5, textWrap: "nowrap" }}> <span style={{ color: 'red' }}>*</span> 全托管价格</div>
                                <Form.Item<FieldType>
                                    // label={
                                    //     <div style={{ fontSize: 16 }}>全托管价格</div>
                                    // }
                                    name="icPriceAll"
                                    rules={[
                                        { required: true, message: '请输入写全托管价格' },
                                        {
                                            validator: (_, value) => {
                                                if (value && Number(value) < minAllPrice) {
                                                    return Promise.reject(new Error(`全托管价格不能小于${minAllPrice}`));
                                                }
                                                return Promise.resolve();
                                            },
                                        },
                                    ]}
                                >
                                    <InputNumber
                                        size="large"
                                        // min={minAllPrice}
                                        style={{ width: 250 }}
                                        placeholder={`全托管价格不能小于${minAllPrice}元`}
                                    />
                                </Form.Item>
                            </div>
                            <div style={{
                                display: 'flex',
                                // alignItems:'center',
                                justifyContent: "center"
                            }}>
                                <div style={{ fontSize: 16, height: 40, lineHeight: "40px", marginRight: 5, textWrap: "nowrap" }}> <span style={{ color: 'red' }}>*</span> 写材料价格</div>
                                <Form.Item<FieldType>

                                    // label={
                                    //     <div style={{ fontSize: 16 }}>写材料价格</div>
                                    // }
                                    name="icPriceMaterial"
                                    rules={[
                                        { required: true, message: '请输入写材料价格' },
                                        {
                                            validator: (_, value) => {
                                                if (value && Number(value) < minMaterialPrice) {
                                                    return Promise.reject(new Error(`写材料价格不能小于${minMaterialPrice}`));
                                                }
                                                return Promise.resolve();
                                            },
                                        },
                                    ]}
                                >
                                    <InputNumber
                                        // min={minMaterialPrice}
                                        size="large"
                                        placeholder={`写材料价格不能小于${minMaterialPrice}元`}
                                        style={{ width: 250 }} />
                                </Form.Item>
                            </div>


                            <Form.Item label={null}>
                                <div style={{
                                    // background:'pink',
                                    display: 'flex',
                                    justifyContent: 'center',
                                    alignItems: 'center',
                                    marginTop: 20,

                                }}>
                                    <Button type="primary" htmlType="submit" block size={'large'} >
                                        创建邀请码
                                    </Button>
                                </div>
                            </Form.Item>

                        </Form>
                    </Spin>
                </div>
            </Modal> */}
            {/* <Modal title={`邀请码${selectIc}使用用户`}
                // footer={null}
                centered
                destroyOnClose
                open={icModal}
                footer={null}
                width={1000}
                onCancel={() => {
                    setIcModal(false)

                }}>
                <Spin tip="加载中..." spinning={icListLoading}>


                    <Table columns={icColumns} dataSource={icList}

                        pagination={
                            {
                                pageSize: 10,
                                total: total,
                                onChange: (currentPage) => {
                                    setPage(currentPage);
                                    getIcUserInfo(selectIc, currentPage)
                                },
                                showSizeChanger: false,
                                current: page

                            }
                        }
                        bordered
                        key="userInfoId"
                        rowKey="userInfoId"
                        locale={{
                            emptyText: () => {
                                return (
                                    <div style={{
                                        display: 'flex',
                                        justifyContent: 'center',
                                        alignItems: 'center',
                                        height: 300,
                                    }}>
                                        <Empty description="暂无使用用户" />
                                    </div>
                                )
                            },
                        }}
                    />

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