import {
    WeaDialog,
    WeaFormItem,
    WeaNewScroll,
    WeaMoreButton,
} from 'ecCom'

import {
    Spin,
    Button,
} from 'antd'

import {
    WeaSwitch
} from 'comsMobx'

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

export default class Editor extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            scrollHeight: this.props.height,
        }
    }

    getButtons() {
        const {
            loading,
            saveForm
        } = this.props;

        return [
            (<Button type="primary" onClick={() => saveForm()} disabled={loading}>{i18n.button.save()}</Button>),
            (<WeaMoreButton />)
        ];
    }

    getForm() {
        const {
            form,
            condition,
            isFormInit,
            authorized = true,
            plusClick,
        } = this.props;

        let arr = [];
        isFormInit && condition.map(c => {
            c.items.map((field, index) => {
                let key = field.domkey[0];
                if (key == 'jobgroupid') {
                    field.addOnClick = () => plusClick('jobGroup');
                }
                if (key == 'jobactivityid') {
                    field.addOnClick = () => plusClick('job');
                }
                arr.push(<WeaFormItem
                            label={`${field.label}`}
                            labelCol={{span: `${field.labelcol}`}}
                            error={form.getError(field)}
                            tipPosition="bottom"
                            wrapperCol={{span: `${field.fieldcol}`}}
                            underline={!authorized}
                        >
                                {<WeaSwitch fieldConfig={field} form={form} formParams={form.getFormParams()} />}
                        </WeaFormItem>)
            })
        })
        return <div className="wea-form-item-group">{arr}</div>
    }

    render() {
        const {
            width,
            height,
            loading,
            title,
            visible,
            closeDialog,
        } = this.props, {
            scrollHeight
        } = this.state;

        if (title) {
            return (
                <WeaDialog
                    title={title}
                    icon="icon-coms-hrm"
                    iconBgcolor="#217346"
                    visible={visible}
                    closable={true}
                    onCancel={() => closeDialog() }
                    buttons={this.getButtons()}
                    style={{width: width, height: height}}
                    onChangeHeight={(h) => this.setState({scrollHeight: h})}
                >
                <Spin spinning={loading}>
                    <WeaNewScroll height={scrollHeight} >
                        <div className='hrm-dialog-form'>
                            {this.getForm()}
                        </div>
                    </WeaNewScroll>
                </Spin>
            </WeaDialog>
            )
        } else {
            return (
                <Spin spinning={loading}>
                    <div className='hrm-dialog-form'>
                        {this.getForm()}
                    </div>
                </Spin>
            )
        }


    }
}