import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	WeaRightMenu
} from 'ecCom';
import Tabs from '../../coms/Tabs';
import {addContentPath} from '../../util/index.js'

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

	componentDidMount() {}

	componentWillReceiveProps(nextProps) {}

	render() {
		const {
			store
		} = this.props;
		const {
			setIframe,
			tabConfig,
			tabChangeHandle,
			getTabIndex,
			formTarget,
			generateTabBtn,
			refreshTab,
			topBtnAndMenu
		} = store;
		const {
			btns,
			menus
		} = topBtnAndMenu();
		const {
			conditionForm: form,
			conditionFormFields: fields
		} = formTarget;
		const tabProps = {
			tabConfig: tabConfig,
			tabChangeHandle: tabChangeHandle,
			activeTabInfo: {
				activeTabKey: tabConfig.activeTabKey,
				activeTabIndex: getTabIndex(tabConfig.tabs, tabConfig.activeTabKey)
			},
			store,
			conditionForm: form,
			conditionFormFields: fields,
			tabBtnDef: tabConfig.buttons
		}
		let iframeHeight = $('.wea-new-top-content').height() - 47;
		iframeHeight += 'px';
		return (
			<div className='frame'>
				<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@ov920h`} {...tabProps}>
					<div className='tabPane' style={{bottom: 10}}>
						<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@iu6oj7`} datas={menus}>
							<iframe id='orgChartFrame' src={addContentPath('/hrm/hrm_e9/orgChart/orgChart.html')} style={{border: 'none'}} width='100%' height='100%' ref={(dom) => setIframe(dom)}/>
						</WeaRightMenu>
					</div>
				</Tabs>
			</div>
		)
	}
}