import React, {
	Component
} from 'react';
import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaTop
}
from 'ecCom';
import {
	WeaTableNew
} from 'comsMobx';
import {
	WeaAlertPage,
	WeaRightMenu,
	WeaDialog,
	WeaAuth
} from 'ecCom';
import classnames from 'classnames';
import Tabs from '../../coms/Tabs';
import FormInfo from '../../coms/FormInfo';
import {
	findIndex
} from 'lodash';
import {
	i18n
} from '../../public/i18n';
const {
	WeaTable
} = WeaTableNew;

@inject('hrmRoleSetting')
@observer
export default class RoleInfo extends Component {
	constructor(props) {
		super(props);
		this.Base64 = ecCom.WeaTools.Base64
	}

	componentDidMount() {
		this.init();
	}

	componentWillReceiveProps(nextProps) {
		this.init();
	}

	getInfo = () => {
		const {
			hrmRoleSetting: store,
			params,
			location
		} = this.props, {
			type
		} = params, {
			id
		} = location.query;
		const {
			getInfo,
			checkAuthorized
		} = store;
		switch (type) {
			case 'info':
				getInfo('1', {
					roleId: id
				});
				break;
			case 'auth':
				getInfo('2', {
					roleId: id
				});
				break;
			case 'detach':
				getInfo('3', {
					roleId: id
				});
				break;
			case 'member':
				getInfo('4', {
					roleId: id
				});
				break;
		}
	}

	init = () => {
		const {
			hrmRoleSetting: store,
		} = this.props, {
			checkAuthorized
		} = store;
		checkAuthorized('role', null, this.getInfo);
	}

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

	doAction = (op, record) => {
		const {
			hrmRoleSetting: store
		} = this.props;
		const {
			doAction
		} = store;
		doAction(op, record);
	}

	renderCol = (cols, tableName) => {
		let col = {
			fields: []
		}
		switch (tableName) {
			case 'auth':
				col.fields.push({
					def: 'rightid',
					label: 'rightidspan'
				});
				break;
			case 'detach':
				col.fields.push({
					def: 'subcompanyname',
					label: 'subcompanynamespan'
				});
				break;
			case 'member':
				col.fields.push({
					def: 'resourcetype',
					label: 'resourcetypespan'
				});
				break;
		}
		col.fields.map(field => {
			const idx = findIndex(cols, item => item.dataIndex === field.def);
			idx != -1 && (cols[idx].render = (text, record) => {
				return <a onClick={() => this.doAction('modify', record)}>{record[field.label]}</a>
			})
		})
	}

	onOperatesClick = (record, index, operate, tableName) => {
		const func = operate.href ? operate.href.split(':')[1].split('(')[0] : '';
		func === 'doEdit' && this.doAction('modify', record);
		func === 'doDel' && this.doAction('remove', record);
	}

	render() {
		const {
			hrmRoleSetting: store,
			params
		} = this.props, {
			id,
			type
		} = params;
		const {
			containerInitFinished,
			authListTable,
			detachListTable,
			memberListTable,
			roleEditTabConfig,
			getTabIndex,
			formTarget,
			btnsAndMenus,
			refreshTab,
			formItemRender,
			editDialogParams,
			editorDialogRightMenu,
			refreshAddAuthDialog,
			memberAuthParams,
			getTabDef,
			getRoleInfoTopButtons,
			getTabBtnDef
		} = store;
		const topBtn = getRoleInfoTopButtons();
		const tabComDef = getTabDef();
		const {
			dialogConditionForm: form,
			dialogConditionFormFields: fields,
			roleInfoForm,
			roleInfoFormFields,
			authInfoForm,
			authInfoFormFields,
			detachInfoForm,
			detachInfoFormFields,
			memberInfoForm,
			memberInfoFormFields
		} = formTarget;
		const tabProps = {
			tabConfig: getTabDef(),
			activeTabInfo: {
				activeTabKey: '1',
				activeTabIndex: 0
			},
			rightMenu: [],
			store: store,
			conditionForm: form,
			conditionFormFields: fields,
			tabBtnDef: getTabBtnDef()
		}
		const classes = classnames({
			['tabPane']: true,
			['tabPane-dialog']: true
		});

		const tableProps = {
			scroll: {
				y: 510
			}
		}
		let children = [];

		let title = ''; //name;
		switch (type) {
			case 'info':
				title += `${i18n.label.roleInfo()}`;
				children = [
					(
						<FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@43n6rv`} 
		            	className={classes} 
		            	form={roleInfoForm}
		            	formFields={roleInfoFormFields}
		            	itemRender={formItemRender}
		            	menu={editorDialogRightMenu}/>
					)
				]
				break;
			case 'auth':
				title += `${i18n.label.authInfo()}`;
				children = [
					(
						<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@ntx7ev`} {...tabProps}>
						<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@0kf96w`}
			                comsWeaTableStore={authListTable}
			                hasOrder={true}
			                needScroll={true}
			                uniqueId={true}
			                getColumns={cols => this.renderCol(cols, 'auth')}
			                onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate, 'auth')}
			            />
			            </Tabs>
					)
				]
				break;
			case 'detach':
				title += `${i18n.label.detachInfo()}`;
				children = [
					(

						<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@p0ud7l`} {...tabProps}>
						<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@kuc00c`}
	                    comsWeaTableStore={detachListTable}
	                    hasOrder={true}
	                    needScroll={true}
                        uniqueId={true}
                        getColumns={cols => this.renderCol(cols, 'detach')}
                        onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate, 'detach')}
	                	/>
			            </Tabs>
					)
				]
				break;
			case 'member':
				title += `${i18n.label.memberInfo()}`;
				children = [
					(

						<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@pz6r42`} {...tabProps}>
						<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@74mx5n`}
	                    comsWeaTableStore={memberListTable}
	                    hasOrder={true}
	                    needScroll={true}
                        uniqueId={true}
                        getColumns={cols => this.renderCol(cols, 'member')}
                        onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate, 'member')}
	                	/>
			            </Tabs>
					)
				]
				break;
		}

		return (
			<div style={{height:'100%'}}>
				{
					containerInitFinished.init && containerInitFinished.authorized && 
					<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@e6slmn`}
						title={title}
						icon={<i className='icon-coms-hrm'/>}
						iconBgcolor='#217346'
						buttons={topBtn}
						dropMenuDatas={editorDialogRightMenu}
					>
					{children}
					</WeaTop>
				}
	        	{
	        		editDialogParams.visible 
	        		&&
	        		<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@sd14lf`} {...editDialogParams}>
		        	{
		        		type === 'auth' && 
		        		<div className='addAuth'><FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@qiluzn`} form={authInfoForm} formFields={authInfoFormFields} itemRender={formItemRender}/></div>
		        	}
		        	{
		        		type === 'detach' && 
		        		<FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@4uy16v`} form={detachInfoForm} formFields={detachInfoFormFields} />
		        	}
		        	{
		        		type === 'member' && 
		        		<FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@hxwgib`} form={memberInfoForm} formFields={memberInfoFormFields} />
		        	}
		        	</WeaDialog>
	        	}
	        	{
	        		memberAuthParams.visible && <WeaAuth ecId={`${this && this.props && this.props.ecId || ''}_WeaAuth@zjral2`} {...memberAuthParams} />
                }
                {
					containerInitFinished.init && !containerInitFinished.authorized && 
					<div className="hrm-wea-alert-page">
		              	<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@isdjom`}>
		                  	<div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
		              	</WeaAlertPage>
					</div>
				}
        	</div>
		)
	}
}