import { useAjax } from "@/Hook/useAjax"
import { modalGameVipApi } from "@/services/gameData/roleOperate"
import { Form, InputNumber, Modal, Select, Space, message } from "antd"
import React from "react"

interface Props {
    superGameList: any[]
    thatStoreData: { gameList: any[] }
    initialValues?: any
    visible?: boolean
    onClose?: () => void
    onChange?: () => void
}
const VipModal: React.FC<Props> = ({ superGameList = [], thatStoreData = { gameList: [] }, initialValues, visible, onClose, onChange }) => {

    /*******************************/
    const [form] = Form.useForm()
    const superGameId = Form.useWatch('superGameId', form)
    const rechargeMoneyMin = Form.useWatch('rechargeMoneyMin', form)
    const rechargeMoneyMax = Form.useWatch('rechargeMoneyMax', form)
    const modalGameVip = useAjax((params) => modalGameVipApi(params))
    /*******************************/

    const handleOk = async () => {
        form.submit()
        let data = await form.validateFields()
        console.log('===========>', data)
        if (initialValues?.id) {
            data.id = initialValues?.id
        }
        modalGameVip.run(data).then(res => {
            if (res) {
                if (initialValues?.id) {
                    message.success('修改成功')
                } else {
                    message.success('新增成功')
                }
                onChange && onChange()
            }
        })
    }

    return <Modal
        title={`${initialValues?.id ? '修改' : '新增'}VIP档位`}
        visible={visible}
        onCancel={onClose}
        onOk={handleOk}
        confirmLoading={modalGameVip.loading}
    >
        <Form
            name="basicVip"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
            form={form}
            autoComplete="off"
            labelAlign="left"
            colon={false}
            initialValues={{ ...initialValues }}
        >
            <Form.Item label="VIP档位" name="vipLevel" rules={[{ required: true, message: '请输入vip档位!' }]}>
                <InputNumber min={0} placeholder="请输入vip档位" style={{ minWidth: 130 }} />
            </Form.Item>
            <Form.Item label="超父游戏" name='superGameId' rules={[{ required: true, message: '请选择超父游戏!' }]}>
                <Select
                    showSearch
                    allowClear
                    placeholder={'请选择超父游戏'}
                    filterOption={(input, option) =>
                        (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                >
                    {superGameList?.map((item: any) => <Select.Option value={item.super_game_id} key={item.super_game_id}>{item.super_game_name}</Select.Option>)}
                </Select>
            </Form.Item>
            <Form.Item label="父游戏" name='parentGameId' rules={[{ required: true, message: '请选择父游戏!' }]}>
                <Select
                    showSearch
                    allowClear
                    disabled={!superGameId}
                    placeholder={'请选择父游戏'}
                    filterOption={(input, option) =>
                        (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                >
                    {thatStoreData?.gameList?.filter(item => item.superId === superGameId)?.map((item: any) => <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>)}
                </Select>
            </Form.Item>
            <Form.Item label="充值金额" tooltip={'最小充值金额(包含)，最大充值金额(不包含)'}>
                <Space>
                    <Form.Item
                        name="rechargeMoneyMin"
                        rules={[{
                            validator: (_: any, value: number) => {
                                if (!value && value !== 0) {
                                    return Promise.reject(new Error('请输入最小充值金额!'));
                                }
                                if ((rechargeMoneyMax || rechargeMoneyMax === 0) && rechargeMoneyMax <= value) {
                                    return Promise.reject(new Error('最小充值金额小于最大金额要!'));
                                }
                                return Promise.resolve();
                            }
                        }]}
                        noStyle
                    >
                        <InputNumber min={0} placeholder="最小充值金额" style={{ minWidth: 140 }} />
                    </Form.Item>
                    -
                    <Form.Item
                        name="rechargeMoneyMax"
                        rules={[{
                            validator: (_: any, value: number) => {
                                if (!value && value !== 0) {
                                    return Promise.reject(new Error('请输入最大充值金额!'));
                                }
                                if ((rechargeMoneyMin || rechargeMoneyMin === 0) && rechargeMoneyMin >= value) {
                                    return Promise.reject(new Error('最大金额要大于最小充值金额!'));
                                }
                                return Promise.resolve();
                            }
                        }]}
                        noStyle
                    >
                        <InputNumber min={0} placeholder="最小充值金额" style={{ minWidth: 140 }} />
                    </Form.Item>
                </Space>
            </Form.Item>
        </Form>
    </Modal>
}

export default React.memo(VipModal)