import { useAjax } from "@/Hook/useAjax"
import { uploadExcelServerApi } from "@/services/gameData/roleOperate"
import { CloudUploadOutlined, UploadOutlined } from "@ant-design/icons"
import { Button, Form, Modal, Radio, Select, Upload, message } from "antd"
import React, { useState } from "react"

interface Props {
    gameList: any[]
    onChange?: () => void
}
/**
 * 游戏区服上传Excel
 * @returns 
 */
const UploadExcel: React.FC<Props> = ({ gameList, onChange }) => {

    /***********************************/
    const [visible, setVisible] = useState<boolean>(false)
    const [form] = Form.useForm()
    const uploadExcelServer = useAjax((params) => uploadExcelServerApi(params))//获取合服超父游戏列表
    /***********************************/

    const handleOk = async () => {
        form.submit()
        let data = await form.validateFields()
        const { multipartFile, ...params } = data
        let formData = new FormData();
        formData.append('multipartFile', multipartFile[0]?.originFileObj)
        uploadExcelServer.run({ ...params, formData }).then(res => {
            if (res) {
                message.success('上传成功')
                form.setFieldsValue({})
                setVisible(false)
                onChange && onChange()
            }
        })
    }

    const normFile = (e: any) => {
        if (Array.isArray(e)) {
            return e;
        }
        return e?.fileList;
    };

    return <>
        <Button icon={<CloudUploadOutlined />} type="primary" onClick={() => { setVisible(true); }}>上传Excel</Button>

        {visible && <Modal
            title="上传Excel"
            visible={visible}
            onCancel={() => { form.setFieldsValue({}); setVisible(false) }}
            onOk={handleOk}
        >
            <Form
                name="basicGameServerUpload"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 20 }}
                form={form}
                autoComplete="off"
                initialValues={{ gameServerExcelEnum: 'SERVER_ADD' }}
            >
                <Form.Item label="游戏" name="gameId" rules={[{ required: true, message: '请选择游戏!' }]}>
                    <Select
                        showSearch
                        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="gameServerExcelEnum" rules={[{ required: true, message: '请选择文件类型!' }]}>
                    <Radio.Group>
                        <Radio value={'SERVER_ADD'}>添加区服</Radio>
                        <Radio value={'SERVER_MERGE'}>合并区服</Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item label="选择文件" name="multipartFile" getValueFromEvent={normFile} rules={[{ required: true, message: '请选择文件!' }]} valuePropName="fileList">
                    <Upload
                        name="avatar"
                        accept=".xlsx,.xls"
                        maxCount={1}
                        beforeUpload={() => { return false }}
                    >
                        <Button icon={<UploadOutlined />}>上传Excel</Button>
                    </Upload>
                </Form.Item>
            </Form>
        </Modal>}
    </>
}

export default React.memo(UploadExcel)