import React from 'react'
import { connect } from 'dva'
import { Collapse, Icon } from 'antd'
import CusIcon from '../common/cusIcon/index'
import './collection.less'

class Collection extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activeKey: ['1']
        }
    }

    openTab = (c) => {
        const { dispatch } = this.props;
        dispatch({ type: 'home/openTab', tab: {
            code: c.code,
            name: c.name
        } })
    }

    componentDidMount() {
        this.props.dispatch({ type: 'home/fetchCollectionDashboardList' });
    }

    generateCollectionMenus() {
        const { home, dispatch } = this.props;
        const { collectionDashboards, menuFilterLabel } = home;
        const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
        const regLabel = menuFilterLabel.replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号
        if(collectionDashboards.length > 0) {
            return collectionDashboards.filter(c => c.name.search(new RegExp('(' + regLabel + '){1}', 'ig')) > -1).map((c, i) => (
                <li className='item' key={i}  onClick={() => {
                    this.openTab(c);
                }}>
                    <span style={{ fontWeight: 'bold', cursor: 'pointer', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                        <CusIcon style={{ marginRight: '8px' }} type="bi-nav-dashboard" />
                        {
                            <span title={c.name}>
                                { (c.name || '').split(new RegExp(`(${regLabel})`, 'i')).map((fragment, i) => {
                                    return (
                                        fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'), '\\$1') === regLabel.toLowerCase() ?
                                            <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
                                        fragment
                                    )
                                }) }                       
                            </span>
                        }
                    </span>
                    <Icon type="star" theme="filled" style={{ color: '#F2B91D', cursor: 'pointer', marginTop: '4px' }} onClick={(e) => {
                        e.stopPropagation()
                        dispatch({ type: 'home/uncollect', data: c });
                    }}/>
                </li>
            ));
        }else {
            return null
        }
    }

    render() {
        const { activeKey } = this.state;
        return <Collapse
            className='collapse-collection'
            bordered={false}
            defaultActiveKey={['1']}
            activeKey={activeKey}
            expandIcon={({ isActive }) => <Icon type="caret-right" rotate={isActive ? 90 : 0} onClick={() => {
                this.setState({
                    activeKey: activeKey.length > 0 ? [] : ['1']
                });
            }}/>}
        >
            <Collapse.Panel header={<div onDoubleClick={() => {
                this.setState({
                    activeKey: activeKey.length > 0 ? [] : ['1']
                });
            }}><CusIcon style={{ marginRight: '8px' }} type="bi-compass" />我的收藏</div>} key="1">
                { this.generateCollectionMenus() }
            </Collapse.Panel>
        </Collapse>
    }
}
export default connect(({ home }) => ({ home }))(Collection)