import '../../style/index.less';
import React, {
	Component
} from 'react';
import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaTop,
	WeaAlertPage,
	WeaLeftTree,
	WeaLeftRightLayout,
	WeaDropdown
} from 'ecCom';
import {Spin} from 'antd';
import Tabs from './Tabs';
import FieldDef from './FieldDef';
import {
	i18n
} from '../../public/i18n';
const { ButtonSelect } = WeaDropdown;


@inject('fieldDefined')
@observer
export default class FieldDefined extends Component {
    constructor(props) {
		super(props);
		this.state = {
			logSmallType: ''
		}
	}

	componentDidMount() {
		this.init(this.props);
	}

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

	init = (props) => {
		const {
			fieldDefined: store,
			params
		} = props, {
			checkAuthorized,
			initData,
			initResourceData
		} = store, {
			type: moduleType
		} = params
		let moduleName, logSmallType;
		if(moduleType === 'subCompany'){
			moduleName = 'subcompanyfielddefined';
			logSmallType = 'HRM_ENGINE_SUBCOMPANYFIELDDEFINED';
		}else if(moduleType === 'department'){
			moduleName = 'departmentfielddefined';
			logSmallType = 'HRM_ENGINE_DEPARTMENTFIELDDEFINED';
		}else{
			moduleName = 'resourcefielddefined';
			logSmallType = 'HRM_ENGINE_RESOURCEFIELDDEFINED';
		}
		let callbackFunc = () => initData(false, true, moduleName);
		if (moduleType === 'resource')
			callbackFunc = () => initResourceData(moduleName);
		checkAuthorized(moduleName, null, callbackFunc);
		this.setState({logSmallType})
	}

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

	render() {
		const {
			fieldDefined: store,
			params
		} = this.props, {
			containerInitFinished,
			refreshMainTabComponent,
			spinning
		} = store, {
			type: moduleType
		} = params, {
			tabConfig,
			btnsAndMenus,
			formTarget,
			activeTabInfo,
			treeConfig,
			refreshTree,
			selectedTreeNodeInfo,
			dropdownProps,
			feildDefRemoveable
		} = store, {
			btns,
			menus,
			tabBtnDef
		} = btnsAndMenus(tabConfig), {
			conditionForm: form,
			conditionFormFields: fields,
		} = formTarget, tabProps = {
			tabConfig: tabConfig,
			tabChangeHandle: this.tabChangeHandle,
			activeTabInfo,
			rightMenu: menus,
			store: store,
			conditionForm: form,
			conditionFormFields: fields,
			tabBtnDef: [
				...tabBtnDef, 
				<ButtonSelect ecId={`${this && this.props && this.props.ecId || ''}_ButtonSelect@qbn2pl`}
					{...dropdownProps()}
					btnProps={{
						style: { padding: 0, background: 'transparent', border: 'none', color: feildDefRemoveable ? '#dadada': '#34A2FF', fontSize: 20, marginTop: 2},
						disabled: feildDefRemoveable,
					}}
				/>
			]
		}, title = moduleType === 'subCompany' ? i18n.module.subCompanyFieldDef() : moduleType === 'department' ? i18n.module.departmentFieldDef() : i18n.module.resourceFieldDef(),
		topProps = {
			title,
			icon: <i className='icon-coms-hrm'/>,
			iconBgcolor: '#217346',
			showDropIcon: true,
			buttons: btns,
			dropMenuDatas: menus
		};
		let logType;
		if(selectedTreeNodeInfo){
			if(selectedTreeNodeInfo.viewAttr == 1){
				logType = 'HRM_ENGINE_RESOURCEFIELDDEFINED';
			}else{
				logType = 'HRM_ENGINE_RESOURCEFIELDDEFINED_DETAIL';
			}
		}
		let children = [];
		if (containerInitFinished.init && containerInitFinished.authorized) {
			switch (moduleType) {
				case 'resource':
					const {
						data,
						onSelectedTreeNode,
						selectedKeys,
						onExpand,
						treeExpandKeys
					} = store.toJS(treeConfig);
					const treeCom = (
						<WeaLeftTree ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftTree@ifgbi1`} 
							datas={data} 
							onSelect={onSelectedTreeNode} 
							selectedKeys={selectedKeys} 
							onExpand={onExpand} 
							expandedKeys={treeExpandKeys}/>
					)
					children = [
						(
							<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@hwytf7`} spinning={spinning}>
								<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@rdv0wt`} {...topProps}>
									<WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@q6b87k`} leftCom={treeCom}>
										{
											<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@4k4wsi`} {...tabProps}>
												<FieldDef ecId={`${this && this.props && this.props.ecId || ''}_FieldDef@pliw94`} logSmallType={logType || this.state.logSmallType} targetId={activeTabInfo.tabInfo ? activeTabInfo.tabInfo.groupid : ''} resetClass={true}/>
											</Tabs>
										}
									</WeaLeftRightLayout>
								</WeaTop>
							</Spin>
						)
					]
					break;
				default:
					children = [
						(
							<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@qlfpcf`} spinning={spinning}>
								<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@ww9tnu`} {...topProps}>
									<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@fwerjc`} {...tabProps}>
										<FieldDef ecId={`${this && this.props && this.props.ecId || ''}_FieldDef@djaup2`} logSmallType={logType || this.state.logSmallType} targetId={activeTabInfo.tabInfo ? activeTabInfo.tabInfo.groupid : ''}/>
									</Tabs>
								</WeaTop>
							</Spin>
						)
					]
					break;
			}
		} else if (containerInitFinished.init && !containerInitFinished.authorized) {
			children = [
				(
					<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@z0f4dh`}>
	                  	<div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
              		</WeaAlertPage>
				)
			];
		}

		return (
			<div className="hrm_module_container fieldDef">
				{children}
			</div>
		)
	}
}