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


@inject('hrmPaidLevel')

@observer
export default class PaidLevel 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 {
			hrmPaidLevel: store
		} = this.props;
		const {
			checkAuthorized,
			initData
		} = store;
		checkAuthorized('paidleave', {
			type: 'set'
		}, initData);
	}

	render() {
		const {
			hrmPaidLevel: store
		} = this.props;
		const {
			containerInitFinished,
			topBtnAndMenu,
			orgTreeProps,
			formTarget,
			refreshData,
			formItemRender,
			selectedSubCompany
		} = store;
		const {
			btns,
			menus
		} = topBtnAndMenu();
		const {
			validDateForm: form,
			validDateFormFields: fields
		} = formTarget;
		let title = i18n.module.paidLevelSetting();
		if (selectedSubCompany != null)
			title += ` - ${selectedSubCompany.name}`;
		return (
			<div className="hrm_module_container paidLevelValidDateSetting">
				{
					containerInitFinished.init && containerInitFinished.authorized &&
					<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@1bb879`}
						title={title}
						icon={<i className='icon-coms-hrm'/>}
						iconBgcolor='#217346'
						showDropIcon={true}
						buttons={btns}
						dropMenuDatas={menus}
					>
						<WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@ijzjp0`} leftCom={<OrganizationTree ecId={`${this && this.props && this.props.ecId || ''}_OrganizationTree@xlw9tg`} {...orgTreeProps} ref='orgTree'/>}>
							<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@c3lh64`} datas={menus}>
								{
									form != null &&
									<div className='settingForm'><FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@hhp8el`} form={form} formFields={fields} itemRender={formItemRender}/></div>
								}
							</WeaRightMenu>
						</WeaLeftRightLayout>
					</WeaTop>
				}
				{
					containerInitFinished.init && !containerInitFinished.authorized && 
	              	<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@fj58rs`}>
	                  	<div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
	              	</WeaAlertPage>
				}
			</div>
		)
	}
}