import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	WeaNewScroll,
	WeaRightMenu,
	WeaDialog
} from 'ecCom';
import {
	Form,
	Button,
	message
} from 'antd';
import {
	WeaTableNew
} from 'comsMobx';
import classnames from 'classnames';
import * as mobx from 'mobx';
import EditorDialog from '../../coms/EditorDialog';
import AuthorizationGroupEditTab from './AuthorizationGroupEditTab';
import {findIndex} from 'lodash';

const {
	WeaTable
} = WeaTableNew;
const toJS = mobx.toJS;

@observer
export default class Group extends Component {
	constructor(props){
		super(props);
		this.state = {height: 650}
	}
	doEdit = (id, dataIndex) => {
		const {
			store
		} = this.props;
		const {
			initAuthorizationEditDialog
		} = store;
		initAuthorizationEditDialog({
			id
		}, dataIndex);
	}

	doDel = (id) => {
		const {
			store
		} = this.props, {
			multiRemoveAuthorizationGroup
		} = store;
		multiRemoveAuthorizationGroup({
			id
		});
	}

	onOperatesClick = (record, index, operate) => {
		const func = operate.href ? operate.href.split(':')[1].split('(')[0] : '';
		const id = record.id ? record.id : '';
		func === 'doEdit' && this[func] && this[func](id, 'rightgroupname');
		func === 'doDel' && this[func] && this[func](id);
		func === 'doShowDetail' && this['doEdit'] && this['doEdit'](id, 'result');
	}

	renderCol = (cols) => {
		const colKey1 = 'rightgroupname',
			colKey2 = 'result';
		let idx = findIndex(cols, item => item.dataIndex === colKey1);
		idx != -1 && (cols[idx].render = (text, record) => {
			return <div><a onClick={() => this.doEdit(record.id, colKey1)}>{record.rightgroupnamespan}</a></div>
		})
		idx = findIndex(cols, item => item.dataIndex === colKey2);
		idx != -1 && (cols[idx].render = (text, record) => {
			return <div><a onClick={() => this.doEdit(record.id, colKey2)}>{record.resultspan}</a></div>
		})
	}

	render() {
		const {
			store,
			rightMenu
		} = this.props;
		//state
		const {
			refreshEditGroupTabComponent,
			dialogParams,
			showError
		} = store;
		//data
		const {
			editGroupTabConfig,
			groupTable: table,
			btnsAndMenus,
			formTarget,
			setDialogVisible,
			saveAuthorizationGroup,
			reloadGroupCurrentData,
			getDialogOpButtons,
			editorDialogRightMenu
		} = store;
		const {
			btns,
			menus,
			tabBtnDef
		} = btnsAndMenus(editGroupTabConfig);
		const classes = classnames({
			['tabPane']: true
		});
		const {
			authorizationGroupForm,
			authorizationGroupFormFields
		} = formTarget;

		const {
			addGroupInfo,
			editGroupInfo
		} = dialogParams;
		
		const rMenu = [...rightMenu, ...store.getBasicMenus('HRM_ENGINE_AUTHORIZATION')]
		return (
			<div className={classes}>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@ejioyu`} datas={rMenu}>
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@tq1bfi`}
                        comsWeaTableStore={table}
                        hasOrder={true}
                        needScroll={true}
                        onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate)}
                        getColumns={cols => this.renderCol(cols)}
                    />
                </WeaRightMenu>
                <EditorDialog ecId={`${this && this.props && this.props.ecId || ''}_EditorDialog@lydn5f`} 
                    style={{width: 600, height: 250}}
                    title={addGroupInfo.title}
                    visible={addGroupInfo.visible}
                    formFields={toJS(authorizationGroupFormFields)}
                    form={authorizationGroupForm}
                    onCancel={() => setDialogVisible('addGroupInfo', false)}
                    opButtons={getDialogOpButtons()}
					moreBtn={{datas: editorDialogRightMenu}}
                />
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@ixsa55`} 
                	icon="icon-coms-hrm"
                	iconBgcolor="#217346"
                    style={{width: 820, height: 650}}
                    title={editGroupInfo.title}
                    visible={editGroupInfo.visible}
                    onCancel={() => setDialogVisible('editGroupInfo', false, '', reloadGroupCurrentData)}
                    buttons={getDialogOpButtons()}
					moreBtn={{datas: editorDialogRightMenu}}
					onChangeHeight={height => this.setState({height})}
                >
					<AuthorizationGroupEditTab height={this.state.height} ecId={`${this && this.props && this.props.ecId || ''}_AuthorizationGroupEditTab@zihodw`} store={store} />
                </WeaDialog>
            </div>
		)
	}
}