import React from 'react'

import {
    WeaDialog,
    WeaFormItem,
    WeaNewScroll,
    WeaMoreButton,
    WeaRightMenu,
} 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,
            isEdit = true,
            save
        } = this.props;

        let buttons = [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@sgjkch`} type="primary" onClick={() => save()} disabled={loading}>{i18n.button.save()}</Button>),
            (<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@vhsapy`} />)
        ];

        return isEdit ? buttons : buttons.slice(1, 2);
    }

    getDropMenuDatas = () => {
        const {
            loading
        } = this.props;

        const menu = [{
            key: '0',
            icon: <i className='icon-coms-Preservation' />,
            content: i18n.button.save(),
            disabled: loading,
        }];

        return menu
    }

    handleMenuClick = (key) => {
        const {
            save
        } = this.props;

        key == '0' && save();
    }

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

        let arr = [];
        isFormInit && condition.map(c => {
            c.items.map((field, index) => {
                arr.push(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@oclzpl@${index}`}
                            label={`${field.label}`}
                            labelCol={{span: `${field.labelcol}`}}
                            error={form.getError(field)}
                            tipPosition="bottom"
                            wrapperCol={{span: `${field.fieldcol}`}}
                            underline={isEdit ? false : true}
                        >
                                <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@dcuz4d@${index}`} fieldConfig={field} form={form} formParams={form.getFormParams()} />
                        </WeaFormItem>)
            })
        })
        return <div className="wea-form-item-group">{arr}</div>
    }

    render() {
        const {
            title,
            visible,
            loading,
            width,
            height,
            onCancel,
            icon = 'icon-coms-hrm',
        } = this.props, {
            scrollHeight
        } = this.state;

        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@wuga1l`}
                title={title}
                icon={icon}
                iconBgcolor="#217346"
                visible={visible}
                closable={true}
                hasScroll
                onCancel={() => onCancel() }
                buttons={this.getButtons()}
                style={{width: width, height: height}}
                onChangeHeight={(h) => this.setState({scrollHeight: h})}
            >
                {loading ?  <div className='hrm-loading-center-small'> 
                                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@3s2dmk`} spinning={loading}></Spin>
                            </div>
                          : <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@jfvjbn`} datas={this.getDropMenuDatas()} onClick={ key => this.handleMenuClick(key)}>
                                <div className='hrm-dialog-form'>
                                    {this.getForm()}
                                </div>
                            </WeaRightMenu>
                }
            </WeaDialog>
        )
    }
}