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


interface Props {
    gameList: any[]
    initialValues?: any
    visible?: boolean
    onClose?: () => void
    onChange?: () => void
}
/**
 * 新增 修改 有效创角配置
 * @param param0 
 * @returns 
 */
const EditModal: React.FC<Props> = ({ gameList, initialValues = {}, visible, onClose, onChange }) => {

    /******************************/
    const [form] = Form.useForm()

    const aeGameUserConfig = useAjax((params) => aeGameUserConfigApi(params))
    /******************************/

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

    return <Modal title={`${initialValues?.id ? '修改' : '新增'}有效创角配置`} visible={visible} onCancel={onClose} onOk={handleOk} confirmLoading={aeGameUserConfig.loading}>
        <Form
            name="basicCreateRole"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
            form={form}
            autoComplete="off"
            initialValues={{ ...initialValues }}
        >
            <Form.Item label="游戏" name="gameId" rules={[{ required: true, message: '请选择游戏!' }]}>
                <Select
                    showSearch
                    style={{ minWidth: 180 }}
                    allowClear
                    placeholder="选择游戏"
                    filterOption={(input, option) =>
                        (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                >
                    {gameList?.map((item: any) => <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>)}
                </Select>
            </Form.Item>
            <Form.Item label="角色等级" name="roleLevel" rules={[{ required: true, message: '请输入角色等级!' }]}>
                <InputNumber min={0} placeholder="请输入角色等级" style={{ width: '100%' }}/>
            </Form.Item>
        </Form>
    </Modal>
}

export default React.memo(EditModal)