import '../../style/groupSetting.less';
import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { WeaTop, WeaAlertPage, WeaLeftRightLayout, WeaTab, WeaLocaleProvider } from 'ecCom';
import { i18n } from '../../public/i18n';
import { Spin } from 'antd'
import Content from './Content';
import GroupSearch from './GroupSearch';
// import {Tabs, OrganizationTree} from 'weaHrmComsPublic';
import { Tabs, OrganizationTree } from '../../../hrmComsPublic/index';
import IllustrateDialog from './illustrateDialog'
import Edit from './Edit';
const getLabel = WeaLocaleProvider.getLabel;


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

	render () {
		// const {Tabs, OrganizationTree} = window.weaHrmComsPublic;
		const {
			hrmGroupSetting: store
		} = this.props;
		const {
			containerInitFinished,
			selectedSubCompany,
			orgTreeProps,
			getTopProps,
			mainTabConfig,
			formTarget,
			tableMultiDelete,
			tabChangeHandle,
			mainActiveTabKey,
			getRowKey,
			loading,
			canAdd,
			canCreate,
			canDel
		} = store;
		let title = getLabel('500388', '考勤组管理');
		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: store.getTabIndex(mainTabConfig.tabs, mainTabConfig.activeTabKey)
			},
			rightMenu: menus,
			store: store,
			conditionForm: form,
			conditionFormFields: fields,
			tabChangeHandle: tabChangeHandle
		}

		return (
			<div className="hrm_module_container groupSetting">
				{
					containerInitFinished.init && containerInitFinished.authorized &&
					<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@bofvhr`} spinning={loading}>
						<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@n7yial`} {...topProps}>
							{
								containerInitFinished.detachable
									?
									<WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@7ew6a0`}
										leftCom={<OrganizationTree ecId={`${this && this.props && this.props.ecId || ''}_OrganizationTree@ag0fzz`} {...orgTreeProps} ref='orgTree' />}
										leftWidth={310}
									>

										<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@yq1dit`} {...tabProps}>
											<Content ecId={`${this && this.props && this.props.ecId || ''}_Content@61tib7`} store={store} />
											<GroupSearch ecId={`${this && this.props && this.props.ecId || ''}_GroupSearch@zydq26`} store={store} />
										</Tabs>
									</WeaLeftRightLayout>
									:
									<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@o4zix6`} {...tabProps}>
										<Content ecId={`${this && this.props && this.props.ecId || ''}_Content@b3iymc`} store={store} />
										<GroupSearch ecId={`${this && this.props && this.props.ecId || ''}_GroupSearch@0gnkq3`} store={store} />
									</Tabs>
							}
							<Edit ecId={`${this && this.props && this.props.ecId || ''}_Edit@d67ad8`} store={store} />
							<IllustrateDialog ecId={`${this && this.props && this.props.ecId || ''}_IllustrateDialog@xcu8fb`} />
						</WeaTop>
					</Spin>
				}
				{
					containerInitFinished.init && !containerInitFinished.authorized &&
					<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@zob4mz`}>
						<div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
					</WeaAlertPage>
				}
			</div>
		)
	}
}