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;
import { renderNoright } from '../../util';


@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';
		} else if (moduleType === 'department') {
			moduleName = 'departmentfielddefined';
		} else if(moduleType === 'job') {
			moduleName = 'jobfielddefined';
		}else {
			moduleName = 'resourcefielddefined';
		}
		// let callbackFunc = () => initData(false, true, moduleName);
		// if (moduleType === 'resource')
		//let callbackFunc = () => initResourceData(moduleName);
		//checkAuthorized(moduleName, null, callbackFunc);
		initResourceData(moduleName);
		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,
			hasRight
		} = 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() : moduleType === 'job' ? i18n.module.jobFieldDef() : i18n.module.resourceFieldDef(),
			topProps = {
				title,
				icon: <i className='icon-coms-hrm' />,
				iconBgcolor: '#217346',
				showDropIcon: true,
				buttons: btns,
				dropMenuDatas: menus
			};
		let logType;
		let children = [];
		
		if (hasRight === false) {
			return renderNoright();
	   }
		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>
			)
		]

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