import React from 'react'
import { Menu, Icon, Card, Row, Col, Dropdown } from 'antd'
import { connect } from 'dva'
import Ellipsis from 'ant-design-pro/lib/Ellipsis'
import { dateFormat } from '../../utils/baseUtils'
import Thumbnail from './thumbnail'
import './CardList.less'
const CardGrid = Card.Grid

/**
 * 尝试抽出generateCard()作为一个公共模块
 * 需要指定以下props:
 * mode 模式，分为主页、看板、图表模式 (homepage, dashboard, chart)
 * list 数据所在的列表，存于models中
 * filterLabel 生成列表时使用的过滤器字段
 * onDistribute
 * onTransfer
 * onDelete
 * 
 * 备注： chart和dashboard的thumbnail部分需要抽取出来形成公用的
 * 
 * @class CardList
 * @extends {React.Component}
 */

class CardList extends React.Component {
    
    generateCard() {
        const { mode, dispatch, list, type } = this.props;
        const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
        let filterLabel = (mode !== 'homepage') ? list.filterLabel.replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') : ""; // 添加转义符号
        const operationMenu = (
            <Menu className='menu-operation'>
                <Menu.Item onClick={() => {
                    // this.setState({visibleDistributeBox: true})
                }}> 
                    <Icon type='share-alt'/>分发
                </Menu.Item>
                <Menu.Divider />
                <Menu.Item
                    onClick={()=>{
                        // this.setState({ visibleTransferBox: true})
                    }}
                >
                    <Icon type="swap" />移交
                </Menu.Item>
                <Menu.Item
                    onClick={(e) => {
                        // this.setState({ visibleDeleteBox: true})
                    }}
                >
                    <Icon type="delete" />删除
                    
                </Menu.Item>
            </Menu>
        )

        let cards = list.filter(l => {
            let reg = new RegExp('(' + filterLabel + '){1}', 'ig');
            return (l.name || '').search(reg) !== -1 || (l.description || '').search(reg) !== -1;
        }).sort((a, b) => {
            return new Date(b.createTime) - new Date(a.createTime)
        }).map( (l, i) => (
            <CardGrid className={(type === 'dashboard')? 'recent-dashboard-card' : 'recent-chart-card'} key={i} onClick={() => {
                this.setState({ selectedRecord: l })
            }}>
                <Card
                    title={
                        <Row type='flex' justify='space-between'>
                            <Col span={21} style={{ overflow: 'hidden', textOverflow: 'ellipsis' }} >
                                { filterLabel ?
                                    ((l.name || '').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
                                        )
                                    }
                                    )) : l.name
                                }
                            </Col>
                            <Col style={{ textAlign: 'right' }} span={3} >
                                <Icon type='star-o'/>
                            </Col>
                        </Row>
                    }
                    cover={
                        <Col className='cover-body'>
                            <Row className='thumb' onClick={() => {
                                dispatch({ type: 'dashboardDesigner/reset' });
                                dispatch({ type: 'main/redirect', path: '/dashboard/' + l.code });
                            }}>
                                <Thumbnail mode={type} type={l.type} code={l.code} option={l.chartOption} thumbnail={l.thumbnail}/> 
                            </Row>
                            <Row className='desc'>
                                <Ellipsis tooltip={l.description.length > 16} lines={2}>{
                                    <span>
                                    { filterLabel ?
                                        ((l.description || '').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
                                            )
                                        }
                                        )) : l.description
                                    }
                                </span>
                                }</Ellipsis>
                            </Row>
                            <Row className='footer' type='flex' justify='end' align='bottom'>
                                <Col style={{ textAlign: 'left' }} span={22}>
                                    <Row>{l.createBy} {dateFormat(l.createTime, 'yyyy-MM-dd')}</Row>
                                </Col>
                                <Col span={2} style={{ textAlign: 'right' }}>
                                    <Dropdown overlay={operationMenu} trigger={['click']}>
                                        <Icon type="ellipsis" />
                                    </Dropdown>
                                </Col>
                            </Row>
                        </Col>
                    }
                >
                </Card>
            </CardGrid>
        ));
        if(cards.length === 0) {
            cards = <div style={{ padding: '7px', textAlign: 'center', fontSize: '14px', color: 'rgba(0, 0, 0, 0.45)' }}>暂无数据</div>
            return cards
        }
        
        return cards.slice(0,3); //此处为了开发方便，限制了只显示前3个，之后可能要做成分页
    }

    render() {
        return this.generateCard()
    }
}

export default connect(({ present: { dashboard, homepage, chart } }) =>  { return { homepage, dashboard, chart }})(CardList)