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


@inject('hrmWorkflowSetting')

@observer
export default class WorkflowSetting extends Component {
	constructor(props) {
		super(props);
		this.state = {
			moduleName: ''
		}
	}

	componentDidMount() {
		const {
			params
		} = this.props;
		this.setState({
			moduleName: params.type
		})
		this.init(params.type);
	}

	componentWillReceiveProps(nextProps) {
		const {
			params
		} = nextProps;
		this.setState({
			moduleName: params.type
		})
		this.init(params.type);
		this.refs.orgTree && this.refs.orgTree.refs.tree.fetchData();
	}

	init = (moduleType) => {
		const {
			hrmWorkflowSetting: store
		} = this.props, {
			checkAuthorized,
			initData
		} = store
		const moduleName = moduleType === 'stateChange' ? 'statechange' : 'stateschedule';
		checkAuthorized(`stateset/${moduleName}`, null, () => initData(moduleName), 'getStateRightMenu', true);
	}

	render() {
		const {
			hrmWorkflowSetting: store
		} = this.props;
		const {
			containerInitFinished,
			topBtnAndMenu,
			orgTreeProps,
			tabConfig,
			formTarget,
			refreshMainTab,
			attendanceOrgTreeProps
		} = store;
		const {
			btns,
			menus
		} = topBtnAndMenu();
		const {
			moduleName
		} = this.state;
		const title = moduleName === 'stateChange' ? i18n.module.stateChangeWfSetting() : i18n.module.timeManagerWfSetting();
		const topProps = {
			title,
			icon: <i className='icon-coms-hrm'/>,
			iconBgcolor: '#217346',
			showDropIcon: true,
			buttons: btns,
			dropMenuDatas: menus
		}
		const {
			conditionForm: form,
			conditionFormFields: fields
		} = formTarget;
		const tabProps = {
			tabConfig: tabConfig,
			activeTabInfo: {
				activeTabKey: tabConfig.activeTabKey,
				activeTabIndex: 0
			},
			rightMenu: menus,
			store: store,
			conditionForm: form,
			conditionFormFields: fields,
		}
		const orgProps = (moduleName === 'stateChange' ? orgTreeProps : attendanceOrgTreeProps);
		return (
			<div className="hrm_module_container wfSetting">
			{
				containerInitFinished.init && containerInitFinished.authorized &&
				<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@eha0yy`} {...topProps}>
					{
						containerInitFinished.detachable ? 
						<WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@mr5omi`} leftCom={<OrganizationTree ecId={`${this && this.props && this.props.ecId || ''}_OrganizationTree@d1tk9t`} {...orgProps} ref='orgTree'/>}>
							<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@6wkli5`} {...tabProps}>
				            	<DataList ecId={`${this && this.props && this.props.ecId || ''}_DataList@h0a7t4`} store={store} rightMenu={menus}/>
				            </Tabs>
						</WeaLeftRightLayout>
						:
						<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@g7e90f`} {...tabProps}>
			            	<DataList ecId={`${this && this.props && this.props.ecId || ''}_DataList@g9111o`} store={store} rightMenu={menus}/>
			            </Tabs>
					}
				</WeaTop>
			}
			{
				containerInitFinished.init && !containerInitFinished.authorized && 
              	<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@vnc0z1`}>
                  	<div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
              	</WeaAlertPage>
			}
			</div>
		)
	}
}