import {
    inject,
    observer,
} from 'mobx-react'

import {
    WeaDialog,
    WeaMoreButton,
} from 'ecCom'

import {
    Spin,
    Button,
} from 'antd'

import {
    i18n
} from '../../public/i18n';

import React from 'react'
import NeForm from './NeForm'
import GroupSetting from './GroupSetting'

@inject('hrmEngineGroup')
@observer
export default class NewEngineGroup extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            width: 600,
            height: 200,
        }
    }

    getButtons() {
        const {
            hrmEngineGroup
        } = this.props;
        const {
            neLoading, canAdd
        } = hrmEngineGroup;
        const def = canAdd ? [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@6myafs`} type="primary" onClick={() => this.handleSave(false)} disabled={neLoading?true:false}>{i18n.button.save()}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@rer3zw`} type="primary" onClick={() => this.handleSave(true)} disabled={neLoading?true:false}>{i18n.button.saveAndSetting()}</Button>),
        ] : [];
        const btn = [
            ...def,
            (<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@0cmf8l`} />),
        ];
        return btn;
    }

    handleSave(bool) { //参数bool区分两个保存按钮
        const {
            hrmEngineGroup
        } = this.props;

        bool ? hrmEngineGroup.isOpenSettingDialog(true) : hrmEngineGroup.isOpenSettingDialog(false);
        hrmEngineGroup.setOperation('save_new');
        hrmEngineGroup.add();
    }

    render() {
        const {
            hrmEngineGroup
        } = this.props, {
            neTitle,
            newDialogVisible,
            neLoading,
            isOpenSetting,
        } = hrmEngineGroup, {
            width,
            height
        } = this.state;

        return (
            <div>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@jvw4p8`}
                    title={neTitle()}
                    icon="icon-coms-hrm"
                    iconBgcolor="#217346"
                    visible={newDialogVisible}
                    closable={true}
                    hasScroll
                    buttons={this.getButtons()}
                    onCancel={() => hrmEngineGroup.setNewDialogVisible(false)}
                    style={{width: width, height: height}}
                    onChangeHeight={(h) => this.setState({height: h})}
                >
                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@dh6ort`} spinning={neLoading}>
                        <NeForm ecId={`${this && this.props && this.props.ecId || ''}_NeForm@kafx5s`} />
                    </Spin>
                </WeaDialog>
                <GroupSetting ecId={`${this && this.props && this.props.ecId || ''}_GroupSetting@gqne1y`} />
            </div>
        )
    }
}