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

class DataPreview extends React.Component {
    
    constructor(props) {
        super(props);
        this.state = {
            boxW: 0.8, // 0 ~ 1
            boxH: 0.8, // 0 ~ 1
            columnWidth: 200,
            tableHeaderHeight: 60,
            screenWidth: document.documentElement.clientWidth || document.body.clientWidth,
            screenHeight: document.documentElement.clientHeight || document.body.clientHeight
        };
    }

    componentDidMount() {
        this.onWindowResize();
        window.addEventListener('resize', this.onWindowResize);
    }

    componentWillUnmount() {
        const { dispatch } = this.props;
        window.removeEventListener('resize', this.onWindowResize);
        dispatch({ type: 'dataList/reset' });
    }

    onWindowResize = () => {
        const { fetchFunction } = this.props;
        let tableBodyHeight = document.body.clientHeight * this.state.boxH - 64 - 24 * 2 - 40 - 40 - 2;

        if(tableBodyHeight !== this.state.tableBodyHeight) {
            this.setState({
                tableBodyHeight
            }, () => {
                typeof fetchFunction === 'function' && fetchFunction(1, Math.ceil(tableBodyHeight / 38));
            });
        }
    }

    render() {
        const { title, modalClassName, fetchFunction, dataList, visibleBox, hideBox, dispatch } = this.props;
        const { loading, columns, dataSource, pageSize, total } = dataList;
        const { boxW, boxH, columnWidth, tableBodyHeight } = this.state;

        return <Modal
            className={`datapreview ${modalClassName}`}
            title={title}
            width={`${100 * boxW}%`}
            height={`${100 * boxH}%`}
            visible={visibleBox}
            footer={null}
            onCancel={() => {
                dispatch({ type: 'dataList/reset' });
                hideBox()
            }}
            maskClosable={false}
        >
            <Table
                columns={columns.map((c, i) => {
                    let obj = {
                        title: c.label,
                        dataIndex: c.name,
                        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 = columnWidth
                    }
                    return obj; 
                })}
                dataSource={dataSource.map((d, i) => ({
                    ...d,
                    key: i
                }))}
                size='small'
                loading={loading}
                pagination={{
                    pageSize,
                    total,
                    // simple: true,
                    showTotal: (total, range) => {
                        return `第${range[0]}到第${range[1]}条数据，共${total}条数据`;
                    },
                    onChange: (page, pageSize) => {
                        typeof fetchFunction === 'function' && fetchFunction(page, pageSize);
                    }
                }}
                scroll={{ x: columns ? columns.length * columnWidth : false, y: tableBodyHeight }}
            />
        </Modal>
    }
}

export default connect(({ dataList }) => ({ dataList }))(DataPreview);