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

@inject('hrmAuthorizationSetting')
@observer
export default class RoleInfoSingle extends Component {
	constructor(props) {
		super(props);
		this.state ={
			isSingle: false, 
			height: 650
		}
	}

	componentDidMount() {
		this.init();
	}

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

	init = () => {
		const {
			hrmAuthorizationSetting: store,
			location
		} = this.props
		const {id, isSingle, tab, height} = location.query;
		this.setState({
			isSingle: (isSingle === '1' ? true : false),
			height: height || 650
		})
		const {
			checkAuthorized,
			initRefsData
		} = store;
		checkAuthorized('systemrightgroup', null, () => initRefsData(id), null, true);
	}

	renderCol = (cols, tableName) => {
		let idx = findIndex(cols, item => item.dataIndex === 'rolesmark');
		idx != -1 && (cols[idx].render = (text, record) => {
			return <a onClick={() => this.doEditRole(record)}>{record.rolesmark}</a>
		});
		idx = findIndex(cols, item => item.dataIndex === 'cnt');
		idx != -1 && (cols[idx].render = (text, record) => {
			return <a onClick={() => this.doEditRoleMember(record)}>{i18n.label.view()}</a>
		})
		
	}

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

	doEditRole = (record, tab) => {
		const {
			hrmAuthorizationSetting: store
		} = this.props;
		const {
			showRoleInfo
		} = store;
		showRoleInfo(record.roleid, tab || '1');
	}

	doEditRoleMember = (record) => {
		this.doEditRole(record, '4');
	}

	doEditRoleRightLevel = (record) => {
		const {
			hrmAuthorizationSetting: store
		} = this.props;
		const {
			modifyRefs
		} = store;
		modifyRefs(record);
	}

	doDel = (record) => {
		const {
			hrmAuthorizationSetting: store
		} = this.props;
		const {
			deleteRefs
		} = store;
		deleteRefs({id: record.id});
	}

	render() {
		const {
			hrmAuthorizationSetting: store,
			params
		} = this.props
		const {
			containerInitFinished,
			refsTabConfig,
			refsTable,
			formTarget,
			btnsAndMenus,
			refreshTab,
			refsDialogParams,
			getDialogOpButtons,
			editorDialogRightMenu,
			roleInfoDialogParams
		} = store;
		const {
			btns,
			menus,
			tabBtnDef
		} = btnsAndMenus(refsTabConfig);
		const {
			refsConditionForm: form,
			refsConditionFormFields: fields,
		} = formTarget;
		const tabProps = {
			tabConfig: refsTabConfig,
			activeTabInfo: {
				activeTabKey: '1',
				activeTabIndex: 0
			},
			rightMenu: [],
			store: store,
			conditionForm: form,
			conditionFormFields: fields,
			tabBtnDef: tabBtnDef
		}
		const classes = classnames({
			['tabPane']: true,
			['tabPane-dialog']: this.state.isSingle ? true : false
		});

		const dProps = {
			...refsDialogParams,
			buttons: getDialogOpButtons(),
			moreBtn: {
				datas: editorDialogRightMenu
			}
		}

		const tableProps = {
			scroll: {
				y: this.state.isSingle ? (this.state.height - 190) : 0
			}
		}
		let title = '';

		const getComp = () => {
			if(this.state.isSingle){
				return (
					<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@509dry`} {...tabProps}>
						<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@j0he97`}
							comsWeaTableStore={refsTable}
							hasOrder={true}
							needScroll={true}
							uniqueId={true}
							{...tableProps}
							getColumns={cols => this.renderCol(cols, 'member')}
							onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate, 'member')}
						/>
					</Tabs>
				)
			}
			return (
				<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@72mpx3`}
					title={title}
					icon={<i className='icon-coms-hrm'/>}
					iconBgcolor='#217346'
					showDropIcon={true}
					dropMenuDatas={[]}
				>
					<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@kw4q1d`} {...tabProps}>
						<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@0ljkm9`}
							comsWeaTableStore={refsTable}
							hasOrder={true}
							needScroll={true}
							uniqueId={true}
							{...tableProps}
							getColumns={cols => this.renderCol(cols, 'member')}
							onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate, 'member')}
						/>
					</Tabs>
				</WeaTop>
			)
		}

		return (
			<div className="hrm_module_container">
				{
					containerInitFinished.init && containerInitFinished.authorized && 
					getComp()
				}
				{
					this.state.isSingle && containerInitFinished.init && containerInitFinished.authorized && 
					<WeaDialogFooter ecId={`${this && this.props && this.props.ecId || ''}_WeaDialogFooter@lgr7kd`} 
						buttons={[]}
                    	moreBtn={{datas: []}}
					/>
				}
				<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@gk1a0v`} {...dProps}>
					{dProps.coms}
				</WeaDialog>
				<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@r276nf`} {...roleInfoDialogParams} />
                {
					containerInitFinished.init && !containerInitFinished.authorized && 
	              	<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@fng0ko`}>
	                  	<div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
	              	</WeaAlertPage>
				}
        	</div>
		)
	}
}