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


interface Props {
    configData: ConfigDataProps[]
    visible?: boolean
    onClose?: () => void
    onChange?: () => void
    initialValues?: any
}

/**
 * 礼包码链接新增修改
 * @param param0 
 * @returns 
 */
const ModifyLink: React.FC<Props> = ({ configData, visible, onChange, onClose, initialValues }) => {

    /*************************************/
    const [form] = Form.useForm()
    const gameId = Form.useWatch('gameId', form)
    const payMin = Form.useWatch(['conditionDTO', 'pay', 'min'], form)
    const payMax = Form.useWatch(['conditionDTO', 'pay', 'max'], form)
    const regTimeMin = Form.useWatch(['conditionDTO', 'regTime', 'min'], form)
    const regTimeMax = Form.useWatch(['conditionDTO', 'regTime', 'max'], form)
    const unLoginMin = Form.useWatch(['conditionDTO', 'unLogin', 'min'], form)
    const unLoginMax = Form.useWatch(['conditionDTO', 'unLogin', 'max'], form)


    const addPackLink = useAjax((params) => addPackLinkApi(params))
    const updatePackLink = useAjax((params) => updatePackLinkApi(params))
    /*************************************/

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

    }


    return <Modal
        title={<strong>{initialValues?.id ? '修改' : '新增'}礼包码链接</strong>}
        visible={visible}
        onCancel={onClose}
        onOk={handleOk}
        confirmLoading={updatePackLink.loading || addPackLink.loading}
    >
        <Form
            name="basicPackLink"
            form={form}
            autoComplete="off"
            layout="vertical"
            colon={false}
            initialValues={initialValues?.id ? initialValues : { conditionDTO: { pay: { min: null, max: null }, regTime: { min: null, max: null }, unLogin: { min: null, max: null } } }}
        >
            <Form.Item label={<strong>游戏</strong>} name="gameId" rules={[{ required: true, message: '请选择游戏!' }]}>
                <Select
                    showSearch
                    style={{ minWidth: 140 }}
                    allowClear
                    placeholder={'请选择游戏'}
                    filterOption={(input, option) =>
                        (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    disabled={initialValues?.id}
                    onChange={() => {
                        form.setFieldsValue({ codeType: undefined })
                    }}
                >
                    {configData?.map((item: any) => <Select.Option value={item.value} key={item.value}>{item.label}</Select.Option>)}
                </Select>
            </Form.Item>
            {gameId && <>
                <Form.Item label={<strong>礼包码类型</strong>} name="codeType" rules={[{ required: true, message: '请选择礼包码类型!' }]}>
                    <Select
                        maxTagCount={1}
                        showSearch
                        style={{ minWidth: 140 }}
                        allowClear
                        placeholder={'请选择礼包码类型'}
                        filterOption={(input, option) =>
                            (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                    >
                        {configData?.find(item => item.value === gameId)?.packList?.map((item: any) => <Select.Option value={item.value} key={item.value}>{item.label}</Select.Option>)}
                    </Select>
                </Form.Item>
                <Form.Item label={<strong>付费区间(元)</strong>}>
                    <Space style={{ width: '100%' }}>
                        <Form.Item
                            name={['conditionDTO', 'pay', 'min']}
                            noStyle
                            rules={[
                                { required: !!payMax ? true : false, message: '请填写最小值' },
                                () => ({
                                    validator(_, value) {
                                        if (value && payMax && value > payMax) {
                                            return Promise.reject(new Error('最小值必须小于等于最大值'));
                                        }
                                        return Promise.resolve();
                                    },
                                })
                            ]}
                        >
                            <InputNumber placeholder="最小值" style={{ width: 150 }} />
                        </Form.Item>
                        <span>-</span>
                        <Form.Item
                            name={['conditionDTO', 'pay', 'max']}
                            noStyle
                            rules={[
                                { required: !!payMin ? true : false, message: '请填写最大值' },
                                () => ({
                                    validator(_, value) {
                                        if (value && payMin && value < payMin) {
                                            return Promise.reject(new Error('最大值必须大于等于最小值'));
                                        }
                                        return Promise.resolve();
                                    },
                                })
                            ]}
                        >
                            <InputNumber placeholder="最大值" style={{ width: 150 }} />
                        </Form.Item>
                    </Space>
                </Form.Item>
                <Form.Item label={<strong>注册时间(分钟)</strong>}>
                    <Space style={{ width: '100%' }}>
                        <Form.Item
                            name={['conditionDTO', 'regTime', 'min']}
                            noStyle
                            rules={[
                                { required: !!regTimeMax ? true : false, message: '请填写最小值' },
                                () => ({
                                    validator(_, value) {
                                        if (value && regTimeMax && value > regTimeMax) {
                                            return Promise.reject(new Error('最小值必须小于等于最大值'));
                                        }
                                        return Promise.resolve();
                                    },
                                })
                            ]}
                        >
                            <InputNumber placeholder="最小值" style={{ width: 150 }} />
                        </Form.Item>
                        <span>-</span>
                        <Form.Item
                            name={['conditionDTO', 'regTime', 'max']}
                            noStyle
                            rules={[
                                { required: !!regTimeMin ? true : false, message: '请填写最大值' },
                                () => ({
                                    validator(_, value) {
                                        if (value && regTimeMin && value < regTimeMin) {
                                            return Promise.reject(new Error('最大值必须大于等于最小值'));
                                        }
                                        return Promise.resolve();
                                    },
                                })
                            ]}
                        >
                            <InputNumber placeholder="最大值" style={{ width: 150 }} />
                        </Form.Item>
                    </Space>
                </Form.Item>
                <Form.Item label={<strong>未登录时间(分钟)</strong>}>
                    <Space style={{ width: '100%' }}>
                        <Form.Item
                            name={['conditionDTO', 'unLogin', 'min']}
                            noStyle
                            rules={[
                                { required: !!unLoginMax ? true : false, message: '请填写最小值' },
                                () => ({
                                    validator(_, value) {
                                        if (value && unLoginMax && value > unLoginMax) {
                                            return Promise.reject(new Error('最小值必须小于等于最大值'));
                                        }
                                        return Promise.resolve();
                                    },
                                })
                            ]}
                        >
                            <InputNumber placeholder="最小值" style={{ width: 150 }} />
                        </Form.Item>
                        <span>-</span>
                        <Form.Item
                            name={['conditionDTO', 'unLogin', 'max']}
                            noStyle
                            rules={[
                                { required: !!unLoginMin ? true : false, message: '请填写最大值' },
                                () => ({
                                    validator(_, value) {
                                        if (value && unLoginMin && value < unLoginMin) {
                                            return Promise.reject(new Error('最大值必须大于等于最小值'));
                                        }
                                        return Promise.resolve();
                                    },
                                })
                            ]}
                        >
                            <InputNumber placeholder="最大值" style={{ width: 150 }} />
                        </Form.Item>
                    </Space>
                </Form.Item>
            </>}
        </Form>
    </Modal>
}

export default React.memo(ModifyLink)