import { useAjax } from "@/Hook/useAjax"
import { ModalGameVipSProps, modalGameVipsApi } from "@/services/gameData/roleOperate"
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons"
import { Button, 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 VipModalS: React.FC<Props> = ({ superGameList = [], thatStoreData = { gameList: [] }, initialValues, visible, onClose, onChange }) => {

    /*******************************/
    const [form] = Form.useForm<ModalGameVipSProps>()
    const superGameId = Form.useWatch('superGameId', form)
    const list = Form.useWatch('list', form)
    const modalGameVips = useAjax((params) => modalGameVipsApi(params))
    /*******************************/

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

    return <Modal
        title={<Space>
            <span>{initialValues?.id ? '修改' : '新增'}VIP档位</span>
            <span style={{ color: 'red' }}>最小充值金额(包含)，最大充值金额(不包含)</span>
        </Space>}
        visible={visible}
        onCancel={onClose}
        onOk={handleOk}
        confirmLoading={modalGameVips.loading}
        width={600}
        maskClosable={false}
    >
        <Form
            name="basicVip"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
            form={form}
            autoComplete="off"
            labelAlign="left"
            colon={false}
            initialValues={{ list: [{}] }}
        >
            <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
                    }
                    mode="multiple"
                >
                    {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.List name="list">
                {(fields, { add, remove }) => (
                    <>
                        {fields.map(({ key, name, ...restField }, index) => (
                            <div key={key} style={{ border: '1px dashed #d9d9d9', position: 'relative', padding: '20px 10px 0px', borderRadius: 6, marginBottom: 15 }}>
                                <div style={{ position: 'absolute', top: '-15px', left: '20px', background: '#FFF', fontSize: 16, fontWeight: 600 }}>充值金额{index + 1}</div>
                                <Form.Item>
                                    <Space align="center">
                                        <Form.Item
                                            {...restField}
                                            name={[name, 'rechargeMoneyMin']}
                                            rules={[{
                                                validator: (_: any, value: number) => {
                                                    if (!value && value !== 0) {
                                                        return Promise.reject(new Error('请输入最小充值金额!'));
                                                    }
                                                    if (((list[key] as any)?.rechargeMoneyMax || (list[key] as any)?.rechargeMoneyMax === 0) && (list[key] as any)?.rechargeMoneyMax <= value) {
                                                        return Promise.reject(new Error('最小充值金额要小于最大金额!'));
                                                    }
                                                    return Promise.resolve();
                                                }
                                            }]}
                                            noStyle
                                        >
                                            <InputNumber min={0} placeholder="最小充值金额" style={{ width: 150 }} />
                                        </Form.Item>
                                        -
                                        <Form.Item
                                            {...restField}
                                            name={[name, 'rechargeMoneyMax']}
                                            rules={[{
                                                validator: (_: any, value: number) => {
                                                    if (!value && value !== 0) {
                                                        return Promise.reject(new Error('请输入最大充值金额!'));
                                                    }
                                                    if (((list[key] as any)?.rechargeMoneyMin || (list[key] as any)?.rechargeMoneyMin === 0) && (list[key] as any)?.rechargeMoneyMin >= value) {
                                                        return Promise.reject(new Error('最大金额要大于最小充值金额!'));
                                                    }
                                                    return Promise.resolve();
                                                }
                                            }]}
                                            noStyle
                                        >
                                            <InputNumber min={0} placeholder="最小充值金额" style={{ width: 150 }} />
                                        </Form.Item>
                                        <Form.Item {...restField} noStyle name={[name, 'vipLevel']} rules={[{ required: true, message: '请输入vip档位!' }]}>
                                            <InputNumber min={0} placeholder="vip档位" style={{ width: 150 }} />
                                        </Form.Item>
                                        <div style={{ width: 20 }}></div>
                                        {fields.length > 1 && <MinusCircleOutlined onClick={() => remove(name)} />}
                                    </Space>
                                </Form.Item>

                            </div>
                        ))}
                        <Form.Item noStyle>
                            <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                新增充值金额
                            </Button>
                        </Form.Item>
                    </>
                )}
            </Form.List>
        </Form>
    </Modal>
}

export default React.memo(VipModalS)