import { useAjax } from "@/Hook/useAjax"
import { aeGameServerApi } from "@/services/gameData/roleOperate"
import { DatePicker, Form, Input, Modal, Select, message } from "antd"
import dayjs from "dayjs"
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 aeGameServer = useAjax((params) => aeGameServerApi(params))
    /******************************/

    const handleOk = async () => {
        form.submit()
        let data = await form.validateFields()
        if (initialValues?.id) {
            data.id = initialValues?.id
        }
        data.startTime = dayjs(data.startTime).format('YYYY-MM-DD HH:mm:ss')
        aeGameServer.run(data).then(res => {
            if (res) {
                if (initialValues?.id) {
                    message.success('修改成功')
                } else {
                    message.success('新增成功')
                }
                onChange && onChange()
            }
        })
    }

    return <Modal title={`${initialValues?.id ? '修改' : '新增'}游戏区服`} visible={visible} onCancel={onClose} onOk={handleOk} confirmLoading={aeGameServer.loading}>
        <Form
            name="basicGameServer"
            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="serverName" rules={[{ required: true, message: '请输入区服名称!' }]}>
                <Input placeholder="请输入区服名称" />
            </Form.Item>
            <Form.Item label="区服ID" name="serverId" rules={[{ required: true, message: '请输入区服ID!' }]}>
                <Input placeholder="请输入区服ID" />
            </Form.Item>
            <Form.Item label="开服时间" name="startTime" rules={[{ required: true, message: '请选择开服时间!' }]}>
                <DatePicker showTime />
            </Form.Item>
            <Form.Item label="区服冠名" name="nickName">
                <Input placeholder="请输入区服冠名" />
            </Form.Item>
        </Form>
    </Modal>
}

export default React.memo(EditModal)