import React from 'react'
import { Table } from 'antd'
import EmptyContent from '../../common/emptyContent'
import EllipsisTooltip from '../../common/ellipsisTooltip/index';
import './tableView.less'

class TableView extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            columnWidth: 200,
            tableScrollHeight: 0,
            refreshable: props.refreshable === undefined ? true : props.refreshable
        };
    }

    componentDidMount() {
        const { viewRef } = this.props;
        this.onTableLayoutChange();
        this[viewRef].addEventListener('resize', this.onTableLayoutChange);
        window.addEventListener('resize', this.onTableLayoutChange);
    }

    componentWillUnmount() {
        const { viewRef } = this.props;
        this[viewRef].removeEventListener('resize', this.onTableLayoutChange);
        window.removeEventListener('resize', this.onTableLayoutChange);
    }

    onTableLayoutChange = () => {
        const { chartOption, viewRef, onPageSizeChange } = this.props;
        const { refreshable, tableScrollHeight } = this.state;
        let bodyRef = this[viewRef];
        const containerHeight = bodyRef.offsetHeight;
        if(containerHeight > 0 ) {
            let newtableScrollHeight = containerHeight - 40 - 24 - 8 * 2;
            if(newtableScrollHeight !== tableScrollHeight) {
                let pageSize = Math.max(~~(newtableScrollHeight/38) + 1, 10);
                if(typeof onPageSizeChange === 'function' && pageSize !== chartOption.pageSize && refreshable) {
                    // 在报表中的dataView第一次数据请求在此发起
                    onPageSizeChange(1, pageSize)
                }
                this.setState({
                    tableScrollHeight: newtableScrollHeight
                });
            }
        }
    }

    render() {
        const { viewRef, columns, dataSource, themeConfig, styleConfig, pagination } = this.props;
        const { columnWidth, tableScrollHeight } = this.state;

        const { bordered } = (styleConfig || {});

        return (<div style={{ height: '100%' }} ref={node => this[viewRef] = node }>
            { !columns || columns.length === 0 ? <EmptyContent /> : <Table
                className={`table-view ${themeConfig.name}`}
                columns={columns ? columns.map((c, i) => {
                    let obj = {
                        ...c,
                        title: <EllipsisTooltip key={i} title={c.title} style={{ width: `${columnWidth - 16}px` }}>{c.title}</EllipsisTooltip>,
                    };
                    if(i !== columns.length - 1) {
                        obj.onCell = () => {
                            return {
                                style: {
                                    whiteSpace: 'nowrap',
                                    maxWidth: columnWidth + 'px',
                                }
                            }
                        };
                        obj.width = columnWidth
                    }
                    return obj; 
                }) : []}
                dataSource={dataSource || []}
                size='small'
                bordered={bordered}
                scroll={{
                    x: columns ? columns.length * columnWidth : 0,
                    y: tableScrollHeight
                }}
                pagination={pagination}
            />}
        </div>);
    }
}

export default TableView;