import React, {
	Component
} from 'react';
import ReactDOM from 'react-dom'
import {
	observer
} from 'mobx-react';
import {
	WeaRightMenu,
	WeaNewScroll,
	WeaDialog,
} from 'ecCom';
import {
	WeaTableNew
} from 'comsMobx';
import FieldList from './FieldList';
import ActionList from './ActionList';
import CheckRuleList from './CheckRuleList';
import {
	findIndex
} from 'lodash';
import classnames from 'classnames';
import {
	i18n
} from '../../public/i18n';
import {
	openProcSetting
} from '../../util/pulic-func';
// import {FormInfo, Tabs} from 'weaHrmComsPublic';
import {FormInfo, Tabs} from '../../../hrmComsPublic/index';
import {addContentPath} from '../../util/index.js'

const {
	WeaTable
} = WeaTableNew;

@observer
export default class DataList extends Component {
	constructor(props) {
		super(props);
		this.state = {
			showProcSet: false,
			procId: null
		}
	}

	showLog = (id, key, record) => {
		const {
			store
		} = this.props;
		store.showOpLog(20041, id);
	}

	showContent = (id, key = '1', record) => { //编辑
		const {
			store
		} = this.props;
		store.doEdit({
			id
		}, key, record.field006);
	}

	procSet = (id, key, record) => { //流程设置
		this.setState({
			procId: record.field001,
			showProcSet: true
		})
		openProcSetting(record.field001);
	}

	changeStatus = (id, key, record) => { //禁用
		const {
			store
		} = this.props;
		store.doChangeStatus(record);
	}

	doDel = (id) => { //删除
		const {
			store
		} = this.props, {
			removeWF
		} = store;
		removeWF({
			ids: id
		});
	}

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

	renderCol = (cols) => {
		const colKey1 = 'field001',
			colKey2 = 'stauts';
		let idx = findIndex(cols, item => item.dataIndex === colKey1);
		idx != -1 && (cols[idx].render = (text, record) => {
			return <a title={record.field001span} onClick={() => this.showContent(record.id, '1', record)}>{record.field001span}</a>
		});
		idx = findIndex(cols, item => item.dataIndex === colKey2);
		idx != -1 && (cols[idx].render = (text, record) => {
			if (record.status === '0')
				return <div style={{color: 'red'}}>{record.statusspan}</div>;
			return record.statusspan;
		})
	}

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

	render() {
		// const {FormInfo, Tabs} = window.weaHrmComsPublic;
		const {
			store,
			rightMenu,
			moduleName
		} = this.props;
		const {
			containerInitFinished,
			table,
			dialogParams,
			getDialogOpButtons,
			editTabConfig,
			getTabIndex,
			refreshTab,
			formTarget,
			wfFormItemRender,
			editorDialogRightMenu,
			generateFormDialogParams,
			getAutoGenDialogOpButtons,
			tableConfig,
			tabButtons
		} = store;
		const classes = classnames({
			['tabPane']: true,
			['tabPane-include']: containerInitFinished.detachable
		});

		const dProps = {
			...dialogParams,
			hasScroll: true,
			buttons: getDialogOpButtons,
			className: 'hrmDialog'
		}
		const autoGenProps = {
			...generateFormDialogParams,
			buttons: getAutoGenDialogOpButtons()
		}
		const tabProps = {
			tabConfig: editTabConfig,
			tabChangeHandle: this.tabChangeHandle,
			activeTabInfo: {
				activeTabKey: editTabConfig.activeTabKey,
				activeTabIndex: getTabIndex(editTabConfig.tabs, editTabConfig.activeTabKey)
			},
			rightMenu: editorDialogRightMenu,
			tabBtnDef: tabButtons,
			store
		}
		const {
			wfForm: form,
			wfFormFields: fields,
			autoGenForm,
			autoGenFormFields
		} = formTarget;

		const {
			showProcSet,
			procId
		} = this.state;

		return (
			<div className={classes}>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@znipu0`} datas={rightMenu}>
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@wr3ewd`}
                        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@7ye82f`} {...dProps}>
					<div className='sdialog'>
					{
						dProps.opType === '' ? dProps.coms :
						<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@h6kmbg`} {...tabProps}>
							<div className='tabPane tabPane-dialog'>
								<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@rrvpuy`} height={'100%'}>
									<FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@36cf9u`} menu={editorDialogRightMenu} 
											form={form} 
											formFields={fields} 
											itemRender={wfFormItemRender}/>
								</WeaNewScroll>
							</div>
							<FieldList ecId={`${this && this.props && this.props.ecId || ''}_FieldList@pphhos`} moduleName={moduleName}/>
							<ActionList ecId={`${this && this.props && this.props.ecId || ''}_ActionList@jv7phf`} />
							<CheckRuleList ecId={`${this && this.props && this.props.ecId || ''}_CheckRuleList@4uuum2`} />
						</Tabs>
					}
					</div>
                </WeaDialog>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@l6zwqn`} {...autoGenProps}>
                	<FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@a6om6t`}
						center={false}
						menu={this.autoGenDialogRightMenu} 
						form={autoGenForm} 
						formFields={autoGenFormFields}/>
                </WeaDialog>
                {
                	false &&
                	<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@ut7c5q`} 
	                	onCancel={()=> {
	                		this.setState({showProcSet: false, procId: null})
	                  	}}
	                  	title={i18n.label.pathSetting()}
	                  	url = { addContentPath(`/spa/workflow/static4engine/engine.html#/main/workflowengine/path/pathSet/pathDetail/baseSet/baseInfo?workflowId=${procId}&showLeftTree=false&onlySelfTab=true`)} // 也支持外部地址
	                  	visible={showProcSet}
	                  	style={{width: 800, height: 600}}
                	/>
                }
            </div>
		)
	}
}