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

import {
    Spin,
    Button,
} from 'antd'

import {
    WeaSwitch
} from 'comsMobx'

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

export default class NewPopconfirm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: '0'
        }
    }

    renderComponent(field, index,form) {
        return <WeaFormItem style={{ margin: "10px" }} ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@jacv6v@${index}`}
            label={`${field.label}`}
            labelCol={{ span: `${field.labelcol}` }}
            error={form.getError(field)}
            tipPosition="bottom"
            wrapperCol={{ span: `${field.fieldcol}` }}>
            {<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@7vxyfr@${index}`} fieldConfig={field} form={form} formParams={form.getFormParams()}
                onChange={this.onChange} />}
        </WeaFormItem>
    }


    getForm() {
        const {
            condition,
            form,
            isFormInit,
            isMerge
        } = this.props, {
            value
        } = this.state;
        form.updateFields({
            moveType: {
              value: this.state.value
            }
          });
        let arr = [];
        isFormInit && condition.map(c => {
            c.items.map((field, index) => {
                if(!isMerge){
                    if (field.domkey[0] !== 'company' && field.domkey[0] !== 'department') {
                        arr.push(
                            this.renderComponent(field,index,form)
                        )
                    }
                    value === '0' && field.domkey[0] === 'company' && arr.push(
                        this.renderComponent(field,index,form)
                    )
                    value === '1' && field.domkey[0] === 'department' && arr.push(
                        this.renderComponent(field,index,form)
                    )
                }else{
                    arr.push(
                        this.renderComponent(field,index,form))
                } 
            })
        })
        return <div className="wea-form-item-group">{arr}</div>
    }

    onChange = data => {
        data.moveType && this.setState({
            value:data.moveType.value
        })
    };

    render() {
        const {
            title,
            visible,
            save,
            onCancel,
            loading,
            height,
            width,
            form
        } = this.props
        const a = form.getFormParams();
        const buttons = [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jd6baw`} type="primary" onClick={() => {
                save();this.setState({value:form.getFormParams().moveType})
                }} disabled={loading}>{i18n.button.ok()}</Button>),
                            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jd6baw`} type="primary" onClick={() => {
                this.setState({value:form.getFormParams().moveType});onCancel()
                }} disabled={loading}>{i18n.button.cancel()}</Button>)
                        ];

        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@1txk5f`}
                title={title}
                icon="icon-coms-hrm"
                iconBgcolor="#217346"
                visible={visible}
                closable={true}
                onCancel={() => {
                    this.setState({value:"0"});onCancel()
                }}
                buttons={buttons}
                style={{ width: width, height: height}}
            >
                {
                    loading ? <div className='hrm-loading-center-small'>
                        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@4ygl4a`} spinning={loading}></Spin>
                    </div>
                        : <div style={{padding:'20px',width:'100%',height:'100%'}}>{this.getForm()}</div>
                }
            </WeaDialog>
        )
    }
}