import { MovableModalForm } from '@/components';
import SysRoleController from '@/services/apis/SysRoleController';
import { FormInstance, ProFormSelect, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
import { App } from 'antd';
import { useRef, useState } from 'react';

const RoleEditModal: React.FC<{
    data: Partial<API.SysRoleOutput>;
    roleGroupList: API.SysRoleGroupOutput[],
    onFinish: (data?: Partial<API.SysRoleOutput>) => void;
    onClose?: () => void;
}> = ({ data, roleGroupList, onFinish, onClose }) => {
    const formRef = useRef<FormInstance>();
    const [visible, setVisible] = useState<boolean>(true);
    const { message } = App.useApp();

    const handleClose = () => {
        setVisible(false);
        setTimeout(() => onClose?.(), 300);
    };

    return (
        <>
            <MovableModalForm
                title={`${data.id !== 0 ? '修改' : '添加'}角色`}
                width={480}
                open={visible}
                formRef={formRef}
                initialValues={data}
                modalProps={{
                    centered: true,
                    maskClosable: false,
                    onCancel: () => {
                        formRef?.current?.resetFields();
                        handleClose();
                    },
                }}
                onFinish={async (values: any) => {
                    console.log(values)
                    try {
                        const p: API.AddSysRoleInput = { ...values };
                        if (data.id === 0) {
                            await SysRoleController.add(p);
                        } else {
                            let updateParams = { ...p, id: data.id } as API.UpdateSysRoleInput;
                            await SysRoleController.update(updateParams);
                        }
                        message.success('操作成功！');
                        formRef?.current?.resetFields();
                        onFinish(data.id !== 0 ? p : undefined);
                        handleClose();
                        return true;
                    } catch {
                        message.error('操作失败！');
                        return false;
                    }
                }}
            >
                <ProFormSelect
                    label="所属角色组"
                    name="roleGroupId"
                    disabled={data.id !== 0}
                    rules={[{ required: true }]}
                    options={roleGroupList.filter(t => t.id !== 1).map(t => ({ label: t.name, value: t.id }))}
                />
                <ProFormText
                    label="角色名称"
                    name="name"
                    fieldProps={{ maxLength: 80 }}
                    rules={[{ required: true }]}
                />
                <ProFormTextArea
                    label="备注说明"
                    name="remark"
                    fieldProps={{ maxLength: 200 }}
                />
            </MovableModalForm >
        </>
    );
};

export default RoleEditModal;
