import React, {
	Component
} from 'react';
import ReactDOM from 'react-dom'
import {
	observer
} from 'mobx-react';
import {
	WeaTableNew
} from 'comsMobx';
import {
	findIndex
} from 'lodash';
import classnames from 'classnames';

const {
	WeaTable
} = WeaTableNew;

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

	showContent = (id) => {
		const {
			store
		} = this.props;
		store.scheduleSetting(id);
	}

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

	renderCol = (cols) => {
		const colKey1 = 'field001',
			colKey2 = 'field007';
		let idx = findIndex(cols, item => item.dataIndex === colKey1);
		idx != -1 && (cols[idx].render = (text, record) => {
			return <a onClick={() => this.showContent(record.id)}>{record.field001span}</a>
		});
		idx = findIndex(cols, item => item.dataIndex === colKey2);
		idx != -1 && (cols[idx].render = (text, record) => {
			return <div style={{background: record.field007, width: 60, height: 30}} />
		});
	}

	render() {
		const {
			store,
			rightMenu
		} = this.props;
		const {
			table,
			showDetail
		} = store;
		const classes = classnames({
			['tabPane-include']: true
		});
		const tableProps = {
			onRowClick: showDetail
		}

		return (
			<div className={classes}>
                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@xdbgxa`}
                	{...tableProps}
                    comsWeaTableStore={table}
                    hasOrder={true}
                    needScroll={true}
                    onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate)}
                    getColumns={cols => this.renderCol(cols)}
                />
            </div>
		)
	}
}