import { App, Form, Modal } from 'antd';
import React from 'react';
import SelectCorpUser from '../corpUserManage/selectCorpUser';
import { useAjax } from '@/Hook/useAjax';
import { addCorpUserChatApi } from '../../API/groupLeaderManage';

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


const AddGL: React.FC<AddGLProps> = ({ visible, onChange, onClose }) => {

    /****************************************/
    const { message } = App.useApp()
    const [form] = Form.useForm();
    const addCorpUserChat = useAjax((params) => addCorpUserChatApi(params))
    /****************************************/

    const handleOk = () => {
        form.validateFields().then((values) => {
            addCorpUserChat.run({
                corpUserList: values.corpUserList.map(item => ({ corpId: item.corpId, corpUserId: item.corpUserId }))
            }).then((res) => {
                if (res?.data) {
                    message.success('添加成功')
                    onChange?.()
                }
            })
        }).catch((err) => {
            console.log('err', err)
            form.submit()
        });
    }

    return <Modal
        title={<strong>新增群主号</strong>}
        open={visible}
        onCancel={onClose}
        width={500}
        onOk={handleOk}
        confirmLoading={addCorpUserChat.loading}
    >
        <Form
            form={form}
            name="newGL"
            labelAlign='left'
            labelCol={{ span: 5 }}
            colon={false}
            scrollToFirstError={{
                behavior: 'smooth',
                block: 'center'
            }}
            onFinishFailed={({ errorFields }) => {
                message.error(errorFields?.[0]?.errors?.[0])
            }}
            preserve={true}
        >
            <Form.Item label={<strong>群主号</strong>} name="corpUserList" rules={[{ required: true, message: '请选择群主号!' }]}>
                <SelectCorpUser placeholder="请选择群主号" />
            </Form.Item>
        </Form>
    </Modal>
};

export default React.memo(AddGL);