import React from 'react';
import { Tag, Card, Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import FilterPanel from 'oak-frontend-base/es/components/filterPanel';
import ListPro from 'oak-frontend-base/es/components/listPro';
export default function Render(props) {
    const { methods, data } = props;
    const { t, setPageSize, setCurrentPage, gotoCreateUser, onCellClicked } = methods;
    const { oakFullpath, oakLoading, userArr = [], isRoot, } = data;
    return (<Card title={<FilterPanel entity="user" oakPath={oakFullpath} columns={[
                {
                    attr: 'nickname',
                    op: '$includes',
                },
                {
                    attr: 'name',
                    op: '$includes',
                },
                {
                    attr: 'userState',
                },
            ]}/>}>
            <ListPro oakPath={`${oakFullpath}`} entity="user" buttonGroup={[{
                label: `${t('common::action.add')}${t('user:name')}`,
                show: isRoot,
                type: 'primary',
                onClick: () => gotoCreateUser()
            }]} loading={oakLoading} data={userArr} attributes={[
            {
                width: 100,
                path: 'avatar',
                label: t('avatar'),
                render: (row) => {
                    if (!row.avatar) {
                        return (<Avatar icon={<UserOutlined />}></Avatar>);
                    }
                    return <Avatar src={row.avatar} shape="circle"/>;
                },
            },
            {
                path: 'nickname',
                label: t('user:attr.nickname'),
            },
            {
                path: 'name',
                label: t('user:attr.name'),
            },
            {
                path: 'mobile',
                label: t('mobile:name'),
            },
            {
                path: 'userState',
                label: t('user:attr.userState'),
                render: (record) => {
                    return (<Tag color={record.userStateColor}>
                                    {record.userStateStr}
                                </Tag>);
                },
            },
        ]} extraActions={[{
                label: t('common::action.detail'),
                action: 'detail',
                show: true,
            }]} onAction={(row, action) => {
            switch (action) {
                case 'detail': {
                    onCellClicked(row.id);
                }
                default: { }
            }
        }}/>
        </Card>);
}