import { useAjax } from "@/Hook/useAjax"
import { setBackApi } from "@/services/gameData/order"
import { Alert, InputNumber, Modal, Space, Switch, message } from "antd"
import React, { useState } from "react"

interface Props {
    data: any
    visible?: boolean
    onClose?: () => void
    onChange?: () => void
}
const Back: React.FC<Props> = ({ data, visible, onClose, onChange }) => {

    /****************************/
    const [money, setMoney] = useState<any>()
    const [splitOrder, setSplitOrder] = useState<boolean>(false)
    const [splitNum, setSplitNum] = useState<number>()
    const [splitMoney, setSplitMoney] = useState<number[]>([])
    const [betweenMinuteMin, setBetweenMinuteMin] = useState<number>()
    const [betweenMinuteMax, setBetweenMinuteMax] = useState<number>()
    const setBack = useAjax((params) => setBackApi(params))
    /****************************/

    const handleOk = () => {
        let params = { type: data.backTableName, splitOrder, orderIds: [data.backId] }
        if (splitOrder) {
            if (!splitNum) { message.error('请输入拆单数量'); return }
            if (splitMoney.length > 0 && splitMoney.every(m => m)) {
                params['splitMoney'] = splitMoney
            } else {
                message.error('请完善拆单金额');
                return
            }
            if (!betweenMinuteMax || !betweenMinuteMin) {
                message.error('请输入回传间隔时间');
                return
            } else if (betweenMinuteMin > betweenMinuteMax) {
                message.error('回传间隔最小时间不能大于回传间隔最大时间');
                return
            } else {
                params['betweenMinuteMin'] = betweenMinuteMin
                params['betweenMinuteMax'] = betweenMinuteMax
            }
        } else {
            if (!money) { message.error('请输入金额'); return }
            params['backMoney'] = money
        }
        setBack.run(params).then((res: any) => {
            if (res) {
                message.success('上报成功')
                onChange?.()
                setSplitNum(undefined)
                setSplitOrder(false)
                setSplitMoney([])
                setMoney(0)
            }
        })
    }


    return <Modal
        title="手动回传"
        visible={visible}
        onCancel={onClose}
        onOk={handleOk}
    >
        <Alert message="回传状态3分钟延迟" type="error" style={{ marginBottom: 10 }} />
        <Space style={{ width: '100%' }} wrap>
            <Space align="center"><strong>是否拆单</strong><Switch checkedChildren="开启" unCheckedChildren="关闭" checked={splitOrder} onChange={(e) => setSplitOrder(e)} /></Space>
            {splitOrder ? <>
                <Space align="center">
                    <strong>拆单数量</strong>
                    <InputNumber
                        value={splitNum}
                        placeholder="请输拆单数量"
                        style={{ width: 150 }}
                        onChange={(e) => {
                            setSplitNum(e as any)
                            setSplitMoney(Array(e || 0).fill(undefined))
                        }}
                    />
                </Space>
                {splitMoney.length > 0 && <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
                    <strong>拆单金额</strong>
                    {splitMoney.map((money, index) => <InputNumber
                        key={index}
                        value={money}
                        placeholder={`拆单金额${index + 1}`}
                        onChange={(e) => {
                            let oldMonery = JSON.parse(JSON.stringify(splitMoney))
                            oldMonery[index] = e
                            setSplitMoney(oldMonery)
                        }}
                    />)}
                </div>}
                <Space align="center">
                    <strong>回传间隔时间</strong>
                    <InputNumber style={{ width: '100%' }} value={betweenMinuteMin} onChange={(e) => setBetweenMinuteMin(e)} placeholder="最小时间" addonAfter='分钟' />
                    <span>-</span>
                    <InputNumber style={{ width: '100%' }} value={betweenMinuteMax} onChange={(e) => setBetweenMinuteMax(e)} placeholder="最大时间" addonAfter='分钟' />
                </Space>
            </> : <>
                <Space align="center">
                    <strong>金额</strong>
                    <InputNumber style={{ width: 200 }} value={money} placeholder="请输入金额" onChange={(e) => setMoney(e)} />
                </Space>
            </>}
        </Space>

    </Modal>
}

export default React.memo(Back)