import React, {Component} from 'react';
import {observer} from 'mobx-react';
import BaseInfo from './info/BaseInfo';
import AttendanceType from './info/AttendanceType';
import Member from './info/Member';
// import {Tabs} from 'weaHrmComsPublic';
import {Tabs} from '../../../hrmComsPublic/index';

@observer
export default class Info extends Component{
    render(){
		// const {Tabs} = window.weaHrmComsPublic;
        const {
			store
        } = this.props;
        const {
            editTabConfig,
            formTarget,
            refreshTab,
        } = store;
        const tabConfig = store.toJS(editTabConfig);
        const {
			btns,
			menus,
			tabBtnDef
		} = store.btnsAndMenus(tabConfig);
		const {memberConditionForm: form, memberConditionFormFields: fields} = formTarget;
        const tabProps = {
            tabConfig: tabConfig,
            tabChangeHandle: tabConfig.tabChangeHandle,
            activeTabInfo: {
                activeTabKey: tabConfig.activeTabKey,
                activeTabIndex: store.getTabIndex(tabConfig.tabs, tabConfig.activeTabKey)
            },
            store: store,
            tabBtnDef: tabBtnDef,
            conditionForm: form,
			conditionFormFields: fields,
        }
        
        return (
            <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@gmfm28`} {...tabProps}>
                <BaseInfo ecId={`${this && this.props && this.props.ecId || ''}_BaseInfo@2vj30b`} store={store} tabContent={true}/>
                <AttendanceType ecId={`${this && this.props && this.props.ecId || ''}_AttendanceType@odzpjp`} store={store} tabContent={true}/>
                <Member ecId={`${this && this.props && this.props.ecId || ''}_Member@ljdq0s`} store={store} height={this.props.height} tabContent={true}/>
            </Tabs>
        )
    }
}