import { useAjax } from "@/Hook/useAjax"
import { exportUserH5Api } from "@/services/gameData/player"
import { Form, Input, Modal, Radio, message } from "antd"
import React from "react"


interface Props {
    initialValues: any
    visible?: boolean
    onChange?: () => void
    onClose?: () => void
}
/**
 * 小程序账号到H5
 * @param param0 
 * @returns 
 */
const ExportH5Modal: React.FC<Props> = ({ initialValues = {}, visible, onChange, onClose }) => {

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

    const exportUserH5 = useAjax((params) => exportUserH5Api(params))
    /*****************************/

    const handleOk = async () => {
        let data = await form.validateFields()
        console.log(data)
        exportUserH5.run({ ...data, userId: initialValues.userId }).then(res => {
            if (res) {
                message.success('导量成功')
                onChange?.()
            }
        })
    }

    return <Modal title={`${initialValues.username} 导到H5游戏`} visible={visible} onCancel={onClose} onOk={handleOk} confirmLoading={exportUserH5.loading}>
        <Form
            name="basicExport"
            form={form}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
            autoComplete="off"
            initialValues={{ ...initialValues, type: 1 }}
        >
            <Form.Item
                label="手机号码"
                name="mobile"
                rules={[
                    {
                        required: true,
                        validator(_rule, value) {
                            let reg = new RegExp(/^1[3-9]\d{9}$/, 'g')
                            if (!value) {
                                return Promise.reject(new Error('请输入手机号!'))
                            } else if (!reg.test(value)) {
                                return Promise.reject(new Error('请输入正确的手机号!'))
                            }
                            return Promise.resolve()
                        }
                    }
                ]}>
                <Input placeholder="请输入手机号码" allowClear />
            </Form.Item>
            <Form.Item
                label="选择平台"
                name="type"
            >
                <Radio.Group >
                    {
                        [{ id: 1, name: "h5" }, { id: 2, name: "安卓" }, { id: 3, name: "IOS" }].map((item: any) => {
                            return <Radio value={item.id} key={item.id}>{item.name}</Radio>
                        })
                    }
                </Radio.Group>
            </Form.Item>
        </Form>
    </Modal>
}

export default React.memo(ExportH5Modal)