import React, {
	Component
} from 'react';
import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaTableNew
} from 'comsMobx';
import {
	WeaRightMenu,
	WeaDialog,
	WeaAuth
} from 'ecCom';
import classnames from 'classnames';
import Tabs from '../../coms/Tabs';
import FormInfo from '../../coms/FormInfo';
import {
	findIndex
} from 'lodash';
import {addContentPath} from '../../util/index.js'
const {
	WeaTable
} = WeaTableNew;

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

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

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

	renderCol = (cols, tableName) => {
		let col = {
			fields: [
				//{
				//	def: '',
				//	label: '',
				//	opIdKey: ''
				//}
			]
		}
		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'
				},{
					iddef: 'resourceid',
					label: 'resourceidspan'
				});
				break;
		}
		col.fields.map(field => {
			//类型列
			const idx = findIndex(cols, item => item.dataIndex === field.def);
			//对象列
			const idy = findIndex(cols, item => item.dataIndex === field.iddef);
			idx != -1 && (cols[idx].render = (text, record) => {
				return <a onClick={() => this.doAction('modify', record)}><div dangerouslySetInnerHTML={{ __html: record[field.label] }} /></a>
			})
			idy != -1 && (cols[idy].render = (text, record) => {
				// 人力资源
				if(record.resourcetype == '1'){
					return <a href={`javaScript:openhrm(${record.resourceid});`} onClick={e => window.pointerXY(e)} title={record[field.label]}>{record[field.label]}</a>;
				}
				else if(record.resourcetype == '2'){ // 分部
					return <a href = {addContentPath(`/spa/hrm/engine.html#/hrmengine/organization?showTree=false&isView=1&type=subcompany&id=${record.resourceid}`) } target='_blank'>{record[field.label]}</a>
				}
				else if(record.resourcetype == '3'){ // 部门
					return <a href = { addContentPath(`/spa/hrm/engine.html#/hrmengine/organization?showTree=false&isView=1&type=department&id=${record.resourceid}`)} target='_blank'>{record[field.label]}</a>
				}
				else if(record.resourcetype == '5'){// 岗位
					return <a href = {addContentPath(`/spa/hrm/engine.html#/hrmengine/posts?id=${record.resourceid}`) } target='_blank'>{record[field.label]}</a>
				}
				else {
					return <span>{record[field.label]}</span>
				}
			})
		})
	}

	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 {
			store
		} = this.props;
		const {
			detachable,
			authListTable,
			detachListTable,
			memberListTable,
			roleEditTabConfig,
			getTabIndex,
			formTarget,
			btnsAndMenus,
			refreshTab,
			formItemRender,
			editDialogParams,
			editorDialogRightMenu,
			refreshAddAuthDialog,
			memberAuthParams,
			showError
		} = store;
		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,
			leftStyle:  roleEditTabConfig.activeTabKey == '1' ? '' : {paddingRight:490}
		}
		const classes = classnames({
			['tabPane']: true,
			['tabPane-dialog']: true
		});

		const tableProps = {
			scroll: {
				y: 360
			}
		}
		let tabChildren = [
			<FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@u5njpw`} 
            	className={classes} 
            	form={roleInfoForm}
            	formFields={roleInfoFormFields}
            	itemRender={formItemRender}
            	menu={editorDialogRightMenu}/>,
			<div className={classes}>
				<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@f5zo60`}
					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')}
				/>
			</div>
		];
		detachable && tabChildren.push(
			<div className={classes}>
				<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@76w351`}
					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')}
				/>
			</div>);
		tabChildren.push(
			<div className={classes}>
				<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@vr0pxg`}
					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')}
				/>
			</div>)

		return (
			<div>
				<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@zhiim5`} {...tabProps}>
				{tabChildren}
	        	</Tabs>
	        	{
	        		editDialogParams.visible 
	        		&&
	        		<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@phomc4`} {...editDialogParams} hasScroll={true}>
		        	{
		        		roleEditTabConfig.activeTabKey === '2' && 
		        		<div className='addAuth'><FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@11bbsz`} center={false} form={authInfoForm} formFields={authInfoFormFields} itemRender={formItemRender}/></div>
		        	}
		        	{
		        		roleEditTabConfig.activeTabKey === '3' && 
		        		<FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@wlk93h`} form={detachInfoForm} center={false} formFields={detachInfoFormFields} />
		        	}
		        	{
		        		roleEditTabConfig.activeTabKey === '4' && 
		        		<FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@vb2wc1`} form={memberInfoForm} center={false} formFields={memberInfoFormFields} />
		        	}
		        	</WeaDialog>
	        	}
	        	{
	        		memberAuthParams.visible && <WeaAuth ecId={`${this && this.props && this.props.ecId || ''}_WeaAuth@lhalo8`} {...memberAuthParams} />
                }
        	</div>
		)
	}
}