import { useAjax } from "@/Hook/useAjax";
import { AddPackLinkCodeApi } from "@/services/gameData/roleOperate";
import { Form, Input, message, Modal } from "antd";
import React from "react"

interface Props {
    gameId: number,
    linkId: number
    visible?: boolean
    onClose?: () => void
    onChange?: () => void
}

const ModifyCode: React.FC<Props> = ({ gameId, linkId, visible, onChange, onClose }) => {

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

    const AddPackLinkCode = useAjax((params) => AddPackLinkCodeApi(params))
    /**************************************/


    const handleOk = async () => {
        form.submit()
        let { codeList } = await form.validateFields()
        let newCodeList: string[] = codeList ? codeList?.split(/[,，\n\s]+/ig).filter((item: any) => item) : []
        const params = { codeList: newCodeList, gameId, linkId }
        console.log(params)
        AddPackLinkCode.run(params).then(res => {
            if (res) {
                message.success('新增成功')
                onChange?.()
            }
        })
    }


    return <Modal
        title={<strong>{'新增'}礼包码</strong>}
        visible={visible}
        onCancel={onClose}
        onOk={handleOk}
        confirmLoading={AddPackLinkCode.loading}
    >
        <Form
            name="basicPackCode"
            form={form}
            autoComplete="off"
            layout="vertical"
            colon={false}
        >
            <Form.Item label={<strong>礼包码</strong>} name="codeList" rules={[{ required: true, message: '请输入礼包码!' }]}>
                <Input.TextArea rows={6} placeholder="请输入礼包码(多个，,空格换行)" />
            </Form.Item>
        </Form>
    </Modal>
}

export default React.memo(ModifyCode)