import { PageContainer, ProCard } from '@ant-design/pro-components';
import { useEmotionCss } from '@ant-design/use-emotion-css';
import { useModel } from '@umijs/max';
import { Avatar, Divider, Space } from 'antd';
import React from 'react';

const Workbench: React.FC = () => {
    const { initialState } = useModel('@@initialState');
    const { currentUser } = initialState ?? {};

    // const { token } = theme.useToken();

    const headerClassName = useEmotionCss(({ token }) => {
        return {
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            '.avatar': {
                width: 64,
                height: 64,
            },
            '.text-panel': {
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-between',
                padding: `${token.paddingXS}px ${token.paddingMD}px`,
                '.text': {
                    color: token.colorTextHeading,
                    fontSize: 20,
                    marginBottom: token.paddingXS,
                },
                '.tags': {
                    fontSize: 14,
                    color: token.colorTextLabel,
                    '.iconfont': {
                        marginRight: 4,
                    },
                },
            },
        };
    });

    return (
        <PageContainer>
            <ProCard>
                <div className={headerClassName}>
                    <Avatar
                        className="avatar"
                        src={currentUser?.avatar || '/images/avatar-default.svg'}
                        alt="头像"
                    />
                    <div className="text-panel">
                        <span className="text">
                            欢迎您{currentUser?.name}，祝你开心每一天！
                        </span>
                        <Space className="tags" split={<Divider type="vertical" />}>
                            {currentUser?.sysOrg && <span>{currentUser?.sysOrg.name}</span>}
                            {currentUser?.sysRoles && currentUser?.sysRoles.length > 0 && <span>{currentUser?.sysRoles?.map(t => t.name)?.join('、')}</span>}
                        </Space>
                    </div>
                </div>
            </ProCard>


            {/* <ProList
                headerTitle="2023至2024学年上学期（2023秋）小学教育质量问卷监测"
                style={{ marginTop: token.margin }}
                size="small"
                toolBarRender={() => [<Button key="detail" type="link" size="small">详情</Button>]}
            /> */}
        </PageContainer>
    );
};

export default Workbench;