import React, {Component} from 'react';
import {observer} from 'mobx-react';
import {Table} from 'antd';

@observer
export default class Analysis extends Component{
    constructor(props){
        super(props);
        this.state = {
            h: 300
        }
    }
    
    componentDidMount(){
        window.addEventListener('resize', this.resizeHandle);
        this.calculateH();
    }
    
    componentWillUnmount() {
        window.removeEventListener('resize', this.resizeHandle);
    }

    resizeHandle = (e) => {
        this.calculateH();
    }

    calculateH = () =>{
        let h = $('.content').height() - 81 - 30;
        this.setState({
            h
        })
    }

    render(){
        const {store} = this.props;
        const {analysisTable} = store;
        const {columns, datas} = store.toJS(analysisTable);
        const x = (columns.length -2) * 51 + 250, y = this.state.h;
        return (
            <div className='tabPane content'>
                <div className='table'>
                    <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@2w8ang`} bordered columns={columns} dataSource={datas} scroll={{x, y}} pagination={false}/>
                </div>
            </div>
        )
    }
}