import React, {
    Component
} from 'react';
import {
    observer
} from 'mobx-react';
import {
    WeaNewScroll,
    WeaRightMenu,
    WeaDialog
} from 'ecCom';
import {
    Form,
    Button,
    message
} from 'antd';
import {
    WeaTableNew
} from 'comsMobx';
import classnames from 'classnames';
import FormInfo from '../../coms/FormInfo';
import findIndex from 'lodash/findIndex';
import {
    i18n
} from '../../public/i18n';

const WeaTable = WeaTableNew.WeaTable;

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

    openDialog = (id) => {
        const {
            store
        } = this.props, {
            getNetworkSegmentStrategyForm
        } = store;
        getNetworkSegmentStrategyForm({
            id
        });
    }

    doDel = (id) => {
        const {
            store
        } = this.props, {
            multiRemove
        } = store;
        multiRemove({
            id
        });
    }

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

    renderCol = (cols) => {
        const idx = findIndex(cols, item => item.dataIndex === 'id');
        idx != -1 && (cols[idx].render = (text, record) => {
            return <div onClick={() => this.openDialog(record.id)} dangerouslySetInnerHTML={{__html: record.idspan}}></div>
        })
    }

    handleSwitchChange = (datas, form) => {
        const key = Object.keys(datas)[0];
        const value = datas[key].value;

        if (key === 'ipAddressType') {
            form.resetConditionValue();
            form.updateFields({
                ipAddressType: {
                    value
                }
            });
        }
    }

    render() {
        const {
            store,
            rightMenu
        } = this.props, {
            table,
            save,
            dialogParams,
            formTarget,
            itemRender,
            getDialogOpButtons,
            editorDialogRightMenu
        } = store;
        const btns = getDialogOpButtons();
        const {
            networkForm: form,
            networkFormFields: fields
        } = formTarget;
        const classes = classnames({
            ['tabPane']: true,
            ['tabPane-dialog']: (this.props.isSingle ? true : false),
            ['tabPane-single']: (this.props.isSingle ? true : false)
        });
        const tableProps = {
            // scroll: {
            //     y: this.props.isSingle ? 470 : 0
            // }
        }
        const rMenu = [...rightMenu, ...store.getBasicMenus('HRM_ENGINE_SECURITYSETTING_NETWORKSEGMENTSTRATEGY')]

        return (
            <div className={classes}>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@g5832w`} datas={rMenu}>
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@q2b5gd`}
                        comsWeaTableStore={table}
                        hasOrder={true}
                        needScroll={true}
                        onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate)}
                        getColumns={cols => this.renderCol(cols)}
                        {...tableProps}
                    />
                    <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@19qs0m`} {...store.toJS(dialogParams)} buttons={btns} moreBtn={{datas: editorDialogRightMenu}}>
                        {/* <WeaRightMenu datas={editorDialogRightMenu}> */}
                            <FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@2nmcwd`} form={form} formFields={fields} itemRender={itemRender} menus={editorDialogRightMenu} onSwitchChange={datas => this.handleSwitchChange(datas,form)}/>
                        {/* </WeaRightMenu> */}
                    </WeaDialog>
                </WeaRightMenu>
            </div>
        )
    };
}