import '../../style/matrixDataMaintenance.less';
import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	WeaTableEdit,
} from 'ecCom';
import {
	Pagination,
} from 'antd';
import Tabs from '../../coms/Tabs';
import ImportResource from '../importresource/Import';
import DataListPagination from './DataListPagination';
import * as mobx from 'mobx';
const {
	toJS
} = mobx;

@observer
export default class DataList 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.timer && clearTimeout(this.timer);
		this.timer = setTimeout(() => {
			this.setState({
				resize: new Date().getTime()
			})
		}, 1000);
    }

	render() {
		const {resize} = this.state;
		const {
			 store,
			 rootStore
		} = this.props;
		const {dialogHeight} = rootStore;
		const {
			tabConfig,
			btnsAndMenus,
			tableEditConfig,
			setTableRef,
			refreshTab,
			refreshCurrentData,
			onTableEditChange,
			onRowSelect, 
		} = store;
		const {
			btns,
			menus,
			tabBtnDef
		} = btnsAndMenus(tabConfig);
		const tabProps = {
			tabConfig: tabConfig,
			activeTabInfo: {
				activeTabKey: tabConfig.activeTabKey,
				activeTabIndex: 0
			},
			rightMenu: [],
			store: store,
			tabBtnDef: tabBtnDef
		}
		let tableConfig = toJS(tableEditConfig);
		if(rootStore.dialogHeight)
			tableConfig.tableProps.scroll.y = rootStore.dialogHeight -135;
		else{
			tableConfig.tableProps.scroll.y = $('.matrixDataMaintenance').innerHeight() -135;
		}
		
		return (
			<div className='matrixDataMaintenance' style={{height: '100%'}}>
				<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@b15x5z`} {...tabProps}>
					<div className="tabPane tabPane-dialog">
						<div className='dataList dataList-tab'>
							<WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@x7uc5l`} {...tableConfig} onRowSelect={onRowSelect} onChange={onTableEditChange} ref={dom => {setTableRef(dom)}}/>
						</div>
						<DataListPagination ecId={`${this && this.props && this.props.ecId || ''}_DataListPagination@g8bwhu`} store={store} />
					</div>
				</Tabs>
				<ImportResource ecId={`${this && this.props && this.props.ecId || ''}_ImportResource@bxspem`} onClose={refreshCurrentData}/>
			</div>
		);
	}
}