import './payment.css';
import {
    Button,
    ConfigProvider,
    DatePicker,
    // Divider, 
    Flex,
    Form, GetProp, Image,
    Input,
    InputNumber,
    message,
    Radio,
    Spin,
    Upload, UploadProps,
    Tag,
    Modal,
    // Select,
    Table
} from "antd";
import {
    ReloadOutlined
} from '@ant-design/icons'
import { useEffect, useRef, useState } from "react";
import locale from 'antd/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { DevUserId, get, post, uploadImageUrl } from "../../util/AjaxUtils.ts";
import { UploadOutlined } from "@ant-design/icons";
import useMessage from "antd/es/message/useMessage";
import { errorImage } from "../../util/CommonUtil.ts";
import type {
    TableColumnsType,
    //  TableProps
} from 'antd';
import wx from '../../static/wx.png';
import zfb from '../../static/zfb.png';
import dg from '../../static/dg.png';
import nodate from '../../static/nodate.png';

// import { render } from 'react-dom';
interface DataType {
    key: React.Key;
    packageName: string;
    packageMoney: number;
    packageDescription: string;
    packageInfoId: string;
}

dayjs.locale('zh-cn');

type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];

type FormFieldType = {
    thirdParty: string;
    rechargeMoney: number;
    orgName: string;
    orgBank: string;
    orgNumber: string;
    rechargeFinalTime: string;
    rechargeVoucher: string;
}

type PayType = {
    accountRechargeId: string;
    thirdPartyPayUrl: string;
}

type PaySystemBank = {
    bankAccountName: string;
    bankName: string;
    bankNumber: string;
    bankRemark: string;
    bankUnionpayNumber: string;
}

enum ThirdPartyEnum {
    WX = '微信',
    ZFB = '支付宝',
    DGZZ = '对公转账'
}

interface IPaymentProps {
    handleConfirm(): void;

    handleCancel(): void;
    show: boolean;
}

export default function Payment(props: IPaymentProps) {
    // 服务包相关
    const [packPage, setPackPage] = useState(1); //服务包数据分页页码
    // 开启关闭弹窗时重置页码
    useEffect(() => {
        setPackPage(1);
    }, [props.show])
    const [packTotal, setPackTotal] = useState(0); //服务包数据分页总条数
    const [value, setValue] = useState('MATERIAL');//单选 服务包类型
    const onChange = (e: any) => {
        setValue(e.target.value);
        getPackageList(e.target.value, packPage);
        // setSelectedRowKeys([]);
    };
    const [packList, setPackList] = useState<any[]>([]);
    const [packageInfoId, setPackageInfoId] = useState('');//单选 服务包id
    // 获取套餐列表
    const getPackageList = (value: string, page: number) => {
        get<any>({
            messageApi,
            url: `/api/proj/servicepkg/packageinfo/listpage/${value}/self`,
            config: {
                params: {
                    page: page,
                    rows: 7,

                }
            },
            onSuccess({ data }) {
                setPackList(data.rows);
                setPackTotal(data.total);
            }
        })
    }
    useEffect(() => {
        getPackageList(value, packPage);
    }, [])
    const packColumns: TableColumnsType<DataType> = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'packageInfoId',
            align: 'center',
            // 宽度
            width: 80,
            render: (_text: number, _record: any, index: number) => {
                return <div>{(packPage - 1) * 7 + index + 1}</div>
            }
        },
        {
            title: '套餐名称',
            width: 150,
            align: 'center',
            dataIndex: 'packageName',
            key: 'packageInfoId',
            ellipsis: {
                showTitle: false,
            },
            render: (text: string) => {
                return <div title={text}>{text}</div>
            }
        },
        {
            title: '套餐说明',
            width: 200,
            align: 'center',
            dataIndex: 'packageDescription',
            key: 'packageInfoId',
            ellipsis: {
                showTitle: false,
            },
            render: (text: string) => {
                return <div title={text}>{text}</div>
            }

        },
        {
            title: '套餐价格',
            width: 100,
            align: 'center',
            dataIndex: 'packageMoney',
            key: 'packageInfoId',
            render: (text: number) => {
                return <div>{text / 100}元</div>
            }
        },
        {
            title: '可用次数',
            width: 100,
            align: 'center',
            dataIndex: 'packageCount',
            key: 'packageInfoId',
            // render: (text: number) => {
            //     return <div>{text / 100}元</div>
            // }
        },
        {
            title: '操作',
            align: 'center',
            width: 100,
            dataIndex: 'operate',
            key: 'packageInfoId',
            render: (_value, record) => {
                return (
                    <div>
                        <div
                            style={{
                                display: packageInfoId == record.packageInfoId ? 'none' : 'unset',
                                // 鼠标设置成禁选状态


                                cursor: packageInfoId ? 'not-allowed' : 'pointer',
                                color: packageInfoId ? '#898D91' : '#0B4AFF'
                            }}
                            onClick={() => {
                                if (!packageInfoId) {
                                    setPackageInfoId(record.packageInfoId);
                                    form.setFieldValue('rechargeMoney', (record.packageMoney) / 100);
                                    getPay(record.packageInfoId);
                                }
                            }}
                        >选购</div>
                        <div
                            style={{
                                display: packageInfoId == record.packageInfoId ? 'unset' : 'none',
                                cursor: 'pointer',
                                color: '#0B4AFF'
                            }}
                            onClick={() => {
                                setPackageInfoId('');
                                form.setFieldValue('rechargeMoney', 280);
                                getPay('');
                            }}
                        >取消</div>
                    </div>
                )
            }
        }

    ];




    const [thirdParty, setThirdParty] = useState<ThirdPartyEnum | null>();
    // const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    // useEffect(() => {
    //     if (packageInfoId) {
    //         setSelectedRowKeys([packageInfoId]);
    //     } else {
    //         setSelectedRowKeys([]);
    //     }
    // }, [packageInfoId]);
    // const rowSelection: TableProps<DataType>['rowSelection'] = {
    //     selectedRowKeys,
    //     // onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    //     //     setSelectedRowKeys(selectedRowKeys);
    //     //     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    //     //     setPackageInfoId(selectedRows[0].packageInfoId);
    //     //     // form.getFieldValue('rechargeMoney')
    //     //     form.setFieldValue('rechargeMoney', (selectedRows[0].packageMoney) / 100);

    //     //     // getPay(selectedRows[0].packageInfoId);
    //     //     // console.log(selectedRowKeys, selectedRows);
    //     //     // if(packageInfoId == selectedRows[0].packageInfoId){
    //     //     //     setSelectedRowKeys([]);
    //     //     // }else{
    //     //     //     setSelectedRowKeys(selectedRowKeys);
    //     //     // }


    //     // },



    // };


    // 是否显示完成付款按钮
    const [showPay, setshowPay] = useState('unset')
    // 支付完成弹窗
    const [paymentModal, setPaymentModal] = useState(false)
    const [mask, setMask] = useState(false)
    const [form] = Form.useForm<FormFieldType>();
    const [messageApi, messageApiContext] = useMessage();
    const [isRechargeMoneyEdit, setIsRechargeMoneyEdit] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [rechargeVoucherArray, setRechargeVoucherArray] = useState<string[]>([]);

    const [accountRechargeId, setAccountRechargeId] = useState('');
    const [thirdPartyPayUrl, setThirdPartyPayUrl] = useState('');
    const [paySystemBank, setPaySystemBank] = useState<PaySystemBank>({
        bankAccountName: '',
        bankName: '',
        bankNumber: '',
        bankRemark: '',
        bankUnionpayNumber: ''
    });
    const [countdownTime, setCountdownTime] = useState('');
    // const [isCountdownTimeout, setIsCountdownTimeout] = useState(false);
    const moneyRange: number[] = [0.01, 20000];
    const countdownIntervalRef = useRef<any>();
    const [refreshQrCodeCount, setRefreshQrCodeCount] = useState(0);

    /**
     * 倒计时
     */
    const countdown = () => {
        if (countdownIntervalRef.current) {
            clearInterval(countdownIntervalRef.current);
        }
        // if (thirdParty == ThirdPartyEnum.DGZZ) {
        //     return;
        // }
        const Time = new Date().getTime();
        // 设定计时器的时间为60秒
        const countDownDate = new Date(Time + 270 * 1000).getTime();
        // const countDownDate = new Date(Time + 5 * 1000).getTime();
        // 更新计时器的秒数
        const updateCountdown = () => {
            const now = new Date().getTime();
            const distance = countDownDate - now;
            // 将毫秒数转换为分钟和秒数
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);
            // 渲染计时器
            setCountdownTime(minutes + ":" + (seconds < 10 ? "0" : "") + seconds);
            if (distance <= 0) {
                setCountdownTime('已失效');
                // setIsCountdownTimeout(true);
                clearInterval(countdownIntervalRef.current);
                setMask(true)
            }
        }
        // 每秒更新一次计时器
        countdownIntervalRef.current = setInterval(() => {
            updateCountdown();
        }, 1000);
    }

    const getPay = (packageInfoId: string) => {
        // console.log('获取订单');

        post<PayType>({
            messageApi,
            url: '/api/pay/get-pay',
            body: {
                rechargeMoney: form.getFieldValue('rechargeMoney'),
                thirdParty: form.getFieldValue('thirdParty'),
                packageInfoId: packageInfoId
            },
            onBefore() {
                setIsLoading(true);
            },
            onSuccess({ data }) {
                // console.log('用户id',data.accountRechargeId);

                setAccountRechargeId(data.accountRechargeId);
                setThirdPartyPayUrl(data.thirdPartyPayUrl);
                countdown();
            },
            onFinally() {
                setIsLoading(false);
            }
        })
    }

    const getPaySystemBank = () => {
        get<PaySystemBank>({
            messageApi,
            url: '/api/pay/get-pay-system-bank',
            onSuccess({ data }) {
                setPaySystemBank(data);
            }
        })
    }

    useEffect(() => {
        if (!thirdParty) {
            getPaySystemBank();
            form.setFieldsValue({
                thirdParty: ThirdPartyEnum.DGZZ,
                rechargeMoney: 280
            })
            setThirdParty(ThirdPartyEnum.DGZZ)
            return;
        }
        getPay(packageInfoId);
        // countdown()
    }, [thirdParty, refreshQrCodeCount]);


    const renderMoney = () => {
        if (isRechargeMoneyEdit) {
            return (
                <div>
                    <div>
                        <InputNumber min={0.01} max={2000} defaultValue={form.getFieldValue('rechargeMoney')} />
                        <Button type="link" onClick={() => {
                            const money = form.getFieldValue('rechargeMoney');
                            if (money < moneyRange[0]) {
                                form.setFieldValue('rechargeMoney', moneyRange[0]);
                                messageApi.error(`金额最小为${moneyRange[0]}`)
                            } else if (money > moneyRange[1]) {
                                form.setFieldValue('rechargeMoney', moneyRange[1]);
                                messageApi.error(`金额最大为${moneyRange[1]}`)
                            }
                            setIsRechargeMoneyEdit(false);
                            getPay(packageInfoId)
                            setshowPay('unset')
                        }}>确定</Button>
                        <span style={{ color: '#1677ff', cursor: 'pointer' }}
                            onClick={() => {
                                setIsRechargeMoneyEdit(false)
                                setshowPay('unset')
                            }}
                        >取消</span>
                    </div>

                </div>
            )
        }
        return (
            <div style={{
                display: 'flex',
                // background:"pink",
                alignItems: 'center',
            }}>
                <div>
                    <span style={{
                        color: '#FF2222'
                    }}>￥</span>
                    <span style={{ fontWeight: 'bold', color: '#FF2222', fontSize: '18px' }}>{form.getFieldValue('rechargeMoney')}</span>
                    <Button type="link" onClick={() => {
                        setIsRechargeMoneyEdit(true);
                        setshowPay('none')
                    }}>修改</Button>
                </div>
                <div className='moneyBox' >
                    <Tag style={{ cursor: 'pointer' }} onClick={() => {
                        form.setFieldValue('rechargeMoney', 100);
                        setIsRechargeMoneyEdit(false)
                        getPay(packageInfoId)
                    }} color="volcano">100</Tag>
                    <Tag style={{ cursor: 'pointer', marginLeft: 10 }} onClick={() => {
                        form.setFieldValue('rechargeMoney', 200);
                        setIsRechargeMoneyEdit(false)
                        getPay(packageInfoId)
                    }} color="volcano">200</Tag>
                    <Tag style={{ cursor: 'pointer', marginLeft: 10 }} onClick={() => {
                        form.setFieldValue('rechargeMoney', 300);
                        setIsRechargeMoneyEdit(false)
                        getPay(packageInfoId)
                    }} color="volcano">300</Tag>
                    <Tag style={{ cursor: 'pointer', marginLeft: 10 }} onClick={() => {
                        form.setFieldValue('rechargeMoney', 400);
                        setIsRechargeMoneyEdit(false)
                        getPay(packageInfoId)
                    }} color="volcano">400</Tag>
                    <Tag style={{ cursor: 'pointer', marginLeft: 10 }} onClick={() => {
                        form.setFieldValue('rechargeMoney', 500);
                        setIsRechargeMoneyEdit(false)
                        getPay(packageInfoId)
                    }} color="volcano">500</Tag>
                </div>
                {/* <div style={{
                    display: 'flex',
                    alignItems: 'center',
                    // justifyContent: 'center',
                    marginTop: '10px'
                }}>
                    <div style={{

                    }}>
                        购买服务包
                    </div>
                    <Select
                        style={{
                            width: '200px',
                            //  height: '50px', fontSize: '16px',
                        }}
                        placeholder="请选择服务包"
                        className=''
                        // defaultValue="JAVA"
                        options={[
                            { value: '1', label: `包1(99/100)`, },
                            { value: '2', label: '包2(98/100)' },
                            { value: '3', label: '包3(97/100)' },
                        ]}
                        allowClear
                        onChange={(value) => {


                        }}
                    >
                    </Select>
                </div> */}
                <div>

                </div>
            </div>
        )
    }

    const renderPayBody = () => {
        if (thirdParty == '对公转账') {
            return (
                <div style={{
                    marginLeft: 80
                }}>

                    <div>
                        <div className='payBoxTitle'>付款方信息</div>
                        <table className="pay-table">
                            <colgroup>
                                <col width="100" />
                                <col />
                            </colgroup>
                            <tbody>
                                <tr>
                                    <td className="table-label">公司名称 *</td>
                                    <td>
                                        <Form.Item
                                            name="orgName"
                                            style={{ marginBottom: '0' }}
                                            rules={[{ required: true, message: '请输入公司名称' }]}
                                        >
                                            <Input placeholder="请输入公司名称" />
                                        </Form.Item>
                                    </td>
                                </tr>
                                <tr>
                                    <td className="table-label">开户银行 *</td>
                                    <td>
                                        <Form.Item
                                            name="orgBank"
                                            style={{ marginBottom: '0' }}
                                            rules={[{ required: true, message: '请输入开户行' }]}
                                        >
                                            <Input placeholder="请输入开户行" />
                                        </Form.Item>
                                    </td>
                                </tr>
                                <tr>
                                    <td className="table-label">银行账号 *</td>
                                    <td>
                                        <Form.Item
                                            name="orgNumber"
                                            style={{ marginBottom: '0' }}
                                            rules={[{ required: true, message: '请输入银行账号' }]}
                                        >
                                            <Input placeholder="请输入银行账号" />
                                        </Form.Item>
                                    </td>
                                </tr>
                                <tr>
                                    <td className="table-label">打款时间 *</td>
                                    <td>
                                        <Form.Item
                                            name="rechargeFinalTime"
                                            style={{ marginBottom: '0' }}
                                            rules={[{ required: true, message: '请选择打款时间' }]}
                                        >
                                            <ConfigProvider locale={locale}>
                                                <DatePicker showTime placeholder="请选择打款时间"
                                                    onChange={(_date, dateString) => {
                                                        form.setFieldValue('rechargeFinalTime', dateString);
                                                    }} />
                                            </ConfigProvider>
                                        </Form.Item>
                                    </td>
                                </tr>
                                <tr>
                                    <td className="table-label">打款凭证 *</td>
                                    <td>
                                        <Form.Item
                                            name="rechargeVoucher"
                                            style={{ marginBottom: '0' }}
                                            valuePropName="fileList"
                                            getValueFromEvent={(e: any) => {
                                                if (e.file.status === 'done') {
                                                    rechargeVoucherArray.push(e.file.response.data.fileId);
                                                    setRechargeVoucherArray(rechargeVoucherArray);
                                                }
                                                if (e.file.status === 'removed') {
                                                    const idArray = rechargeVoucherArray.filter(item => item != e.file.response.data.fileId);
                                                    setRechargeVoucherArray(idArray);
                                                }
                                                return e.fileList;
                                            }}
                                            rules={[{ required: true, message: '请上传打款凭证' }]}
                                        >
                                            <Upload name="image"
                                                maxCount={2}
                                                action={uploadImageUrl()}
                                                headers={{ 'X-USER-ID': DevUserId }}
                                                beforeUpload={(file: FileType) => {
                                                    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
                                                    if (!isJpgOrPng) {
                                                        message.error('只能上传 JPG/PNG 格式文件!');
                                                    }
                                                    return isJpgOrPng;
                                                }}
                                            >
                                                <Button icon={<UploadOutlined />}>上传凭证图片</Button>
                                            </Upload>
                                        </Form.Item>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div style={{
                        marginTop: 25
                    }}>
                        <div className='payBoxTitle' >收款方信息</div>
                        <table className="pay-table">
                            <colgroup>
                                <col width="100" />
                                <col />
                            </colgroup>
                            <tbody>
                                <tr>
                                    <td className="table-label">公司名称</td>
                                    <td>
                                        <span id="bankAccountName">{paySystemBank.bankAccountName}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td className="table-label">开户银行</td>
                                    <td>
                                        <span id="bankName">{paySystemBank.bankName}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td className="table-label">银行账号</td>
                                    <td>
                                        <span id="bankNumber">{paySystemBank.bankNumber}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td className="table-label">银行联行号</td>
                                    <td>
                                        <span id="bankUnionpayNumber">{paySystemBank.bankUnionpayNumber}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td className="table-label">打款备注</td>
                                    <td>
                                        <div id="bankRemark">{paySystemBank.bankRemark}</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td className="table-label">说明</td>
                                    <td>
                                        <div className="mark">请打款时必须按照以上备注填写</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div style={{
                        marginTop: '15px', textAlign: 'center',
                    }}>倒计时:{countdownTime}</div>
                </div>
            )
        }
        return <>
            <Flex gap="middle" align="center" justify="center" vertical>
                <div className="qr-code" style={{ position: 'relative' }}>
                    <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', background: "rgba(0,0,0,0.6)", backdropFilter: 'blur(10px)', zIndex: 99, display: isRechargeMoneyEdit ? 'block' : 'none' }}>
                        <div style={{ color: '#fff', width: '100%', height: '100%', fontSize: 30, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                            正在修改,请稍后...
                        </div>
                    </div>
                    <div style={{
                        marginLeft: 90
                    }}>
                        <div className='codeTitle'>支付Pay</div>
                        <div style={{
                            background: '#FAFCFF',
                            height: '630px',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            flexDirection: 'column',

                        }}>

                            <Image src={thirdPartyPayUrl} fallback={errorImage} preview={false} />
                            <div className='paytip'>{thirdParty}扫码支付</div>
                            <div style={{ marginTop: 10 }}>{countdownTime}</div>
                        </div>

                    </div>
                    {/* {
                        isCountdownTimeout ? (
                            <div className="qr-timeout" onClick={() => {
                                setRefreshQrCodeCount(refreshQrCodeCount + 1);
                            }}>
                                <ReloadOutlined />
                                <span className="label">点击刷新</span>
                            </div>
                        ) : <></>
                    } */}

                </div>

            </Flex>
        </>
    }

    return (
        <div style={{ position: 'relative' }}>
            <div style={{ position: 'absolute', width: '100%', height: '100%', top: 0, left: 0, background: 'rgba(0,0,0,0.6)', zIndex: 99, display: mask ? 'block' : 'none' }}>
                <div style={{ color: '#FFF', fontSize: 16, width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }} >
                    <div style={{ cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }} onClick={() => {
                        setMask(false)
                        setRefreshQrCodeCount(refreshQrCodeCount + 1);
                    }}>
                        <div style={{ fontSize: 70 }}><ReloadOutlined /></div>
                        已失效,点击刷新
                    </div>
                </div>
            </div>
            {/* <Spin tip="正在提交..." spinning={isLoading}>
                <Form
                    name="basic"
                    form={form}
                    onFinish={() => {
                        setPaymentModal(true)
                        
                    }}
                    autoComplete="off"
                >
                    <Form.Item
                        label="支付方式"
                        name="thirdParty"
                        rules={[{ required: true }]}
                    >
                        <Radio.Group onChange={(e) => {
                            form.setFieldValue('thirdParty', e.target.value);
                            setThirdParty(e.target.value);
                            // console.log(e.target.value);
                            setPackageInfoId('');
                            setIsRechargeMoneyEdit(false)
                            setValue('')
                            form.setFieldValue('rechargeMoney', 280);
                            setSelectedRowKeys([]);

                        }}>
                            <Radio value="微信">微信</Radio>
                            <Radio value="支付宝">1支付宝</Radio>
                            <Radio value="对公转账">对公转账</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        label="充值金额"
                        name="rechargeMoney"
                        rules={[{ required: true, message: '请输入金额' }]}
                    >
                        {renderMoney()}
                    </Form.Item>
                  
                    <div style={{
                        display: 'flex'
                    }}>
                        <div style={{
                            marginRight: 10
                        }}>购买服务包:</div>
                        <Radio.Group
                            onChange={onChange}
                            value={value}
                            options={[
                                {
                                    value: 'ALL',
                                    label: (
                                        <Flex gap="small" justify="center" align="center" vertical>
                                            全托管
                                        </Flex>
                                    ),
                                },
                                {
                                    value: 'MATERIAL',
                                    label: (
                                        <Flex gap="small" justify="center" align="center" vertical>
                                            写材料
                                        </Flex>
                                    ),
                                },

                            ]}
                        />


                    </div>
                    <div>
                   
                        <div style={{
                            display: value ? 'unset' : 'none',
                        }}>
                            <Table
                                columns={packColumns}
                                dataSource={packList}
                                rowSelection={{
                                    // ...rowSelection,
                                    selectedRowKeys,
                                    type: 'radio', // 设置为单选

                                }}
                                pagination={{
                                    defaultPageSize: 5, // 设置默认一页显示 5 条数据
                                }}
                                rowKey="packageInfoId"
                                onRow={(record) => {
                                    return {
                                        onClick: (event: React.MouseEvent<HTMLTableRowElement>) => {
                                            event.stopPropagation();
                                            // 模拟点击单选框
                                            // 
                                            // 判断当前行是否已经被选中
                                            const isSelected = selectedRowKeys.includes(record.packageInfoId);
                                            if (isSelected) {
                                                // 处理取消选择的情况
                                                setSelectedRowKeys([]);
                                                setPackageInfoId('');
                                                form.setFieldValue('rechargeMoney', 280);
                                                getPay('');
                                            } else {
                                                // 处理选中的情况
                                                setSelectedRowKeys([record.packageInfoId]);
                                                setPackageInfoId(record.packageInfoId);
                                                form.setFieldValue('rechargeMoney', (record.packageMoney) / 100);
                                                getPay(record.packageInfoId);
                                            }
                                        },
                                        style: { cursor: 'pointer' } 
                                    };
                                }}
                            />
                        </div>
                    </div>
                    {renderPayBody()}
                    <div style={{
                        display: thirdParty == '对公转账' ? 'unset' : 'none'
                    }}>
                        <div style={{ marginTop: '15px', textAlign: 'center', }}>
                            <Button type="primary" htmlType="submit" style={{ backgroundColor: 'var(--color-primary)', display: showPay }}>
                                完成付款
                            </Button>
                            <Button type="default" style={{ marginLeft: '15px' }} onClick={() => {
                                props.handleCancel();
                            }}>关闭窗口</Button>
                        </div>
                    </div>
                </Form>
            </Spin> */}
            <Spin tip="正在提交..." spinning={isLoading}>
                <Form
                    name="basic"
                    form={form}
                    onFinish={() => {
                        setPaymentModal(true)

                    }}
                    autoComplete="off"
                >
                    <div style={{
                        display: 'flex',
                    }}>
                        <div className='payBoxLeft'>
                            <Form.Item
                                label="充值金额"
                                name="rechargeMoney"
                                rules={[{ required: true, message: '请输入金额' }]}
                            >
                                {renderMoney()}
                            </Form.Item>
                            <Form.Item
                                label="支付方式"
                                name="thirdParty"
                                rules={[{ required: true }]}
                            >
                                <Radio.Group onChange={(e) => {
                                    form.setFieldValue('thirdParty', e.target.value);
                                    setThirdParty(e.target.value);
                                    // console.log(e.target.value);
                                    setPackageInfoId('');
                                    setIsRechargeMoneyEdit(false)
                                    // setValue('')
                                    form.setFieldValue('rechargeMoney', 280);
                                    // setSelectedRowKeys([]);

                                }}>
                                    <Radio value="微信">
                                        <Image src={wx} width={27} height={25} preview={false} />
                                        <span style={{ marginLeft: 5, marginRight: 20 }}>微信</span>
                                    </Radio>
                                    <Radio value="支付宝">
                                        <Image src={zfb} width={27} height={25} preview={false} />
                                        <span style={{ marginLeft: 5, marginRight: 20 }}>支付宝</span>
                                    </Radio>
                                    <Radio value="对公转账">
                                        <Image src={dg} width={27} height={25}
                                            preview={false}
                                        />
                                        <span style={{ marginLeft: 5 }}>对公转账</span>
                                    </Radio>
                                </Radio.Group>
                            </Form.Item>


                            <div style={{
                                display: 'flex'
                            }}>
                                <div style={{
                                    marginRight: 10,
                                    marginLeft: 25
                                }}>
                                    服务包:</div>
                                <Radio.Group
                                    onChange={onChange}
                                    value={value}
                                    options={[
                                        {
                                            value: 'MATERIAL',
                                            label: (
                                                <Flex gap="small" justify="center" align="center" vertical>
                                                    写材料
                                                </Flex>
                                            ),
                                        },
                                        {
                                            value: 'ALL',
                                            label: (
                                                <Flex gap="small" justify="center" align="center" vertical>
                                                    全托管
                                                </Flex>
                                            ),
                                        },


                                    ]}
                                />


                            </div>
                            <div>
                                <div style={{
                                    display: packList.length > 0 ? 'unset' : 'none',
                                    marginLeft: 90
                                }}>

                                    <Table
                                        columns={packColumns}
                                        dataSource={packList}


                                        className='packTable'
                                        bordered
                                        style={{
                                            width: '731px',
                                            height: '441px',
                                            overflow: 'hidden'
                                        }}

                                        pagination={

                                            false
                                        }
                                        rowKey="packageInfoId"

                                    />
                                    <div style={{
                                        display: packTotal > 7 ? 'unset' : 'none',
                                    }}>
                                        <div style={{
                                            display: 'flex',
                                            marginTop: 10,
                                        }}>
                                            <div className='clickPage'
                                                onClick={() => {
                                                    if (packPage > 1) {
                                                        setPackPage(packPage - 1);
                                                        getPackageList(value, packPage - 1);
                                                    }else{
                                                        messageApi.error('已经是第一页了');
                                                    }
                                                }}
                                                style={{
                                                    cursor: packPage > 1 ? 'pointer' : 'not-allowed',
                                                    background: packPage > 1? '#abc8ff' : '#BAC8DA',
                                                }}
                                            >上一页</div>
                                            <div className='clickPage' style={{
                                                marginLeft: 10,
                                                cursor: packPage < packTotal / 7 ? 'pointer' : 'not-allowed',
                                                background: packPage < packTotal / 7? '#abc8ff' : '#BAC8DA',
                                            }}
                                                onClick={() => {
                                                    if (packPage < packTotal / 7) {
                                                        setPackPage(packPage + 1);
                                                        getPackageList(value, packPage + 1);
                                                    }else{
                                                        messageApi.error('已经是最后一页了');
                                                    }
                                                }}

                                            >下一页</div>
                                        </div>
                                    </div>
                                </div>
                                <div style={{
                                    display: packList.length <= 0 ? 'unset' : 'none',
                                    marginLeft: 90
                                }}>
                                    <Image
                                        src={nodate}
                                        // 点击禁止放大
                                        preview={false}
                                    ></Image>
                                    <div style={{
                                        color: '#BAC8DA ',
                                        fontSize: 16,
                                        textAlign: 'center',
                                        // background:'pink',
                                        marginLeft: 90
                                    }}>暂无服务包</div>
                                </div>
                            </div>
                        </div>
                        <div className='payBoxRight'>
                            {renderPayBody()}
                        </div>
                    </div>
                    <div style={{
                        display: thirdParty == '对公转账' ? 'unset' : 'none'
                    }}>
                        <div style={{ marginTop: '15px', textAlign: 'center', }}>
                            <Button type="primary" htmlType="submit" style={{ backgroundColor: 'var(--color-primary)', display: showPay }}>
                                完成付款
                            </Button>
                            <Button type="default" style={{ marginLeft: '15px' }} onClick={() => {
                                props.handleCancel();
                            }}>关闭窗口</Button>
                        </div>
                    </div>
                </Form>
            </Spin>
            {messageApiContext}
            <Modal title="提示"
                okText="确定"
                cancelText="取消"
                open={paymentModal}
                okButtonProps={{
                    style: {
                        backgroundColor: 'var(--color-primary)', // 设置背景颜色 
                    },
                }}
                onOk={() => {
                    post<any>({
                        messageApi,
                        url: `/api/pay/pay-account-recharge/${accountRechargeId}`,
                        body: {
                            thirdParty: form.getFieldValue('thirdParty'),
                            rechargeMoney: form.getFieldValue('rechargeMoney'),
                            orgName: thirdParty == ThirdPartyEnum.DGZZ ? form.getFieldValue('orgName') : '',
                            orgBank: thirdParty == ThirdPartyEnum.DGZZ ? form.getFieldValue('orgBank') : '',
                            orgNumber: thirdParty == ThirdPartyEnum.DGZZ ? form.getFieldValue('orgNumber') : '',
                            rechargeFinalTime: thirdParty == ThirdPartyEnum.DGZZ ? form.getFieldValue('rechargeFinalTime') : '',
                            rechargeVoucher: thirdParty == ThirdPartyEnum.DGZZ ? rechargeVoucherArray.join(',') : '',
                            packageInfoId: packageInfoId
                        },
                        onBefore() {
                            setIsLoading(true);
                        },
                        onSuccess() {
                            props.handleConfirm();
                        },
                        onFinally() {
                            setIsLoading(false);
                        }
                    });
                }}
                onCancel={() => {
                    setPaymentModal(false);
                }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 10 }}>
                    <div style={{ fontSize: 20, fontWeight: 700 }}>确定对公转账<span style={{ color: 'red' }}>￥<span style={{ fontSize: 30 }}>{form.getFieldValue('rechargeMoney')}</span></span> 吗？不确定请修改金额。</div>
                </div>
            </Modal>
        </div>
    )
}