import '../../style/appDetach.less';
import React, {
	Component
} from 'react';
import {
	WeaTop,
	WeaAlertPage
} from 'ecCom';
import {
	inject,
	observer
} from 'mobx-react';
import Tabs from '../../coms/Tabs';
import GlobalSetting from './GlobalSetting';
import DetachList from './DetachList';
import {
	i18n
} from '../../public/i18n';
import {
	indexOf,
	has
} from 'lodash';

@inject("hrmAppDetach")

@observer
export default class AppDetach extends Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {
		this.init();
	}

	componentWillReceiveProps(nextProps) {
		if (this.props.location.key !== nextProps.location.key) {
			this.init();
		}
	}

	init = () => {
		const {
			hrmAppDetach: store,
		} = this.props;
		const {
			checkAuthorized,
			initData
		} = store;
		checkAuthorized('appdetach', null, initData);
	}

	tabChangeHandle = (key) => {
		const {
			hrmAppDetach: store
		} = this.props, {
			tabConfig
		} = store;
		store.setActiveTab(tabConfig, key);
	}

	render() {
		const {
			hrmAppDetach: store
		} = this.props;
		//state
		const {
			containerInitFinished,
			refreshMainTabComponent
		} = store;
		//data
		const {
			tabConfig,
			btnsAndMenus,
			formTarget,
			getTabIndex,
			conditionItemRender
		} = store;
		const {
			btns,
			menus,
			tabBtnDef
		} = btnsAndMenus(tabConfig);
		const {
			conditionForm: form,
			conditionFormFields: fields
		} = formTarget;
		const topProps = {
			title: i18n.module.appDetach(),
			icon: <i className='icon-coms-hrm'/>,
			iconBgcolor: '#217346',
			showDropIcon: true,
			buttons: btns,
			dropMenuDatas: menus
		}
		const tabProps = {
			tabConfig: tabConfig,
			tabChangeHandle: this.tabChangeHandle,
			activeTabInfo: {
				activeTabKey: tabConfig.activeTabKey,
				activeTabIndex: getTabIndex(tabConfig.tabs, tabConfig.activeTabKey)
			},
			rightMenu: menus,
			store: store,
			conditionForm: form,
			conditionFormFields: fields,
			itemRender: conditionItemRender,
			advanceHeight: 130
		}

		return (
			<div className="hrm_module_container appDetach">
				{
					containerInitFinished.init && containerInitFinished.authorized && 
  	              	<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@kdbgl7`} {...topProps}>
  	              		<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@qwjxko`} {...tabProps}>
                      		<GlobalSetting ecId={`${this && this.props && this.props.ecId || ''}_GlobalSetting@p1cygs`}/>
                      		<DetachList ecId={`${this && this.props && this.props.ecId || ''}_DetachList@kx5j85`}/>
	                  	</Tabs>
	              	</WeaTop>
				}
				{
					containerInitFinished.init && !containerInitFinished.authorized && 
	              	<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@ypwjdr`}>
	                  	<div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
	              	</WeaAlertPage>
				}
			</div>
		)
	}
}