import { useAjax } from "@/Hook/useAjax"
import { addGameApi } from "@/services/adqV3/global"
import { Form, Input, message, Modal, Radio } from "antd"
import React from "react"
import '../../tencentAdPutIn/index.less'


interface Props {
    visible?: boolean
    onChange?: () => void
    onClose?: () => void
}

/**
 * 新增游戏
 * @returns 
 */
const Modify: React.FC<Props> = ({ visible, onChange, onClose }) => {

    /********************************/
    const [form] = Form.useForm()
    const addGame = useAjax((params) => addGameApi(params))
    /********************************/

    const handleOk = () => {
        form.validateFields().then(valid => {
            console.log(valid)
            addGame.run(valid).then(res => {
                if (res) {
                    message.success('新增成功')
                    onChange?.()
                }
            })
        })
    }

    return <Modal
        title={<strong>{`新增游戏`}</strong>}
        open={visible}
        onCancel={onClose}
        onOk={handleOk}
        className="modalResetCss"
        confirmLoading={addGame.loading}
    >
        <Form
            name="basicMiniProgramWechat"
            form={form}
            layout='vertical'
            autoComplete="off"
            initialValues={{
                gameType: 'WXGAME'
            }}
        >
            <Form.Item label={<strong>游戏类型</strong>} name="gameType" rules={[{ required: true, message: '请选择游戏类型!' }]}>
                <Radio.Group buttonStyle="solid">
                    <Radio.Button value="WXGAME">微信小游戏</Radio.Button>
                </Radio.Group>
            </Form.Item>
            <Form.Item label={<strong>游戏名称</strong>} name="gameName" rules={[{ required: true, message: '请输入游戏名称!' }]}>
                <Input placeholder="请输入游戏名称" allowClear />
            </Form.Item>
            <Form.Item
                label={<strong>appId</strong>}
                name="appId"
                rules={[
                    { required: true, message: '请输入appId!' }
                ]}
            >
                <Input placeholder="请输入appId" allowClear />
            </Form.Item>
        </Form>
    </Modal>
}

export default React.memo(Modify)