import React from 'react'
import { Modal, Tabs, Table, Checkbox, Row, Col, Input } from 'antd'
import { connect } from 'dva'
import './accessObjectBox.less'
const { TabPane } = Tabs
const { Search } = Input


class AccessObjectBox extends React.Component {
    
    constructor(props) {
        super(props);
        this.state = {
            selectedGroups: props.group || [],
            selectedUsers: props.geren || []
        }
    }

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

    getAccessObject = () => {
        const { okHandler, hideBox } = this.props;
        const { selectedGroups, selectedUsers } = this.state;
        okHandler(selectedGroups, selectedUsers);
        hideBox();
    }

    render() {
        const { visibleBox, hideBox, userGroup, user } = this.props;
        const { selectedGroups, selectedUsers } = this.state;

        const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
        let filterLabel = (this.state.filterLabel || '').replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号

        const userGroupColumns = [{
            key: 'check',
            title: '选择',
            render: (v, r, i) => <Checkbox
                dataKey={r.key}
                checked={!!selectedGroups.find(g => g.code === r.code)}
                onChange={(e) => {
                    const target = e.target;
                    const checked = target.checked;
                    let { selectedGroups } = this.state;
                    if(checked) {
                        selectedGroups.push({
                            code: r.code,
                            name: r.name,
                            isGroup: true
                        });
                    }else {
                        let index = selectedGroups.findIndex(g => g.code === r.code);
                        selectedGroups.splice(index, 1);
                    }
                    this.setState({ selectedGroups });
                }}
            />,
            width: 50
        }, {
            key: 'name',
            title: '名称',
            dataIndex: 'name',
            width: 400,
            render: value => <span>
                { filterLabel ?
                    ((value || '').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
                        )
                    }
                    )) : value
                }
            </span>,
        }];
        const userColumns = [{
            key: 'check',
            title: '选择',
            render: (v, r, i) => <Checkbox
                dataKey={r.key}
                checked={!!selectedUsers.find(g => g.code === r.code)}
                onChange={(e) => {
                    const target = e.target;
                    const checked = target.checked;
                    let { selectedUsers } = this.state;
                    if(checked) {
                        selectedUsers.push({
                            code: r.code,
                            name: r.fullName,
                            isGroup: false
                        });
                    }else {
                        let index = selectedUsers.findIndex(g => g.code === r.code);
                        selectedUsers.splice(index, 1);
                    }
                    this.setState({ selectedUsers });
                }}
            />,
            width: 50
        }, {
            key: 'fullName',
            title: '名称',
            dataIndex: 'fullName',
            width: 400,
            render: value => <span>
                { filterLabel ?
                    ((value || '').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
                        )
                    }
                    )) : value
                }
            </span>,
        }]

        return (
            <Modal
                className='accessobject-box'
                title={
                    <Row>
                        <Col span={14}>选择分配对象</Col>
                        <Col span={8}><Search 
                            placeholder="请输入关键字"
                            value={this.state.filterLabel}
                            onChange={e => {
                                this.setState({
                                    filterLabel: e.target.value
                                });
                            }}
                        /></Col>
                    </Row>
                }
                visible={visibleBox}
                onCancel={hideBox}
                onOk={this.getAccessObject}
                maskClosable={false}
                destroyOnClose={true}
            >
                <Tabs 
                    className='accessobject-tabs'
                    defaultActiveKey="userGroup"
                >
                    <TabPane tab="用户组" key="userGroup" >
                        <Table
                            className='usergroup-table'
                            columns={userGroupColumns}
                            dataSource={userGroup.list.filter(l => {
                                let reg = new RegExp('(' + filterLabel + '){1}', 'ig');
                                return (l.name || '').search(reg) !== -1;
                             }).map((l, i) => ({
                                ...l,
                                key: i
                            }))}
                            size='small'
                        />
                    </TabPane>
                    <TabPane tab="用户" key="user" >
                        <Table
                            className='user-table'
                            columns={userColumns}
                            dataSource={user.list.filter(l => {
                                let reg = new RegExp('(' + filterLabel + '){1}', 'ig');
                                return (l.fullName || '').search(reg) !== -1;
                             }).map((l, i) => ({
                                ...l,
                                key: i
                            }))}
                            size='small'
                        />
                    </TabPane>
                </Tabs>
            </Modal>
        )
    }
}

export default connect(({ present: { userGroup, user } }) => ({ userGroup, user }))(AccessObjectBox);