import React, {
	Component
} from 'react';
import ReactDOM from 'react-dom'
import {
	observer
} from 'mobx-react';
import {
	WeaRightMenu,
	WeaDialog,
	WeaTextarea,
	WeaNewScroll
} from 'ecCom';
import {
	WeaTableNew
} from 'comsMobx';
import RoleEdit from './RoleEdit';
import RoleEditDialog from './RoleEditDialog';
import FormInfo from '../../coms/FormInfo';
import Tabs from '../../coms/Tabs';
import classnames from 'classnames';
import {
	findIndex
} from 'lodash';

const {
	WeaTable
} = WeaTableNew;

@observer
export default class RoleList extends Component {
	constructor(props) {
		super(props);
	}

	openDialog = (id, key = '1', record) => {
		const {
			store
		} = this.props;
		const {
			showRoleEditDialog
		} = store;
		showRoleEditDialog({
			roleId: id,
			targetName: record.rolesmark
		}, key, record);
	}

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

	saveAs = (id) => {
		const {
			store
		} = this.props;
		const {
			saveAsRole
		} = store;
		saveAsRole({
			roleId: id
		});
	}

	onOperatesClick = (record, index, operate) => {
		const {
			store
		} = this.props;
		const func = operate.href ? operate.href.split(':')[1].split('(')[0] : '';
		const id = record.id ? record.id : '';
		func === 'openDialog' && this[func] && this[func](id, '1', record); //编辑
		func === 'saveAs' && this[func] && this[func](id);
		func === 'doDel' && this[func] && this[func](id); //删除
		func === 'showLog' && store.showLog({logSmallType: store.logTypeDef.HRM_ENGINE_ROLESET, targetId: id}); //日志
		func === 'toAuthList' && this['openDialog'] && this['openDialog'](id, '2', record); //功能权限
		func === 'toCompanyList' && this['openDialog'] && this['openDialog'](id, '3', record); //机构权限
		func === 'toMemList' && this['openDialog'] && this['openDialog'](id, '4', record); //成员列表
	}

	renderCol = (cols) => {
		const colKey1 = 'id',
			colKey2 = 'rolesmark',
			colKey3 = 'result',
			colKey4 = 'result1';
		//TODO 成员数量
		let idx = findIndex(cols, item => item.dataIndex === colKey1);
		idx != -1 && (cols[idx].render = (text, record) => {
			return <div>{record.id}</div>
		})
		idx = findIndex(cols, item => item.dataIndex === colKey2);
		idx != -1 && (cols[idx].render = (text, record) => {
			return <a onClick={() => this.openDialog(record.id, '1', record)}>{record.rolesmark}</a>
		})
		idx = findIndex(cols, item => item.dataIndex === colKey3);
		idx != -1 && (cols[idx].render = (text, record) => {
			return <a onClick={() => this.openDialog(record.id, '2', record)}>{record.result}</a>
		})
		idx = findIndex(cols, item => item.dataIndex === colKey4);
		idx != -1 && (cols[idx].render = (text, record) => {
			return <a onClick={() => this.openDialog(record.id, '4', record)}>{record[`${colKey4}span`] }</a>
		})
	}

	render() {
		const {
			store,
			rightMenu
		} = this.props;
		const {
			roleListTable: table,
			getDialogOpButtons,
			setDialogVisible,
			formTarget,
			showError,
			clearData,
			formItemRender,
			editorDialogRightMenu,
		} = store;
		const classes = classnames({
			['tabPane-include']: true
		});
		const roleAddDialogProps = {
			icon: "icon-coms-hrm",
			iconBgcolor: "#217346",
			style: {
				width: 520,
				height: store.dialogParams.add.height
			},
			title: store.dialogParams.add.title,
			visible: store.dialogParams.add.visible,
			buttons: getDialogOpButtons(),
			onCancel: () => setDialogVisible('add', false, '', clearData),
			moreBtn: {datas: editorDialogRightMenu}
		}
		const roleSaveAsDialogProps = {
			icon: "icon-coms-hrm",
			iconBgcolor: "#217346",
			style: {
				width: 520,
				height: 70
			},
			title: store.dialogParams.saveAs.title,
			visible: store.dialogParams.saveAs.visible,
			buttons: getDialogOpButtons(),
			onCancel: () => setDialogVisible('saveAs', false, '', clearData),
			moreBtn: {datas: editorDialogRightMenu}
		}
		const {
			roleInfoForm,
			roleInfoFormFields,
			saveAsForm,
			saveAsFormFields
		} = formTarget;

		return (
			<div className={classes}>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@st3nid`} datas={rightMenu}>
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@5dm5i8`}
                        comsWeaTableStore={table}
                        hasOrder={true}
                        needScroll={true}
                        onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate)}
                        getColumns={cols => this.renderCol(cols)}
                    />
                </WeaRightMenu>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@16d2p8`} {...roleAddDialogProps}>
                	<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@teknch`} height={'100%'}>
	                	<FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@f6a6uu`} 
							center={false}
		                	form={roleInfoForm}
		                	formFields={roleInfoFormFields}
	            			itemRender={formItemRender}
		                	menu={editorDialogRightMenu}/>
		            </WeaNewScroll>
                </WeaDialog>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@cz500d`} {...roleSaveAsDialogProps}>
                	<FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@r8sq1v`} 
						center={false}
	                	form={saveAsForm}
	                	formFields={saveAsFormFields}
	                	menu={editorDialogRightMenu}/>
                </WeaDialog>
            </div>
		)
	}
}