import { observer } from 'mobx-react';
import React, {Component} from 'react';
import { WeaDialog } from 'ecCom';
import Tabs from '../../../coms/Tabs';
import classnames from 'classnames';
import {WeaTableNew} from 'comsMobx';
import {i18n} from '../../../public/i18n';

const {WeaTable} = WeaTableNew;

const classes = classnames({
    ['tabPane']: true,
    ['tabPane-dialog']: true
});

@observer
export default class ColumnSetting extends Component{
    onOperatesClick = (record, index, operate, tableName) => {
		const func = operate.href ? operate.href.split(':')[1].split('(')[0] : '';
		func === 'doDelete' && this.doDelete(record);
    }

    doDelete = record => {
        const {store: {deleteColumn}} = this.props;
        deleteColumn(record.id);
    }

    render(){
        const {store} = this.props;
        const {columnList, mSettingDialogHeight, createMaintenanceForm} = store;

		const tableProps = {
			scroll: {
				y: mSettingDialogHeight - 140
			}
        }

        return (
            <div className={classes}>
                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@rm1od6`}
                    comsWeaTableStore={columnList}
                    hasOrder={true}
                    needScroll={true}
                    uniqueId={true}
                    {...tableProps}
                    // getColumns={cols => this.renderCol(cols)}
                    onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate)}
                />
                {
                    createMaintenanceForm.visible && <WeaAuth ecId={`${this && this.props && this.props.ecId || ''}_WeaAuth@426trb`} {...createMaintenanceForm} title={i18n.label.addMemberAuth()} />
                }
            </div>
        )
    }
}