import { observer } from 'mobx-react';
import React, {Component} from 'react';
import {WeaTableNew} from 'comsMobx';
import Tabs from '../../../coms/Tabs';
import classnames from 'classnames';
import { WeaDialog, WeaHelpfulTip } from 'ecCom';
import isEmpty from 'lodash/isEmpty';
import get from 'lodash/get';
const {WeaTable} = WeaTableNew;

@observer
export default class MaintenanceListView extends Component{
    constructor(props){
        super(props);
        this.state = {
            tableHeight: 0
        }
    }

    getHelpfulCom = dataIndex => {
        const {store} = this.props;
        const {columnHelpful} = store;
        if(!isEmpty(columnHelpful))
            return get(columnHelpful, dataIndex) || null;
        return null;
    }

    renderCol = (cols) => {
        const {store} = this.props;
        const {createMaintenance} = store;
		cols.map((col, i) => {
            const helpfulStr = this.getHelpfulCom(col.dataIndex);
            col.title = (
                <span>{col.title}  {helpfulStr != null && <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@dyk0fn@${i}`} title={helpfulStr}></WeaHelpfulTip>}</span>
            )
            col.render = (text, record, dataIndex) => {
                if(col.dataIndex == 'rightLevel'){
                    return (
                        <a onClick={() => this.doAction('doEditRightLevel', record)} title={record[`${col.dataIndex}span`]}>{record[`${col.dataIndex}span`]}</a>
                    )
                }else{
                    const tabIndex = (col.dataIndex == 'mainterid' ? '1' : (col.dataIndex == 'conditionid' ? '2' : '3'));
                    return (
                        <a onClick={() => createMaintenance(record.maintid, tabIndex)} title={record[`${col.dataIndex}span`]}>{record[`${col.dataIndex}span`]}</a>
                    )
                }
            }
        })
    }
    
    onOperatesClick = (record, index, operate, tableName) => {
		const func = operate.href ? operate.href.split(':')[1].split('(')[0] : '';
        func === 'doEdit' && this.doAction('modify', record);
        func === 'doEditRightLevel' && this.doAction('doEditRightLevel', record);
		func === 'doDelete' && this.doAction('remove', record);
    }
    
	doAction = (op, record) => {
		const {
			store
		} = this.props;
		const {
			doAction
		} = store;
		doAction(op, record);
	}

    render(){
        const {store} = this.props;
        const {
            mListDialog,
            mListTab,
            mListTabBtn,
			maintenanceList,
            formTarget: {
                mListConditionForm: form,
                mListConditionFormFields: fields
            },
		} = store;
		const tabProps = {
			tabConfig: mListTab,
			activeTabInfo: {
				activeTabKey: mListTab.activeTabKey,
				activeTabIndex: 0
			},
			rightMenu: [],
			store: store,
			tabBtnDef: mListTabBtn,
			conditionForm: form,
			conditionFormFields: fields
		}
		const classes = classnames({
			['tabPane']: true,
			['tabPane-dialog']: true
        });
		const tableProps = {
			scroll: {
				y: this.state.tableHeight - 140
			}
        }

        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@ixb0si`} {...mListDialog} onChangeHeight={v => this.setState({tableHeight: v})}>
                <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@wzyeoi`} {...tabProps}>
                    <div className={classes}>
                        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@7e0qx3`}
                            comsWeaTableStore={maintenanceList}
                            hasOrder={true}
                            needScroll={true}
                            uniqueId={true}
                            {...tableProps}
                            getColumns={cols => this.renderCol(cols)}
                            onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate)}
                        />
                    </div>
                </Tabs>
            </WeaDialog>
        )
    }
}