import '../../style/groupSetting.less';
import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { WeaTop, WeaAlertPage, WeaLeftRightLayout, WeaLocaleProvider } from 'ecCom';
import { i18n } from '../../public/i18n';
import Content from './Content';
const getLabel = WeaLocaleProvider.getLabel;
import { Tabs, OrganizationTree } from '../../../hrmComsPublic/index';
import Import from '../importScheduleCodeComponet/index';

@inject('importScheduleCode')
@inject('scheduleCodeStore')
@observer
export default class ScheduleCode 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 {
			scheduleCodeStore: store
		} = this.props;
		store.checkAuthorized('kq/schedulecode', null, store.init, null, true);
	}

	render () {
		// const {Tabs, OrganizationTree} = window.weaHrmComsPublic;
		const {
			scheduleCodeStore: store,
			importScheduleCode
		} = this.props;
		const {
			importDialog
		} = importScheduleCode;
		const {
			containerInitFinished,
			selectedSubCompany,
			orgTreeProps,
			getTopProps,
			showAllLevel,
			isOneDevice,
			mainTabConfig,
			formTarget,
			tableMultiDelete,
			canAdd
		} = store;
		let title = getLabel(511334, '考勤编号维护');
		if (selectedSubCompany != null && selectedSubCompany.name)
			title = `${title} - ${selectedSubCompany.name}`;
		const { buttons, menus } = getTopProps();
		const { conditionForm: form, conditionFormFields: fields } = formTarget;
		const topProps = {
			title,
			icon: <i className='icon-coms-hrm' />,
			iconBgcolor: '#217346',
			showDropIcon: true,
			buttons: buttons,
			dropMenuDatas: menus
		}
		const tabProps = {
			tabConfig: mainTabConfig,
			activeTabInfo: {
				activeTabKey: mainTabConfig.activeTabKey,
				activeTabIndex: 0
			},
			rightMenu: menus,
			store: store,
			conditionForm: form,
			conditionFormFields: fields,
		}

		return (
			<div className="hrm_module_container scheduleCode">
				{
					containerInitFinished.init && containerInitFinished.authorized &&
					<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@8gk21v`} {...topProps}>
						{
							containerInitFinished.detachable || true
								?
								<WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@pgxm9t`} resize={true} leftWidth={320} leftCom={<OrganizationTree ecId={`${this && this.props && this.props.ecId || ''}_OrganizationTree@2n7jhp`} {...orgTreeProps} ref='orgTree' />}>
									<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@2ylcjs`} {...tabProps}>
										<Content ecId={`${this && this.props && this.props.ecId || ''}_Content@iahs1k`} store={store} />
									</Tabs>
								</WeaLeftRightLayout>
								:
								<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@angcvm`} {...tabProps}>
									<Content ecId={`${this && this.props && this.props.ecId || ''}_Content@vrp2ek`} store={store} />
								</Tabs>
						}
						{importDialog.visible && <Import ecId={`${this && this.props && this.props.ecId || ''}_Import@o9xov1`} />}
					</WeaTop>
				}
				{
					containerInitFinished.init && !containerInitFinished.authorized &&
					<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@kp7qob`}>
						<div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
					</WeaAlertPage>
				}
			</div>
		)
	}
}