import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	WeaTableNew
} from 'comsMobx';
import Tabs from '../../../coms/Tabs';
import classnames from 'classnames';
import filter from 'lodash/filter';
const {
	WeaTable
} = WeaTableNew;

@observer
export default class EditSbuCompany extends Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {
		const {
			store,
			routeProps
		} = this.props;
		store.init(routeProps.params);
	}

	componentWillReceiveProps(nextProps) {}

	render() {
		const {
			store
		} = this.props;
		const {
			tabConfig,
			getTabIndex,
			formTarget,
			table,
			renderCol
		} = store;
		const {
			conditionForm: form,
			conditionFormFields: fields
		} = formTarget;
		const tabProps = {
			tabConfig: tabConfig,
			tabChangeHandle: this.tabChangeHandle,
			activeTabInfo: {
				activeTabKey: tabConfig.activeTabKey,
				activeTabIndex: getTabIndex(tabConfig.tabs, tabConfig.activeTabKey)
			},
			store: store,
			conditionForm: form,
			conditionFormFields: fields,
		}
		const classes = classnames({
			['tabPane']: true,
			['tabPane-include']: true
		});
		const tableProps = {
			scroll: {
				x: filter(table.columns, {display: 'true'}).length * 120,
				y: $('.tabPane-include').height() - 140
			}
		}

		return (
			<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@23x9me`} {...tabProps}>
				<div className={classes}>
					<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@cuxilf`}
                        comsWeaTableStore={table}
                        hasOrder={true}
                        needScroll={true}
						getColumns={cols => renderCol(cols)}
						{...tableProps}
                    />
				</div>
			</Tabs>
		)
	}
}