import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	WeaRightMenu,
	WeaDialog
} from 'ecCom';
import {
	WeaTableNew
} from 'comsMobx';
import {
	Row,
	Col,
	Button
} from 'antd';
import {
	i18n
} from '../../public/i18n';
import FormInfo from '../../coms/FormInfo';
import classnames from 'classnames';
import {
	findIndex,
	findLastIndex
} from 'lodash';
const {
	WeaTable
} = WeaTableNew;

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

	componentDidMount() {}

	componentWillReceiveProps(nextProps) {}

	openDialog = (id, key = '1') => {
		const {
			store
		} = this.props;
		const {
			showEditDialog
		} = store;
		showEditDialog({
			id
		}, key);
	}

	doEdit = (id, key) => {
		this.openDialog(id, key);
	}

	doDel = (id) => {
		const {
			store
		} = this.props;
		const {
			removeAppDetach
		} = store;
		removeAppDetach({
			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 === 'doEdit' && this[func] && this[func](id, '1'); //编辑
		func === 'doDel' && this[func] && this[func](id); //删除
		func === 'showLog' && store.showLog({logSmallType: store.logTypeDef.HRM_ENGINE_APPDETACH, targetId: id}); //日志
	}

	renderCol = (cols) => {
		const colKey1 = 'name',
			colKey2 = 'id',
			colKey3 = 'id1';
		let idx = findIndex(cols, item => item.dataIndex === colKey1);
		idx != -1 && (cols[idx].render = (text, record) => {
			return <a onClick={() => this.openDialog(record.id, '1')}>{record.name}</a>
		})
		idx = findIndex(cols, item => item.dataIndex === colKey2);
		idx != -1 && (cols[idx].render = (text, record) => {
			return <a onClick={() => this.openDialog(record.id, '2')}>{record.idspan}</a>
		})
		idx = findIndex(cols, item => item.dataIndex === colKey3);
		idx != -1 && (cols[idx].render = (text, record) => {
			return <a onClick={() => this.openDialog(record.id, '3')}>{record.id1span}</a>
		})
	}

	render() {
		const {
			store,
			rightMenu
		} = this.props, {
			appDetachListTable: table,
			dialogParams,
			formTarget,
			getDialogOpButtons,
			refreshDialog
		} = store;
		const classes = classnames({
			['tabPane']: true,
		});
		const {
			detachForm: form,
			detachFormFields: fields
		} = formTarget;
		const dProps = {
			...dialogParams,
			buttons: getDialogOpButtons(),
			style: {
				width: dialogParams.isEdit ? 800 : 600,
				height: dialogParams.isEdit ? 650 : 135
			}
		}
		const rMenu = [...rightMenu, ...store.getBasicMenus('HRM_ENGINE_APPDETACH')]

		return (
			<div className={classes}>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@w9i94k`} datas={rMenu}>
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@iqqzt6`}
                        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@qflrk4`} {...dProps}>
                	{dProps.coms}
                </WeaDialog>
            </div>
		)
	}
}