import React, {Component} from 'react';
import {observer} from 'mobx-react';
import {WeaRightMenu,WeaInput,WeaLocaleProvider} from 'ecCom';
import {
	WeaTableNew
} from 'comsMobx';
import classnames from 'classnames';
import findIndex from 'lodash/findIndex';
import * as mobx from 'mobx';
const toJS = mobx.toJS;
import Edit from './Edit';
import DeviceList from './DeviceList';
import DeviceEdit from './DeviceEdit';
const {
	WeaTable
} = WeaTableNew;
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class Content extends Component{
    openHrm = id => this.props.store.openHrm(id);

    setBatchEditVal = (id,val) => this.props.store.setBatchEditVal(id,val);

    doEdit = (params={}) => this.props.store.doEdit(params);

    doEditOperate = (id, record) => this.props.store.doEdit({"id":record.id,"lastname":record.lastname});

    doEditBase = this.doEdit;

    doDelete = id => this.props.store.doDelete({ids: id});

    showLog = id => this.props.store.showLog({logSmallType:this.props.store.logTypeDef.HRM_ENGINE_SCHEDULECODE, targetId: 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, record);
	}

	renderCol = (cols) => {
        ['lastname','id1','id2'].map(key => {
            const idx = findIndex(cols, item => item.dataIndex === key);
            idx != -1 && (cols[idx].render = (text, record) => {
                if (key=='lastname') {
                    return <a  href={`javaScript:openhrm(${record.id})`}  onClick={e => window.pointerXY(e)} dangerouslySetInnerHTML={{__html:record[`${key}span`]}}></a>
                }else if(key=='id1'){
                    return <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@gaj0t5`} 
                        value={record[`${key}span`]} 
                        onBlur={ (val) =>  this.setBatchEditVal(record.id,val) } 
                        style={{width:120}}
                        />
                }else if(key=='id2'){
                    return <a onClick={() => this.doEdit({"id":record.id,"lastname":record.lastname})} dangerouslySetInnerHTML={{__html:record[`${key}span`].length==0?getLabel(93,'编辑'):record[`${key}span`]}}></a>
                }
            });
        })
        
    }
    
    render(){
        const {
			store
        } = this.props;
        const className = classnames({
			['tabPane']: true,
			['tabPane-include']: true//store.containerInitFinished.detachable
		})
        
        return (
            <div className={className}>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@axktw2`} datas={this.props.rightMenu}>
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@8u0wgs`}
                        comsWeaTableStore={store.table}
                        hasOrder={true}
                        needScroll={true}
                        onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate)}
                        getColumns={cols => this.renderCol(cols)}
                    />
                </WeaRightMenu>
                <Edit ecId={`${this && this.props && this.props.ecId || ''}_Edit@v4mvlm`} store={store} />
                <DeviceList ecId={`${this && this.props && this.props.ecId || ''}_DeviceList@e09k76`} store={store} />
                <DeviceEdit ecId={`${this && this.props && this.props.ecId || ''}_DeviceEdit@zv81gw`} store={store}/>
            </div>
        )
    }
}