import React, {
	Component
} from 'react';
import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaRightMenu,
	WeaDialog,
	WeaAuth,
	WeaTop,
	WeaDialogFooter,
	WeaAlertPage
}
from 'ecCom';
import {
	WeaTableNew
} from 'comsMobx';
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 RoleInfoSingle extends Component {
	constructor(props) {
		super(props);
		this.state ={
			isSingle: false
		}
	}

	componentDidMount() {
		this.init();
	}

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

	init = () => {
		const {
			hrmRoleSetting: store,
			location
		} = this.props
		const {id, isSingle, tab} = location.query;
		this.setState({
			isSingle: (isSingle === '1' ? true : false),
			tab: tab || '1'
		})
		const {
			checkAuthorized,
			initRoleInfoData
		} = store;
		checkAuthorized('role', null, () => initRoleInfoData({roleId: id}, this.state.tab));
	}

	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
		const {
			containerInitFinished,
			authListTable,
			detachListTable,
			memberListTable,
			roleEditTabConfig,
			getTabIndex,
			formTarget,
			btnsAndMenus,
			refreshTab,
			formItemRender,
			editDialogParams,
			editorDialogRightMenu,
			refreshAddAuthDialog,
			memberAuthParams,
			getRoleInfoTopButtons
		} = store;
		const topBtn = getRoleInfoTopButtons();
		const {
			btns,
			menus,
			tabBtnDef
		} = btnsAndMenus(roleEditTabConfig);
		const {
			dialogConditionForm: form,
			dialogConditionFormFields: fields,
			roleInfoForm,
			roleInfoFormFields,
			authInfoForm,
			authInfoFormFields,
			detachInfoForm,
			detachInfoFormFields,
			memberInfoForm,
			memberInfoFormFields
		} = formTarget;
		const tabProps = {
			tabConfig: roleEditTabConfig,
			tabChangeHandle: this.tabChangeHandle,
			activeTabInfo: {
				activeTabKey: roleEditTabConfig.activeTabKey,
				activeTabIndex: getTabIndex(roleEditTabConfig.tabs, roleEditTabConfig.activeTabKey)
			},
			rightMenu: [],
			store: store,
			conditionForm: form,
			conditionFormFields: fields,
			tabBtnDef: tabBtnDef
		}
		const classes = classnames({
			['tabPane']: true,
			['tabPane-dialog']: this.state.isSingle ? true : false
		});

		const tableProps = {
			scroll: {
				y: this.state.isSingle ? 470 : 0
			}
		}
		let tabChildren = [
			<FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@fz8c0i`} 
            	className={classes} 
            	form={roleInfoForm}
            	formFields={roleInfoFormFields}
            	itemRender={formItemRender}
            	menu={editorDialogRightMenu}/>,
			<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@mxf9dm`}
                comsWeaTableStore={authListTable}
                hasOrder={true}
                needScroll={true}
                uniqueId={true}
                {...tableProps}
                getColumns={cols => this.renderCol(cols, 'auth')}
                onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate, 'auth')}
            />
		];

		if(!containerInitFinished.detachable && this.state.tab == '3')
			return <div></div>

		containerInitFinished.detachable && tabChildren.push(<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@4p39r6`}
			comsWeaTableStore={detachListTable}
			hasOrder={true}
			needScroll={true}
			uniqueId={true}
			{...tableProps}
			getColumns={cols => this.renderCol(cols, 'detach')}
			onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate, 'detach')}
		/>);
		tabChildren.push(<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@liglvf`}
			comsWeaTableStore={memberListTable}
			hasOrder={true}
			needScroll={true}
			uniqueId={true}
			{...tableProps}
			getColumns={cols => this.renderCol(cols, 'member')}
			onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate, 'member')}
		/>)
		let title = '';
		if(roleInfoForm != null && roleInfoForm.isFormInit){
			title = roleInfoForm.getFormParams().idname;
		}

		const getComp = () => {
			if(this.state.isSingle){
				return (
					<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@iwtmfe`} {...tabProps}>
						{tabChildren}
					</Tabs>
				)
			}
			return (
				<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@k7y2df`}
					title={title}
					icon={<i className='icon-coms-hrm'/>}
					iconBgcolor='#217346'
					buttons={topBtn}
					showDropIcon={true}
					dropMenuDatas={editorDialogRightMenu}
				>
					<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@sr2ly6`} {...tabProps}>
						{tabChildren}
					</Tabs>
				</WeaTop>
			)
		}

		return (
			<div>
				{
					containerInitFinished.init && containerInitFinished.authorized && 
					getComp()
				}
				{
					this.state.isSingle && containerInitFinished.init && containerInitFinished.authorized && 
					<WeaDialogFooter ecId={`${this && this.props && this.props.ecId || ''}_WeaDialogFooter@c1ve7x`} 
						buttons={topBtn}
                    	moreBtn={{datas: editorDialogRightMenu}}
					/>
				}
	        	{
	        		editDialogParams.visible 
	        		&&
	        		<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@v5frov`} {...editDialogParams}>
		        	{
		        		roleEditTabConfig.activeTabKey === '2' && 
		        		<div className='addAuth'><FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@o399q0`} form={authInfoForm} formFields={authInfoFormFields} itemRender={formItemRender}/></div>
		        	}
		        	{
		        		roleEditTabConfig.activeTabKey === '3' && 
		        		<FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@bvxhqt`} form={detachInfoForm} formFields={detachInfoFormFields} />
		        	}
		        	{
		        		roleEditTabConfig.activeTabKey === '4' && 
		        		<FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@a1yznc`} form={memberInfoForm} formFields={memberInfoFormFields} />
		        	}
		        	</WeaDialog>
	        	}
	        	{
	        		memberAuthParams.visible && <WeaAuth ecId={`${this && this.props && this.props.ecId || ''}_WeaAuth@p9hrra`} {...memberAuthParams} />
                }
                {
					containerInitFinished.init && !containerInitFinished.authorized && 
	              	<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@ec779a`}>
	                  	<div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
	              	</WeaAlertPage>
				}
        	</div>
		)
	}
}