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';
const {
	WeaTable
} = WeaTableNew;

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

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

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

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

	doEdit = (id) => {
		const {
			store
		} = this.props;
		const {
			modifyDetachDetail
		} = store;
		modifyDetachDetail({
			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);
	}

	render() {
		const {
			store
		} = this.props;
		const {
			editDetachTabConfig,
			conditionItemRender,
			getTabIndex,
			btnsAndMenus,
			formTarget,
			editorDialogRightMenu,
			refreshEditTabComponent,
			targetListTable,
			rangeListTable,
			detachDetailParams,
			showError
		} = store;
		const {
			btns,
			menus,
			tabBtnDef
		} = btnsAndMenus(editDetachTabConfig);
		const {
			dialogConditionForm: form,
			dialogConditionFormFields: fields,
			detachForm,
			detachFormFields,
		} = formTarget;
		const tabProps = {
			tabConfig: editDetachTabConfig,
			tabChangeHandle: this.tabChangeHandle,
			activeTabInfo: {
				activeTabKey: editDetachTabConfig.activeTabKey,
				activeTabIndex: getTabIndex(editDetachTabConfig.tabs, editDetachTabConfig.activeTabKey)
			},
			rightMenu: [],
			store: store,
			conditionForm: form,
			conditionFormFields: fields,
			tabBtnDef: tabBtnDef,
			itemRender: conditionItemRender,
			advanceHeight: 45
		}
		const classes = classnames({
			['tabPane']: true,
			['tabPane-dialog']: true
		});

		const tableProps = {
			scroll: {
				y: 510
			}
		}

		tabProps.advanceHeight = 80;

		return (
			<div>
				<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@p2ehh6`} {...tabProps}>
					<FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@j4p352`} 
		            	className={classes} 
		            	form={detachForm}
		            	formFields={detachFormFields}
		            	menu={editorDialogRightMenu}/>
		            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@ot9y19`}
		                comsWeaTableStore={targetListTable}
		                hasOrder={true}
		                needScroll={true}
		                uniqueId={true}
		                {...tableProps}
		                onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate)}
		            />
		            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@th8omn`}
		                comsWeaTableStore={rangeListTable}
		                hasOrder={true}
		                needScroll={true}
		                uniqueId={true}
		                {...tableProps}
		                onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate)}
		            />
	        	</Tabs>
	        	{
	        		detachDetailParams.visible && <WeaAuth ecId={`${this && this.props && this.props.ecId || ''}_WeaAuth@kt0wuz`} {...detachDetailParams} />
                }
        	</div>
		)
	}
}