import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaTop,
	WeaTab,
	WeaRightMenu,
	WeaLocaleProvider,
	WeaHelpfulTip
} from 'ecCom';
import {
	MagicForm,
} from '../../public/sweet-form.js';
import Table from './Table';
import TimeSelectionSetting from '../timeSelection';
const getLabel = WeaLocaleProvider.getLabel;

@inject('hrmOvertimeRule')
@observer
class Top extends React.Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {
		this.props.hrmOvertimeRule.getMenus();
	}

	getWrapperStyle = () => {
		const width = window.innerWidth || document.body.clientWidth;

		if (width < 1366) {
			return {
				padding: '20px 26%'
			}
		} else {
			return {
				padding: '20px 33%'
			}
		}
	}

	getTransverseSiblingComponents = () => {
		const {
			form
		} = this.props.hrmOvertimeRule.formElements, {
			timeselection
		} = form.getFormParams();
		
		if(timeselection === "1"){
			return {
				timeselection: <span className="name-def" onClick={() => this.props.hrmOvertimeRule.getDefForm(3)}>{getLabel('513303','选项名称定义')}</span>,
			}
		}else{
			return {
				timeselection: <span><WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@vfg68t`} style={{marginLeft: 10}} title={getLabel('514037','前端选择具体起止时间时，时长不满半天的算半天，满半天不满一天的，算一天')} /></span>
			}
		}

	}

	render() {
		const {
			hrmOvertimeRule
		} = this.props, {
			topButtons,
			dropMenuDatas,
			topComponentStaticProps,
			table,
			tab,
			tabStaticProps,
			formElements,
			formConfig,
			dynamicTips,
			handleFormElementsChange,
			timeSelectionDialog,
			formTarget
		} = hrmOvertimeRule, {
			tableStore
		} = table, {
			selectedKey
		} = tab, {
			form
		} = formElements;

		return (
			<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@4cxsw4`} 
                loading={tableStore.loading}
                buttons={topButtons}
                dropMenuDatas={dropMenuDatas}
                {...topComponentStaticProps}
            >
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@f9ig68`} datas={dropMenuDatas}>
                	<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@fs4xnx`} {...tabStaticProps} {...tab}/>
	            	{
	            		(selectedKey === '0') 
	            		? <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@sq6b8v`} /> 
	            		: <MagicForm ecId={`${this && this.props && this.props.ecId || ''}_MagicForm@klcgok`} 
	            				{...formElements} 
				        		{...formConfig}
				        		wrapperStyle={this.getWrapperStyle()}
				        		dynamicTips={dynamicTips}
				        		isFormInit={form.isFormInit}
				        		transverseSiblingComponents={this.getTransverseSiblingComponents()}
				        		onFormElementsChange={() => handleFormElementsChange()}
				           />
	            	}
                </WeaRightMenu>
				<TimeSelectionSetting ecId={`${this && this.props && this.props.ecId || ''}_TimeSelectionSetting@3a3avi`} dialog={timeSelectionDialog} formTarget={formTarget}/>
            </WeaTop>
		)
	}
}

export default Top