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

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

import {
    WeaSwitch
} from 'comsMobx'

import {
    i18n
} from '../public/i18n';
import AttachToNumberField from './NewNumberField';
import "../style/common.less";

export default class SearchPanelDialog extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            width: 700,
        }
    }


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

        let arr = [];
        isFormInit && condition.map(c => {
            c.items.map((field, index) => {
                arr.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4cc308@${index}`} span={(index % 2 == 0) ? 10 : 11} offset={1}>
                    <div style={{ marginTop: 20 }}>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@u6ex85@${index}`}
                            label={`${field.label}`}
                            labelCol={{ span: `${field.labelcol}` }}
                            wrapperCol={{ span: `${field.fieldcol}` }}>
                            {<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@p7d3td@${index}`} fieldConfig={field} form={form} formParams={form.getFormParams()} />}
                        </WeaFormItem>
                    </div>
                </Col>)
            })
        })
        return <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ppeb6z`}>{arr}</Row>
    }

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

        let arr = [];
        isFormInit && condition.map((c, i) => {
            let _arr = [];
            c.items.map((field, index) => {
                _arrarr.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4cc308@${index}`} span={(index % 2 == 0) ? 10 : 11} offset={1}>
                    <div style={{ marginTop: 20 }}>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@u6ex85@${index}`}
                            label={`${field.label}`}
                            labelCol={{ span: `${field.labelcol}` }}
                            wrapperCol={{ span: `${field.fieldcol}` }}>
                            {<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@p7d3td@${index}`} fieldConfig={field} form={form} formParams={form.getFormParams()} />}
                        </WeaFormItem>
                    </div>
                </Col>)
            })
            arr.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@qaih5l@${i}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={_arr} col={1} />)
        })

        return <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ppeb6z`}>{arr}</Row>;
    }



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

        const buttons = [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jd6baw`} type="primary" onClick={() => search()} disabled={loading}>{i18n.button.search()}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jd6baw`} onClick={() => form.reset()} disabled={loading}>{i18n.button.reset()}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jd6baw`} onClick={() => onCancel()} disabled={loading}>{i18n.button.cancel()}</Button>)
        ];

        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@1txk5f`}
                className="new-edit-wrapper"
                title={title}
                icon="icon-coms-hrm"
                iconBgcolor="#217346"
                visible={visible}
                closable={true}
                hasScroll={true}
                onCancel={() => onCancel()}
                buttons={buttons}
                style={{ width: width, height: height }}
                initLoadCss
            >
                {
                    loading ? <div className='hrm-loading-center-small'>
                        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@4ygl4a`} spinning={loading}></Spin>
                    </div>
                        : conditionLen > 1 ? this.getSearchGroupForm() : this.getForm()}


            </WeaDialog>
        )
    }
}