import '../../../style/schedulingSetting.less';
import React, {
	Component
} from 'react';
import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaTop,
	WeaAlertPage,
	WeaRightMenu,
	WeaLeftRightLayout,
	WeaDialog
} from 'ecCom';
import Tabs from '../../../coms/Tabs';
import OrganizationTree from '../../../coms/OrganizationTree';
import Setting from './Setting';
import CalendarScheduling from './CalendarScheduling';
import {
	i18n
} from '../../../public/i18n';

@inject('hrmSchedulingSetting')

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

	componentDidMount() {
		this.init();
	}

	componentWillReceiveProps(nextProps) {
		if (this.props.location.key !== nextProps.location.key) {
			this.init();
			this.refs.orgTree && this.refs.orgTree.refs.tree.fetchData();
		}
	}

	init = () => {
		const {
			hrmSchedulingSetting: store
		} = this.props;
		const {
			checkAuthorized,
			initData
		} = store;
		checkAuthorized('scheduleset', null, initData, null, true);
	}

	tabChangeHandle = (key) => {
		const {
			hrmSchedulingSetting: store
		} = this.props;
		store.setActiveTab(key);
	}

	render() {
		const {
			hrmSchedulingSetting: store
		} = this.props;
		const {
			containerInitFinished,
			conditionFormRender,
			topBtnAndMenu,
			formTarget,
			tabConfig,
			getTabIndex,
			orgTreeProps,
			refreshMainTab,
			dialogParams,
			getDialogOpButtons
		} = store;
		const {
			btns,
			menus
		} = topBtnAndMenu();
		const {
			conditionForm: form,
			conditionFormFields: fields
		} = formTarget;
		const tabProps = {
			tabConfig: tabConfig,
			tabChangeHandle: this.tabChangeHandle,
			activeTabInfo: {
				activeTabKey: tabConfig.activeTabKey,
				activeTabIndex: getTabIndex(tabConfig.tabs, tabConfig.activeTabKey)
			},
			rightMenu: menus,
			store: store,
			conditionForm: form,
			conditionFormFields: fields,
			itemRender: conditionFormRender,
			advanceHeight: 150
		}
		const dProps = {
			...dialogParams,
			buttons: getDialogOpButtons(),
			className: "hrmDialog"
		}

		return (
			<div className="hrm_module_container schedulingSetting">
				{
					containerInitFinished.init && containerInitFinished.authorized &&
					<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@qh67hw`}
						title={i18n.module.schedulingSetting()}
						icon={<i className='icon-coms-hrm'/>}
						iconBgcolor='#217346'
						showDropIcon={true}
						buttons={btns}
						dropMenuDatas={menus}
					>
						{
							containerInitFinished.detachable ? 
							<WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@h5v8tx`} leftCom={<OrganizationTree ecId={`${this && this.props && this.props.ecId || ''}_OrganizationTree@uc23pg`} {...orgTreeProps} ref='orgTree'/>}>
								<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@xvaexx`} {...tabProps}>
									<Setting ecId={`${this && this.props && this.props.ecId || ''}_Setting@8184lc`}/>
									<CalendarScheduling ecId={`${this && this.props && this.props.ecId || ''}_CalendarScheduling@1st7w2`}/>
								</Tabs>
							</WeaLeftRightLayout>
							:
							<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@p6c9q9`} {...tabProps}>
								<Setting ecId={`${this && this.props && this.props.ecId || ''}_Setting@2awkbk`}/>
								<CalendarScheduling ecId={`${this && this.props && this.props.ecId || ''}_CalendarScheduling@585tcg`}/>
							</Tabs>
						}
					</WeaTop>
				}
				{
					containerInitFinished.init && !containerInitFinished.authorized && 
	              	<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@8lnefi`}>
	                  	<div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
	              	</WeaAlertPage>
				}
				<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@cpneet`} {...dProps}>
                	{dProps.coms}
                </WeaDialog>
			</div>
		)
	}
}