import React, {
	Component
} from 'react';
import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaTableNew
} from 'comsMobx';
import {
	WeaAuth,
	WeaHelpfulTip
} from 'ecCom';
import classnames from 'classnames';
import Tabs from '../../coms/Tabs';
import {
	findIndex
} from 'lodash';
import {
	i18n
} from '../../public/i18n';
const {
	WeaTable
} = WeaTableNew;

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

	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
		});
	}

	renderCol = (cols) => {
		const {columnHelpful} = this.props;
		columnHelpful && columnHelpful.length > 0 && cols.map((col, i) => {
			if(i < columnHelpful.length && columnHelpful[i] != null && columnHelpful[i] != ''){
				col.title = (
					<span>{col.title}  <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@lcvdv4@${i}`} title={columnHelpful[i]}></WeaHelpfulTip></span>
				)
			}
		})
	}

	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 {
			maintenanceTabConfig,
			btnsAndMenus,
			maintenanceParams,
			maintenanceList,
			formTarget
		} = store;
		const {
			btns,
			menus,
			tabBtnDef
		} = btnsAndMenus(maintenanceTabConfig);
		const {
			matrixMatrixConditionForm: form,
			matrixMatrixConditionFormFields: fields
		} = formTarget;
		const tabProps = {
			tabConfig: maintenanceTabConfig,
			activeTabInfo: {
				activeTabKey: maintenanceTabConfig.activeTabKey,
				activeTabIndex: 0
			},
			rightMenu: [],
			store: store,
			tabBtnDef: tabBtnDef,
			conditionForm: form,
			conditionFormFields: fields
		}
		const classes = classnames({
			['tabPane']: true,
			['tabPane-dialog']: true
		});

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

		return (
			<div>
				<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@hme6io`} {...tabProps}>
		            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@j74xbx`}
		                comsWeaTableStore={maintenanceList}
		                hasOrder={true}
		                needScroll={true}
		                uniqueId={true}
						{...tableProps}
                        getColumns={cols => this.renderCol(cols)}
		                onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate)}
		            />
	        	</Tabs>
	        	{/* {
	        		maintenanceParams.visible && <WeaAuth {...maintenanceParams} title={i18n.label.addMemberAuth()} />
                } */}
        	</div>
		)
	}
}