import React from 'react';
import { connect } from 'dva';
import { Card, Row, Col, Dropdown, Icon } from 'antd';
import moment from 'moment';
import Thumbnail from './thumbnail';
const CardGrid = Card.Grid;
const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符

class ChartCard extends React.Component {
    render() {
        const { key, chart, onCardClick, filterItem, filterLabel, generateOperationMenu, dispatch } = this.props;

        return <CardGrid
            className={`chart-card ${chart.visible ? `visible` : `hidden`}`}
            key={key}
            onClick={() => {
                onCardClick(chart);
            }}
        >
            <Card
                bordered={false}
                title={
                    <Row type='flex' justify='space-between' title={chart.name}>
                        <Col className='label' style={{ overflow: 'hidden', textOverflow: 'ellipsis', padding: '0 16px' }} >
                            { (filterItem.name === 'name' && filterLabel) ?
                                ((chart.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
                                    )
                                }
                                )) : chart.name
                            }
                        </Col>
                    </Row>
                }
                cover={
                    <Col className='cover-body'>
                        <Row className='thumb' onClick={chart.access && chart.database ? () => {
                            dispatch({ type: 'chartDesigner/reset' });
                            dispatch({ type: 'main/redirect', path: '/chart/' + chart.code });
                            dispatch({ type: 'recent/addRecentRecord', tarId: chart.code, recordType: 0});
                        } : () => {}}>
                            {!chart.database ? <div className='deny-body'>
                                <div className='deny-tip'>数据源丢失</div>
                            </div> : (!chart.access ? <div className='deny-body'>
                                <div className='deny-tip'>无数据权限</div>
                            </div> : null)}
                            <Thumbnail key={chart.code} style={{ opacity: (chart.access && chart.database) ? 1 : 0.3 }} type={chart.type} code={chart.code} thumbnail={chart.thumbnail}/>
                        </Row>
                        <Row className='footer' type='flex' justify='end' align='bottom'>
                            <Col style={{ textAlign: 'left', lineHeight: '28px' }} span={21}>
                                <Row>{
                                    (filterItem.name === 'creatorName' && filterLabel) ?
                                    ((chart.creatorName || '').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
                                        )
                                    }
                                    )) : chart.creatorName
                                } {moment(chart.createTime).format('YYYY-MM-DD')}</Row>
                            </Col>
                            <Col span={3} style={{ textAlign: 'right' }}>
                                <Dropdown overlay={generateOperationMenu()} trigger={['click']}>
                                    <Icon style={{ fontSize: '24px' }} type="ellipsis" theme="outlined" />
                                </Dropdown>
                            </Col>
                        </Row>
                    </Col>
                }
            >
            </Card>
        </CardGrid>
    }
}

export default connect()(ChartCard);