import React, {Component} from 'react';
import {observer} from 'mobx-react';
import {WeaRightMenu, WeaTableEditable} from 'ecCom';

@observer
export default class FieldDataList extends Component{
    constructor(props) {
        super(props);
        this.state = {
            resize: new Date().getTime()
        }
    }

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

    componentWillUnmount() {
        window.removeEventListener('resize', this.resizeHandle);
    }

    resizeHandle = (e) => {
        this.setState({
            resize: new Date().getTime()
        })
    }

    render(){
        const {resize} = this.state;
        const {
            rightMenu,
			store
        } = this.props;
        const {fieldListTableProps} = store;

        let tableProps = {};
        if (this.tabDom) {
            tableProps = {
                scroll: {
                    y: this.tabDom.offsetHeight - 40,
                }
            }
        }

        return (
            <div className="tabPane" ref={dom => {this.tabDom = dom}}>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@nv7532`} datas={rightMenu}>
                    <WeaTableEditable ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEditable@cfv3an`} {...fieldListTableProps} tableProps={tableProps}/>
                </WeaRightMenu>
			</div>
        )
    }
}