import React from 'react'
import { Layout, Card, Row, Col, Table, Dropdown, Icon, Menu, Input } from 'antd'
import { connect } from 'dva'
import './userManagement.less'
const { Content } = Layout
const { Search } = Input

class UserManagement extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({ type: 'user/fetchList' });
    }

    render() {
        const { user, dispatch } = this.props;

        const moreOperatingMenu = (
            <Menu className='operationmenu' visible={true}>
                <Menu.Item
                    onClick={() => {
                    }}
                >
                    <Icon type="key" />设为管理员
                </Menu.Item>
            </Menu>
        );

        const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
        let filterLabel = (user.filterLabel || '').replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号
        
        const columns = [{
            title: '姓名',
            dataIndex: 'fullName',
            width: 100,
            render: (text, record, index) => (
                <span>
                    { filterLabel ?
                        ((text || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
                            return (
                                fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
                                <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
                                fragment
                            )
                        }
                        )) : text
                    }
                </span>
            )
        }, {
            title: '角色',
            dataIndex: 'role',
            width: 100,
        }, {
            title: '操作',
            render: (text, record, index) => (
                <Dropdown code={record.code} overlay={moreOperatingMenu} trigger={['click']} >
                    <Icon type="setting" />
                </Dropdown>
            ),
            width: 50
        }];

        return (
            <Layout className='usermanagement-view'>
                <Content>
                    <Card className='usermanagement-body' title={
                        <Row className='usermanagement-tools' type='flex' justify='space-between'>
                            <Col style={{ display: 'flex' }}>
                            </Col>
                            <Col className='search'>
                                <Col>
                                    <Search
                                        placeholder="请输入关键字"
                                        value={user.filterLabel}
                                        onChange={e => {
                                            dispatch({ type: 'user/setFilterLabel', label: e.target.value });
                                        }}
                                    />
                                </Col>
                            </Col>
                        </Row>
                    }>
                        <Table
                            className='usermanagement-table usermanagement-table'
                            columns={columns}
                            dataSource={user.list.filter(l => {
                                let reg = new RegExp('(' + filterLabel + '){1}', 'ig');
                                return (l.fullName || '').search(reg) !== -1;
                            })}
                            size='small'
                            onRow={(record) => {
                                return {
                                    onClick: () => {
                                        dispatch({ type: 'user/setNewModelFields', fields: [
                                            { name: 'code', value: record.code },
                                            { name: 'name', value: record.name },
                                            { name: 'description', value: record.description }
                                        ] });
                                    }
                                }
                            }}
                        />
                    </Card>
                </Content>
            </Layout>
        );
    }
}

export default connect(({ present: { user } }) => ({ user }))(UserManagement);