import React, { useEffect, useState } from 'react'
import Icon from '@ant-design/icons'
import dayjs from 'dayjs'
import {
    COLOR_BACKGROUND,
    COLOR_ERROR_SECONDARY,
    COLOR_PRODUCTION,
    DATABASE_DELETE_SUCCESS,
    DATABASE_DUPLICATE_KEY,
    DATABASE_INSERT_SUCCESS,
    DATABASE_SELECT_SUCCESS,
    DATABASE_UPDATE_SUCCESS
} from '@/constants/common.constants'
import { useUpdatedEffect } from '@/util/hooks'
import { hasPermission } from '@/util/auth'
import { utcToLocalTime, isPastTime, localTimeToUtc, dayjsToUtc, getNowUtc } from '@/util/datetime'
import {
    r_sys_group_get_list,
    r_sys_role_get_list,
    r_sys_user_add,
    r_sys_user_change_password,
    r_sys_user_delete,
    r_sys_user_delete_list,
    r_sys_user_get,
    r_sys_user_update
} from '@/services/system'
import Permission from '@/components/common/Permission'
import { r_api_avatar_random_base64 } from '@/services/api/avatar'
import FitFullscreen from '@/components/common/FitFullscreen'
import HideScrollbar from '@/components/common/HideScrollbar'
import FlexBox from '@/components/common/FlexBox'
import Card from '@/components/common/Card'

interface ChangePasswordFields extends UserChangePasswordParam {
    passwordConfirm: string
    needChangePassword: boolean
}

const User: React.FC = () => {
    const [modal, contextHolder] = AntdModal.useModal()

    const [isDrawerOpen, setIsDrawerOpen] = useState(false)
    const [isDrawerEdit, setIsDrawerEdit] = useState(false)
    const [isDrawerSubmittable, setIsDrawerSubmittable] = useState(false)
    const [isDrawerSubmitting, setIsDrawerSubmitting] = useState(false)
    const [roleData, setRoleData] = useState<RoleVo[]>([])
    const [groupData, setGroupData] = useState<GroupVo[]>([])
    const [isLoadingRole, setIsLoadingRole] = useState(false)
    const [isLoadingGroup, setIsLoadingGroup] = useState(false)
    const [avatar, setAvatar] = useState('')

    const [form] = AntdForm.useForm<UserAddEditParam>()
    const formValues = AntdForm.useWatch([], form)
    const [newFormValues, setNewFormValues] = useState<UserAddEditParam>()

    const [changePasswordForm] = AntdForm.useForm<ChangePasswordFields>()

    const [tableParams, setTableParams] = useState<TableParam>({
        pagination: {
            current: 1,
            pageSize: 20,
            position: ['bottomCenter'],
            showTotal: (total, range) =>
                `第 ${
                    range[0] === range[1] ? `${range[0]}` : `${range[0]}~${range[1]}`
                } 项 共 ${total} 项`
        }
    })
    const [tableSelectedItem, setTableSelectedItem] = useState<React.Key[]>([])
    const [userData, setUserData] = useState<UserWithRoleInfoVo[]>([])
    const [isLoadingUserData, setIsLoadingUserData] = useState(false)

    const [searchType, setSearchType] = useState('ALL')
    const [searchValue, setSearchValue] = useState('')
    const [isUseRegex, setIsUseRegex] = useState(false)
    const [isRegexLegal, setIsRegexLegal] = useState(true)

    const dataColumns: _ColumnsType<UserWithRoleInfoVo> = [
        {
            dataIndex: 'username',
            title: '用户',
            render: (value, record) => <AntdTooltip title={record.id}>{value}</AntdTooltip>,
            width: '0'
        },
        {
            dataIndex: ['userInfo', 'avatar'],
            title: '头像',
            render: (value) => (
                <AntdAvatar
                    src={
                        <AntdImage
                            preview={{ mask: <Icon component={IconOxygenEye}></Icon> }}
                            src={`data:image/png;base64,${value}`}
                            alt={'Avatar'}
                        />
                    }
                    style={{ background: COLOR_BACKGROUND }}
                />
            ),
            width: '0',
            align: 'center'
        },
        {
            dataIndex: ['userInfo', 'nickname'],
            title: '昵称'
        },
        {
            dataIndex: ['userInfo', 'email'],
            title: '邮箱'
        },
        {
            dataIndex: ['roles'],
            title: '角色',
            render: (value: RoleVo[], record) =>
                record.id === '0' ? (
                    <AntdTag color={'blue'}>管理员</AntdTag>
                ) : value.length ? (
                    value.map((role) => (
                        <AntdTag key={role.id} color={role.enable ? 'purple' : 'orange'}>
                            {role.name}
                        </AntdTag>
                    ))
                ) : (
                    <AntdTag>无</AntdTag>
                ),
            align: 'center'
        },
        {
            dataIndex: ['groups'],
            title: '用户组',
            render: (value: GroupVo[], record) =>
                record.id === '0' ? (
                    <AntdTag color={'blue'}>管理员</AntdTag>
                ) : value.length ? (
                    value.map((role) => (
                        <AntdTag key={role.id} color={role.enable ? 'purple' : 'orange'}>
                            {role.name}
                        </AntdTag>
                    ))
                ) : (
                    <AntdTag>无</AntdTag>
                ),
            align: 'center'
        },
        {
            title: '最近登录',
            render: (_, record) =>
                record.currentLoginTime
                    ? `${utcToLocalTime(record.currentLoginTime)}【${record.currentLoginIp}】`
                    : '无',
            align: 'center'
        },
        {
            title: '状态',
            render: (_, record) => (
                <AntdTooltip
                    title={
                        <>
                            <p>创建：{utcToLocalTime(record.createTime)}</p>
                            <p>修改：{utcToLocalTime(record.updateTime)}</p>
                        </>
                    }
                >
                    {!record.verify &&
                    !record.locking &&
                    (!record.expiration || !isPastTime(record.expiration)) &&
                    (!record.credentialsExpiration || !isPastTime(record.credentialsExpiration)) &&
                    record.enable ? (
                        <AntdTag color={'green'}>正常</AntdTag>
                    ) : (
                        <>
                            {record.verify ? (
                                <>
                                    <AntdPopover content={record.verify} trigger={'click'}>
                                        <AntdTag style={{ cursor: 'pointer' }}>未验证</AntdTag>
                                    </AntdPopover>
                                </>
                            ) : undefined}
                            {record.locking ? <AntdTag>锁定</AntdTag> : undefined}
                            {record.expiration && isPastTime(record.expiration) ? (
                                <AntdTag>过期</AntdTag>
                            ) : undefined}
                            {record.credentialsExpiration &&
                            isPastTime(record.credentialsExpiration) ? (
                                <AntdTag>改密</AntdTag>
                            ) : undefined}
                            {!record.enable ? <AntdTag>禁用</AntdTag> : undefined}
                        </>
                    )}
                </AntdTooltip>
            ),
            align: 'center'
        },
        {
            title: '操作',
            width: '14em',
            align: 'center',
            render: (_, record) => (
                <>
                    <AntdSpace size={'middle'}>
                        <Permission operationCode={'system:user:modify:password'}>
                            <a
                                style={{ color: COLOR_PRODUCTION }}
                                onClick={handleOnChangePasswordBtnClick(record)}
                            >
                                修改密码
                            </a>
                        </Permission>
                        <Permission operationCode={'system:user:modify:one'}>
                            <a
                                style={{ color: COLOR_PRODUCTION }}
                                onClick={handleOnEditBtnClick(record)}
                            >
                                编辑
                            </a>
                        </Permission>
                        <Permission operationCode={'system:user:delete:one'}>
                            {record.id !== '0' ? (
                                <a
                                    style={{ color: COLOR_PRODUCTION }}
                                    onClick={handleOnDeleteBtnClick(record)}
                                >
                                    删除
                                </a>
                            ) : undefined}
                        </Permission>
                    </AntdSpace>
                </>
            )
        }
    ]

    const handleOnTableChange = (
        pagination: _TablePaginationConfig,
        filters: Record<string, _FilterValue | null>,
        sorter: _SorterResult<UserWithRoleInfoVo> | _SorterResult<UserWithRoleInfoVo>[]
    ) => {
        pagination = { ...tableParams.pagination, ...pagination }
        if (Array.isArray(sorter)) {
            setTableParams({
                pagination,
                filters,
                sortField: sorter.map((value) => value.field).join(',')
            })
        } else {
            setTableParams({
                pagination,
                filters,
                sortField: sorter.field,
                sortOrder: sorter.order
            })
        }

        if (pagination.pageSize !== tableParams.pagination?.pageSize) {
            setGroupData([])
        }
    }

    const handleOnTableSelectChange = (selectedRowKeys: React.Key[]) => {
        setTableSelectedItem(selectedRowKeys)
    }

    const handleOnAddBtnClick = () => {
        setIsDrawerEdit(false)
        setIsDrawerOpen(true)
        form.setFieldValue('id', undefined)
        form.setFieldValue('username', newFormValues?.username)
        form.setFieldValue('password', undefined)
        form.setFieldValue('locking', newFormValues?.locking ?? false)
        form.setFieldValue('expiration', newFormValues?.expiration)
        form.setFieldValue('credentialsExpiration', newFormValues?.credentialsExpiration)
        form.setFieldValue('enable', newFormValues?.enable ?? true)
        form.setFieldValue('nickname', newFormValues?.nickname)
        form.setFieldValue('avatar', newFormValues?.avatar)
        form.setFieldValue('email', newFormValues?.email)
        form.setFieldValue('roleIds', newFormValues?.roleIds)
        form.setFieldValue('groupIds', newFormValues?.groupIds)

        if (!roleData || !roleData.length) {
            getRoleData()
        }
        if (!groupData || !groupData.length) {
            getGroupData()
        }
        getAvatar()
    }

    const handleOnListDeleteBtnClick = () => {
        modal
            .confirm({
                title: '确定删除',
                content: `确定删除选中的 ${tableSelectedItem.length} 个用户吗？`
            })
            .then(
                (confirmed) => {
                    if (confirmed) {
                        setIsLoadingUserData(true)

                        void r_sys_user_delete_list(tableSelectedItem)
                            .then((res) => {
                                const response = res.data

                                if (response.code === DATABASE_DELETE_SUCCESS) {
                                    void message.success('删除成功')
                                    setTimeout(() => {
                                        getUser()
                                    })
                                } else {
                                    void message.error('删除失败，请稍后重试')
                                }
                            })
                            .finally(() => {
                                setIsLoadingUserData(false)
                            })
                    }
                },
                () => {}
            )
    }

    const handleOnChangePasswordBtnClick = (value: UserWithRoleInfoVo) => {
        return () => {
            changePasswordForm.setFieldValue('id', value.id)
            changePasswordForm.setFieldValue('password', undefined)
            changePasswordForm.setFieldValue('passwordConfirm', undefined)
            changePasswordForm.setFieldValue(
                'needChangePassword',
                value.credentialsExpiration && isPastTime(value.credentialsExpiration)
            )
            void modal.confirm({
                icon: <></>,
                title: (
                    <>
                        <Icon
                            style={{ color: COLOR_PRODUCTION, marginRight: 10 }}
                            component={IconOxygenSetting}
                        />
                        修改用户 {value.username} 的密码
                    </>
                ),
                content: (
                    <AntdForm
                        form={changePasswordForm}
                        style={{ marginTop: 20 }}
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                    >
                        <AntdForm.Item name={'id'} label={'ID'} labelAlign={'right'}>
                            <AntdInput disabled />
                        </AntdForm.Item>
                        <AntdForm.Item
                            name={'password'}
                            label={'密码'}
                            rules={[
                                {
                                    required: true
                                }
                            ]}
                        >
                            <AntdInput.Password />
                        </AntdForm.Item>
                        <AntdForm.Item
                            name={'passwordConfirm'}
                            label={'确认密码'}
                            rules={[
                                {
                                    required: true
                                },
                                ({ getFieldValue }) => ({
                                    validator(_, value) {
                                        if (!value || getFieldValue('password') === value) {
                                            return Promise.resolve()
                                        }
                                        return Promise.reject(new Error('两次密码输入不一致'))
                                    }
                                })
                            ]}
                        >
                            <AntdInput.Password />
                        </AntdForm.Item>
                        {value.id !== '0' ? (
                            <AntdForm.Item
                                name={'needChangePassword'}
                                label={'需改密'}
                                valuePropName={'checked'}
                                rules={[{ type: 'boolean' }]}
                            >
                                <AntdSwitch />
                            </AntdForm.Item>
                        ) : undefined}
                    </AntdForm>
                ),
                onOk: () =>
                    changePasswordForm
                        .validateFields()
                        .then(
                            () => {
                                return new Promise((resolve, reject) => {
                                    void r_sys_user_change_password({
                                        id: changePasswordForm.getFieldValue('id') as string,
                                        password: changePasswordForm.getFieldValue(
                                            'password'
                                        ) as string,
                                        credentialsExpiration: (changePasswordForm.getFieldValue(
                                            'needChangePassword'
                                        ) as boolean)
                                            ? getNowUtc()
                                            : undefined
                                    }).then((res) => {
                                        const response = res.data
                                        if (response.success) {
                                            void message.success('修改密码成功')
                                            resolve(true)
                                        } else {
                                            reject(response.msg)
                                        }
                                    })
                                })
                            },
                            () => {
                                return new Promise((_, reject) => {
                                    reject('输入有误')
                                })
                            }
                        )
                        .then(() => {
                            getUser()
                        })
            })
        }
    }

    const handleOnEditBtnClick = (value: UserWithRoleInfoVo) => {
        return () => {
            setIsDrawerEdit(true)
            setIsDrawerOpen(true)

            form.setFieldValue('id', value.id)
            form.setFieldValue('username', value.username)
            form.setFieldValue('password', undefined)
            form.setFieldValue('verified', !value.verify?.length)
            form.setFieldValue('locking', value.locking)
            form.setFieldValue('expiration', value.expiration)
            form.setFieldValue('credentialsExpiration', value.credentialsExpiration)
            form.setFieldValue('enable', value.enable)
            form.setFieldValue('nickname', value.userInfo.nickname)
            form.setFieldValue('avatar', value.userInfo.avatar)
            form.setFieldValue('email', value.userInfo.email)
            form.setFieldValue(
                'roleIds',
                value.roles.map((role) => role.id)
            )
            form.setFieldValue(
                'groupIds',
                value.groups.map((group) => group.id)
            )
            if (!roleData || !roleData.length) {
                getRoleData()
            }
            if (!groupData || !groupData.length) {
                getGroupData()
            }
            void form.validateFields()
        }
    }

    const handleOnDeleteBtnClick = (value: UserWithRoleInfoVo) => {
        return () => {
            modal
                .confirm({
                    title: '确定删除',
                    content: `确定删除用户 ${value.username} 吗？`
                })
                .then(
                    (confirmed) => {
                        if (confirmed) {
                            setIsLoadingUserData(true)

                            void r_sys_user_delete(value.id)
                                .then((res) => {
                                    const response = res.data
                                    if (response.code === DATABASE_DELETE_SUCCESS) {
                                        void message.success('删除成功')
                                        setTimeout(() => {
                                            getUser()
                                        })
                                    } else {
                                        void message.error('删除失败，请稍后重试')
                                    }
                                })
                                .finally(() => {
                                    setIsLoadingUserData(false)
                                })
                        }
                    },
                    () => {}
                )
        }
    }

    const handleOnDrawerClose = () => {
        setIsDrawerOpen(false)
    }

    const filterOption = (input: string, option?: { label: string; value: string }) =>
        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())

    const handleOnSubmit = () => {
        if (isDrawerSubmitting) {
            return
        }

        setIsDrawerSubmitting(true)

        if (isDrawerEdit) {
            void r_sys_user_update({
                ...formValues,
                expiration: formValues.expiration
                    ? localTimeToUtc(formValues.expiration)
                    : undefined,
                credentialsExpiration: formValues.credentialsExpiration
                    ? localTimeToUtc(formValues.credentialsExpiration)
                    : undefined
            })
                .then((res) => {
                    const response = res.data
                    switch (response.code) {
                        case DATABASE_UPDATE_SUCCESS:
                            setIsDrawerOpen(false)
                            void message.success('更新成功')
                            getUser()
                            break
                        case DATABASE_DUPLICATE_KEY:
                            void message.error('已存在相同用户名或邮箱')
                            break
                        default:
                            void message.error('更新失败，请稍后重试')
                    }
                })
                .finally(() => {
                    setIsDrawerSubmitting(false)
                })
        } else {
            void r_sys_user_add({
                ...formValues,
                expiration: formValues.expiration
                    ? localTimeToUtc(formValues.expiration)
                    : undefined,
                credentialsExpiration: formValues.credentialsExpiration
                    ? localTimeToUtc(formValues.credentialsExpiration)
                    : undefined
            })
                .then((res) => {
                    const response = res.data
                    switch (response.code) {
                        case DATABASE_INSERT_SUCCESS:
                            setIsDrawerOpen(false)
                            void message.success('添加成功')
                            setNewFormValues(undefined)
                            getUser()
                            break
                        case DATABASE_DUPLICATE_KEY:
                            void message.error('已存在相同用户名或邮箱')
                            break
                        default:
                            void message.error('添加失败，请稍后重试')
                    }
                })
                .finally(() => {
                    setIsDrawerSubmitting(false)
                })
        }
    }

    const handleOnSearchValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setSearchValue(e.target.value)

        if (isUseRegex) {
            try {
                RegExp(e.target.value)
                setIsRegexLegal(!(e.target.value.includes('{}') || e.target.value.includes('[]')))
            } catch (e) {
                setIsRegexLegal(false)
            }
        } else {
            setIsRegexLegal(true)
        }
    }

    const handleOnSearchNameKeyDown = (e: React.KeyboardEvent) => {
        if (e.key === 'Enter') {
            getUser()
        }
    }

    const handleOnSearchTypeChange = (value: string) => {
        setSearchType(value)
    }

    const handleOnUseRegexChange = (e: _CheckboxChangeEvent) => {
        setIsUseRegex(e.target.checked)
        if (e.target.checked) {
            try {
                RegExp(searchValue)
                setIsRegexLegal(!(searchValue.includes('{}') || searchValue.includes('[]')))
            } catch (e) {
                setIsRegexLegal(false)
            }
        } else {
            setIsRegexLegal(true)
        }
    }

    const handleOnQueryBtnClick = () => {
        getUser()
    }

    const getUser = () => {
        if (isLoadingUserData) {
            return
        }

        if (!isRegexLegal) {
            void message.error('非法正则表达式')
            return
        }

        setIsLoadingUserData(true)

        void r_sys_user_get({
            currentPage: tableParams.pagination?.current,
            pageSize: tableParams.pagination?.pageSize,
            sortField:
                tableParams.sortField && tableParams.sortOrder
                    ? (tableParams.sortField as string)
                    : undefined,
            sortOrder:
                tableParams.sortField && tableParams.sortOrder ? tableParams.sortOrder : undefined,
            searchType,
            searchValue: searchValue.trim().length ? searchValue : undefined,
            searchRegex: isUseRegex ? isUseRegex : undefined,
            ...tableParams.filters
        })
            .then((res) => {
                const response = res.data
                if (response.code === DATABASE_SELECT_SUCCESS) {
                    const records = response.data?.records

                    records && setUserData(records)
                    response.data &&
                        setTableParams({
                            ...tableParams,
                            pagination: {
                                ...tableParams.pagination,
                                total: response.data.total
                            }
                        })
                } else {
                    void message.error('获取失败，请稍后重试')
                }
            })
            .finally(() => {
                setIsLoadingUserData(false)
            })
    }

    const handleOnDrawerRefresh = () => {
        getRoleData()
        getGroupData()
    }

    const getRoleData = () => {
        if (isLoadingRole) {
            return
        }

        setIsLoadingRole(true)

        void r_sys_role_get_list()
            .then((res) => {
                const response = res.data

                if (response.code === DATABASE_SELECT_SUCCESS) {
                    response.data && setRoleData(response.data)
                } else {
                    void message.error('获取角色列表失败，请稍后重试')
                }
            })
            .finally(() => {
                setIsLoadingRole(false)
            })
    }

    const getGroupData = () => {
        if (isLoadingGroup) {
            return
        }

        setIsLoadingGroup(true)

        void r_sys_group_get_list()
            .then((res) => {
                const response = res.data

                if (response.code === DATABASE_SELECT_SUCCESS) {
                    response.data && setGroupData(response.data)
                } else {
                    void message.error('获取用户组列表失败，请稍后重试')
                }
            })
            .finally(() => {
                setIsLoadingGroup(false)
            })
    }

    const getAvatar = () => {
        void r_api_avatar_random_base64().then((res) => {
            const response = res.data
            if (response.success) {
                response.data && setAvatar(response.data.base64)
                response.data && form.setFieldValue('avatar', response.data.base64)
            }
        })
    }

    useEffect(() => {
        form.validateFields({ validateOnly: true }).then(
            () => {
                setIsDrawerSubmittable(true)
            },
            () => {
                setIsDrawerSubmittable(false)
            }
        )

        if (!isDrawerEdit && formValues) {
            setNewFormValues({
                username: formValues.username,
                verified: formValues.verified,
                locking: formValues.locking,
                expiration: formValues.expiration,
                credentialsExpiration: formValues.credentialsExpiration,
                enable: formValues.enable,
                nickname: formValues.nickname,
                avatar: formValues.avatar,
                email: formValues.email,
                roleIds: formValues.roleIds,
                groupIds: formValues.groupIds
            })
        }
    }, [formValues])

    useUpdatedEffect(() => {
        getUser()
    }, [
        JSON.stringify(tableParams.filters),
        JSON.stringify(tableParams.sortField),
        JSON.stringify(tableParams.sortOrder),
        JSON.stringify(tableParams.pagination?.pageSize),
        JSON.stringify(tableParams.pagination?.current)
    ])

    const addAndEditForm = (
        <AntdForm
            form={form}
            disabled={isDrawerSubmitting}
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
        >
            <div
                style={{
                    display: 'flex',
                    justifyContent: 'center',
                    marginBottom: 20
                }}
            >
                <AntdTooltip title={'点击获取新头像'}>
                    <AntdAvatar
                        src={
                            <img
                                src={`data:image/png;base64,${
                                    isDrawerEdit ? formValues?.avatar : avatar
                                }`}
                                alt={'Avatar'}
                            />
                        }
                        size={100}
                        style={{ background: COLOR_BACKGROUND, cursor: 'pointer' }}
                        onClick={getAvatar}
                    />
                </AntdTooltip>
            </div>
            <AntdForm.Item hidden name={'avatar'}>
                <AntdInput />
            </AntdForm.Item>
            <AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}>
                <AntdInput disabled />
            </AntdForm.Item>
            <AntdForm.Item
                name={'username'}
                label={'用户名'}
                rules={[{ required: true, whitespace: false }]}
            >
                <AntdInput allowClear />
            </AntdForm.Item>
            {!isDrawerEdit ? (
                <>
                    <AntdForm.Item
                        name={'password'}
                        label={'密码'}
                        rules={[{ required: true, whitespace: false }]}
                    >
                        <AntdInput.Password allowClear />
                    </AntdForm.Item>
                </>
            ) : undefined}
            <AntdForm.Item name={'nickname'} label={'昵称'} rules={[{ whitespace: false }]}>
                <AntdInput allowClear />
            </AntdForm.Item>
            <AntdForm.Item
                name={'email'}
                label={'邮箱'}
                rules={[{ required: true, whitespace: false, type: 'email' }]}
            >
                <AntdInput type={'email'} allowClear />
            </AntdForm.Item>
            {formValues?.id !== '0' ? (
                <>
                    <AntdForm.Item name={'roleIds'} label={'角色'}>
                        <AntdSelect
                            mode={'multiple'}
                            allowClear
                            showSearch
                            filterOption={filterOption}
                            options={roleData.map((value) => ({
                                value: value.id,
                                label: `${value.name}${!value.enable ? '(已禁用)' : ''}`
                            }))}
                        />
                    </AntdForm.Item>
                    <AntdForm.Item name={'groupIds'} label={'用户组'}>
                        <AntdSelect
                            mode={'multiple'}
                            allowClear
                            showSearch
                            filterOption={filterOption}
                            options={groupData.map((value) => ({
                                value: value.id,
                                label: `${value.name}${!value.enable ? '(已禁用)' : ''}`
                            }))}
                        />
                    </AntdForm.Item>
                    <AntdForm.Item name={'verified'} label={'已验证'}>
                        <AntdSwitch />
                    </AntdForm.Item>
                    <AntdForm.Item
                        valuePropName={'checked'}
                        name={'locking'}
                        label={'锁定'}
                        rules={[{ type: 'boolean' }]}
                    >
                        <AntdSwitch />
                    </AntdForm.Item>
                    <AntdForm.Item
                        name={'expiration'}
                        label={'过期时间'}
                        getValueProps={(date: string) => (date ? { value: dayjs(date) } : {})}
                        getValueFromEvent={(date: dayjs.Dayjs | null) =>
                            date ? dayjsToUtc(date) : undefined
                        }
                    >
                        <AntdDatePicker
                            showTime
                            allowClear
                            changeOnBlur
                            style={{ width: '100%' }}
                        />
                    </AntdForm.Item>
                    <AntdForm.Item
                        name={'credentialsExpiration'}
                        label={'认证过期时间'}
                        getValueProps={(date: string) => (date ? { value: dayjs(date) } : {})}
                        getValueFromEvent={(date: dayjs.Dayjs | null) =>
                            date ? dayjsToUtc(date) : undefined
                        }
                    >
                        <AntdDatePicker
                            showTime
                            allowClear
                            changeOnBlur
                            style={{ width: '100%' }}
                        />
                    </AntdForm.Item>
                    <AntdForm.Item
                        valuePropName={'checked'}
                        name={'enable'}
                        label={'启用'}
                        rules={[{ type: 'boolean' }]}
                    >
                        <AntdSwitch />
                    </AntdForm.Item>
                </>
            ) : undefined}
        </AntdForm>
    )

    const toolbar = (
        <FlexBox direction={'horizontal'} gap={10}>
            <Permission operationCode={'system:user:add:one'}>
                <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
                    <AntdButton
                        type={'primary'}
                        style={{ padding: '4px 8px' }}
                        onClick={handleOnAddBtnClick}
                    >
                        <Icon component={IconOxygenPlus} style={{ fontSize: '1.2em' }} />
                    </AntdButton>
                </Card>
            </Permission>
            <Card
                hidden={tableSelectedItem.length === 0}
                style={{ overflow: 'inherit', flex: '0 0 auto' }}
            >
                <AntdButton style={{ padding: '4px 8px' }} onClick={handleOnListDeleteBtnClick}>
                    <Icon component={IconOxygenDelete} style={{ fontSize: '1.2em' }} />
                </AntdButton>
            </Card>
            <Card style={{ overflow: 'inherit' }}>
                <AntdInput
                    addonBefore={
                        <AntdSelect
                            value={searchType}
                            onChange={handleOnSearchTypeChange}
                            style={{ width: '6em' }}
                            dropdownStyle={{ textAlign: 'center' }}
                        >
                            <AntdSelect.Option value={'ALL'}>全部</AntdSelect.Option>
                            <AntdSelect.Option value={'ID'}>ID</AntdSelect.Option>
                            <AntdSelect.Option value={'USERNAME'}>用户名</AntdSelect.Option>
                            <AntdSelect.Option value={'NICKNAME'}>昵称</AntdSelect.Option>
                            <AntdSelect.Option value={'EMAIL'}>邮箱</AntdSelect.Option>
                        </AntdSelect>
                    }
                    suffix={
                        <>
                            {!isRegexLegal ? (
                                <span style={{ color: COLOR_ERROR_SECONDARY }}>非法表达式</span>
                            ) : undefined}
                            <AntdCheckbox checked={isUseRegex} onChange={handleOnUseRegexChange}>
                                <AntdTooltip title={'正则表达式'}>.*</AntdTooltip>
                            </AntdCheckbox>
                        </>
                    }
                    allowClear
                    value={searchValue}
                    onChange={handleOnSearchValueChange}
                    onKeyDown={handleOnSearchNameKeyDown}
                    status={isRegexLegal ? undefined : 'error'}
                />
            </Card>
            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
                <AntdButton onClick={handleOnQueryBtnClick} type={'primary'}>
                    查询
                </AntdButton>
            </Card>
        </FlexBox>
    )

    const table = (
        <Card>
            <AntdTable
                dataSource={userData}
                columns={dataColumns}
                rowKey={(record) => record.id}
                pagination={tableParams.pagination}
                loading={isLoadingUserData}
                onChange={handleOnTableChange}
                rowSelection={
                    hasPermission('system:user:delete:multiple')
                        ? {
                              type: 'checkbox',
                              onChange: handleOnTableSelectChange,
                              getCheckboxProps: (record) => ({ disabled: record.id === '0' })
                          }
                        : undefined
                }
            />
        </Card>
    )

    const drawerToolbar = (
        <AntdSpace>
            <AntdTooltip title={'刷新角色和用户组列表'}>
                <AntdButton onClick={handleOnDrawerRefresh} disabled={isDrawerSubmitting}>
                    <Icon component={IconOxygenRefresh} />
                </AntdButton>
            </AntdTooltip>
            <AntdButton onClick={handleOnDrawerClose} disabled={isDrawerSubmitting}>
                取消
            </AntdButton>
            <AntdButton
                type={'primary'}
                disabled={!isDrawerSubmittable}
                loading={isDrawerSubmitting}
                onClick={handleOnSubmit}
            >
                提交
            </AntdButton>
        </AntdSpace>
    )

    return (
        <>
            <FitFullscreen>
                <HideScrollbar
                    style={{ padding: 30 }}
                    isShowVerticalScrollbar
                    autoHideWaitingTime={500}
                >
                    <FlexBox gap={20}>
                        {toolbar}
                        {table}
                    </FlexBox>
                </HideScrollbar>
            </FitFullscreen>
            <AntdDrawer
                title={isDrawerEdit ? '编辑用户' : '新增用户'}
                width={'36vw'}
                onClose={handleOnDrawerClose}
                open={isDrawerOpen}
                closable={!isDrawerSubmitting}
                maskClosable={!isDrawerSubmitting}
                extra={drawerToolbar}
            >
                {addAndEditForm}
            </AntdDrawer>
            {contextHolder}
        </>
    )
}

export default User