import React from 'react';
import { connect } from 'dva';
import { Modal, Table } from 'antd';
import moment from 'moment';
import EllipsisTooltip from '../../common/ellipsisTooltip/index';

class ChartDataPreview extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            columns: [],
            dataSource: []
        }
    }
    componentDidMount() {
        const { dispatch, chartCode, chartType, chartOption, chartConfig, filters } = this.props;
        let h = document.body.clientHeight * 0.8 - 64 - 24 * 2 - 40 - 40 - 2;
        this.setState({
            loading: true,
            tableBodyHeight: h,
            pageSize: Math.ceil(h / 38)
        }, () => {
            dispatch({ type: 'chartDesigner/getChartTableData', chartCode, chartType, chartOption, chartConfig, filters }).then(data => {
                this.setState({
                    loading: false,
                    columns: data.columns,
                    dataSource: data.dataSource
                });
            });
        });
    }
    render() {
        const { modalClassName, visibleBox, hideBox } = this.props;
        const { columns, dataSource, loading, pageSize, tableBodyHeight } = this.state;
        return <Modal
            className={`datapreview chartdatapreview ${modalClassName}`}
            title='查看列'
            width='80%'
            height='80%'
            visible={visibleBox}
            footer={null}
            onCancel={() => {
                hideBox()
            }}
            maskClosable={true}
        >
            <Table
                columns={columns.map((c, i) => {
                    let obj = {
                        ...c,
                        title: <EllipsisTooltip key={i} title={c.title} style={{ width: '134px' }}>{c.title}</EllipsisTooltip>,
                        width: 150,
                        onCell: () => {
                            return {
                                style: {
                                    whiteSpace: 'nowrap',
                                    maxWidth: 150,
                                }
                            }
                        },
                    };
                    if(c.type === 'time') {
                        obj.render = v => {
                            let text = v === null ? '空' : (moment(v).isValid() ? moment(v).format('YYYY-MM-DD') : v)
                            return <EllipsisTooltip key={i} title={text}>{text}</EllipsisTooltip>
                        }
                    }else {
                        obj.render = v => {
                            let text = v === null ? '空' : v
                            return <EllipsisTooltip key={i} title={text}>{text}</EllipsisTooltip>
                        }
                    }
                    if(i !== columns.length - 1) {
                        obj.width = 150
                    }
                    return obj; 
                })}
                dataSource={dataSource.map((d, i) => ({
                    ...d,
                    key: i
                }))}
                loading={loading}
                size='small'
                pagination={{
                    pageSize,
                    total: dataSource.length,
                    // simple: true,
                    showTotal: (total, range) => {
                        return `第${range[0]}到第${range[1]}条数据，共${total}条数据`;
                    }
                }}
                scroll={{ x: columns ? columns.length * 150 : false, y: tableBodyHeight }}
            />
        </Modal>
    }
}

export default connect()(ChartDataPreview);