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

@inject('hrmPaidLeaveSetting')
@inject('hrmImportResource')

@observer
export default class PaidLeaveSetting 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 {
			hrmPaidLeaveSetting: store,
			hrmImportResource
		} = this.props;
		const {
			checkAuthorized,
			initData,
			setImportStore
		} = store;
		setImportStore(hrmImportResource);
		checkAuthorized('plsmanager', {
			type: 'PLSLeave'
		}, initData);
	}

	render() {
		const {
			hrmPaidLeaveSetting: store
		} = this.props;
		const {
			containerInitFinished,
			topBtnAndMenu,
			tabConfig,
			getTabIndex,
			orgTreeProps,
			setActiveTab,
			refreshTab,
			selectedSubCompany,
			spinning,
			refreshTopBtn
		} = store;
		const {
			btns,
			menus
		} = topBtnAndMenu();
		let title = i18n.module.paidLeaveSetting();
		if (selectedSubCompany != null && selectedSubCompany.name)
			title = `${title} - ${selectedSubCompany.name}`;
		const topProps = {
			title,
			icon: <i className='icon-coms-hrm'/>,
			iconBgcolor: '#217346',
			showDropIcon: true,
			buttons: btns,
			dropMenuDatas: menus
		}
		const tabProps = {
			tabConfig,
			tabChangeHandle: (key) => setActiveTab(key),
			activeTabInfo: {
				activeTabKey: tabConfig.activeTabKey,
				activeTabIndex: getTabIndex(tabConfig.tabs, tabConfig.activeTabKey)
			},
			rightMenu: menus,
			store
		}
		return (
			<div className="hrm_module_container paidLeaveSetting">
			{
				containerInitFinished.init && containerInitFinished.authorized &&
				<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@iuwl2s`} spinning={spinning}>
					<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@qlyzvu`} {...topProps}>
			<WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@1onv3z`} leftCom={<OrganizationTree ecId={`${this && this.props && this.props.ecId || ''}_OrganizationTree@jbvwuh`} {...orgTreeProps} ref='orgTree'/>
		} >
							<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@vd88wd`} {...tabProps}>
								<TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@79fn84`} />
							</Tabs>
						</WeaLeftRightLayout>
					</WeaTop>
				</Spin>
			}
			{
				containerInitFinished.init && !containerInitFinished.authorized && 
              	<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@kqe3pz`}>
                  	<div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
              	</WeaAlertPage>
			}
			</div>
		)
	}
}