import React from 'react';
import { List, Tag, Avatar, FloatingBubble } from 'antd-mobile';
import { PlusOutlined } from '@ant-design/icons';
import FilterPanel from 'oak-frontend-base/es/components/filterPanel';
import Style from './mobile.module.less';
export default function render(props) {
    const { userArr, isRoot, oakFullpath } = props.data;
    const { onCellClicked, t, gotoCreateUser } = props.methods;
    return (<div className={Style.container}>
            <div className={Style.filter}>
                <FilterPanel entity="user" oakPath={oakFullpath} columns={[
            {
                attr: 'nickname',
                op: '$includes',
            },
            {
                attr: 'name',
                op: '$includes',
            },
            {
                attr: 'userState',
            },
        ]}/>
            </div>
            <List>
                {userArr?.map((ele, index) => {
            return (<List.Item key={index} onClick={() => onCellClicked(ele.id)} prefix={<Avatar className={Style.avatar} src={ele.avatar}/>} title={<div>{ele.name || '--'}</div>} description={<div className={Style.description}>
                                    <div className={Style.row}>
                                        <span className={Style.label}>
                                            {t('user:attr.nickname')}:&nbsp;
                                        </span>
                                        <span className={Style.value}>
                                            {ele.nickname || '--'}
                                        </span>
                                    </div>
                                    <div className={Style.row}>
                                        <span className={Style.label}>
                                            {t('mobile:name')}:&nbsp;
                                        </span>
                                        <span className={Style.value}>
                                            {ele.mobile || '--'}
                                        </span>
                                    </div>
                                    <Tag color={ele.userStateColor}>
                                        {ele.userStateStr}
                                    </Tag>
                                </div>}></List.Item>);
        })}
            </List>

            {isRoot && (<FloatingBubble axis="x" magnetic="x" style={{
                '--initial-position-bottom': '24px',
                '--initial-position-right': '24px',
                '--edge-distance': '24px',
            }} onClick={() => {
                gotoCreateUser();
            }}>
                    <PlusOutlined />
                </FloatingBubble>)}
        </div>);
}