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

import {
    Row,
    Col,
    Spin,
    Button,
} from 'antd'

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

import {
    WeaSwitch
} from 'comsMobx'

import React from 'react'

class NewAndEditDialog extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            width: 600,
            height: 660,
            conditionLen: 1,
        }
    }

    componentWillReceiveProps(nextProps) {
        const {
            conditionLen,
            height
        } = this.state;
        if (this.props.condition !== nextProps.condition) {
            let conditions = nextProps.condition;
            let rowNum = 0;
            conditions.map(condition => {
                rowNum = rowNum + condition.items.length;
            });
            this.setState({
                conditionLen: conditions.length
            });
            let len = conditionLen > 1 ? rowNum * 44 + conditionLen * 66 : rowNum * 40 + 50;
            this.setState({
                height: len > 660 ? 660 : len
            });
        }
    }

    getForm() {
        const {
            condition,
            form
        } = this.props;
        let formParams = form.getFormParams();
        let arr = [];
        const {
            isFormInit
        } = form;

        isFormInit && condition.map(c => {
            c.items.map((field, index) => {
                arr.push(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@glh6gg@${index}`}
                            label={`${field.label}`}
                            labelCol={{span: `${field.labelcol}`}}
                            error={form.getError(field)}
                            wrapperCol={{span: `${field.fieldcol}`}}>
                                {<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@oseh21@${index}`} fieldConfig={field} form={form} formParams={formParams} />}
                        </WeaFormItem>)
            })
        })
        return <div className="wea-form-item-group">{arr}</div>
    }

    getSearchGroupForm() {
        const {
            condition,
            form,
            domkey,
            handleLinkage
        } = this.props;

        let arr = [];
        let formParams = form.getFormParams();
        const {
            isFormInit
        } = form;

        isFormInit && condition.map((c, i) => {
            let _arr = [];
            c.items.map((field, index) => {
                _arr.push({
                    com: (
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@34wneb@${index}`}
                                label={`${field.label}`}
                                labelCol={{span: `${field.labelcol}`}}
                                error={form.getError(field)}
                                wrapperCol={{span: `${field.fieldcol}`}}
                            >
                                <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@ttvfll@${index}`} fieldConfig={field} form={form} formParams={formParams} onChange={e => (domkey in e) && handleLinkage(e.locationcity.value) }/>
                            </WeaFormItem>
                    ),
                    colSpan: 1
                })
            })
            arr.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@nn5nn6@${i}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={_arr} col={1} fontSize={13}/>)
        })

        return arr;
    }

    render() {
        const {
            title,
            visible,
            save,
            onCancel,
            loading
        } = this.props;
        const {
            width,
            height,
            conditionLen
        } = this.state;

        const buttons = [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@220qhj`} type="primary" onClick={() => save()}>{i18n.button.save()}</Button>),
            (<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@ge6vv3`} />)
        ];

        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@rx8zjr`}
                title={title}
                icon="icon-coms-hrm"
                iconBgcolor="#217346"
                visible={visible}
                closable={true}
                onCancel={() => onCancel() }
                buttons={buttons}
                style={{width: width, height: height}}
                onChangeHeight={(h) => this.setState({height: h})}
            >
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@n8jumn`} spinning={loading}>
                    <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@3hg09g`} height={height} ref="scrollBar">
                        <div className={conditionLen > 1 ? '' : 'hrm-dialog-form'}>
                            {conditionLen > 1 ? this.getSearchGroupForm() : this.getForm()}
                        </div>
                    </WeaNewScroll>
                </Spin>
            </WeaDialog>
        )
    }
}

export default NewAndEditDialog