import React from 'react';
import {
    inject,
    observer
} from 'mobx-react';
import {
    WeaDialog,
    WeaFormItem,
    WeaSearchGroup,
} from 'ecCom'

import {
    Row,
    Col,
    Spin,
    Button,
} from 'antd'
import isEmpty from 'lodash/isEmpty';
import {
    WeaSwitch
} from 'comsMobx'
import * as mobx from 'mobx';
const toJS = mobx.toJS;
import {
    i18n
} from '../../public/i18n';
import {AttachToNumberField} from '../../util/index.js'

@inject('hrmOrganization')
@observer
class NewAndEditDialog extends React.Component {
    constructor(props) {
        super(props);
    }

    getForm() {
        const {
            hrmOrganization
        } = this.props;
        const {
            formField,
            form,
            isEditor,
            dialogIsAdd,
            visible,
        } = hrmOrganization;

        let formParams = form.getFormParams();
        let arr = [];
        let tipPosition = 'bottom';
        let len = formField.length - 1;
        form.isFormInit && toJS(formField).map((c, i) => {
            c.items.map((field, index) => {
                if (i == len && index == c.items.length - 1) {
                    tipPosition = 'top';
                }
                arr.push(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@xy0swk@${index}`}
                            label={`${field.label}`}
                            labelCol={{span: `${field.labelcol}`}}
                            error={form.getError(field)}
                            tipPosition={tipPosition}
                            wrapperCol={{span: `${field.fieldcol}`}}
                            underline={!isEditor}
                        >
                            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@3gildl@${index}`} fieldConfig={field} form={form} formParams={formParams} />
                            {['subcompanycode','departmentcode'].includes(field.domkey[0]) && visible &&
                                <AttachToNumberField field={field} form={form} isEdit={!dialogIsAdd}/>
                            }
                        </WeaFormItem>)
            })
        })
        return <div className="wea-form-item-group">{arr}</div>
    }

    getSearchGroupForm() {
        const {
            hrmOrganization
        } = this.props;
        const {
            formField,
            form,
            dialogIsAdd,
            visible,
        } = hrmOrganization;

        let arr = [];
        let formParams = form.getFormParams();
        form.isFormInit && toJS(formField).map((c, i) => {
            let _arr = [];
            c.items.map((field, index) => {
                _arr.push({
                    com: (
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ruh6sc@${index}`}
                                label={`${field.label}`}
                                labelCol={{span: `${field.labelcol}`}}
                                error={form.getError(field)}
                                tipPosition="bottom"
                                //wrapperCol={{span: `${field.fieldcol}`}}
                                wrapperCol={{span: 15}}
                            >
                                <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@9a0nyv@${index}`} fieldConfig={field} form={form} formParams={formParams} />
                               {['subcompanycode','departmentcode'].includes(field.domkey[0]) && visible &&
                                <AttachToNumberField field={field} form={form} isEdit={!dialogIsAdd}/>
                            }
                            </WeaFormItem>
                    ),
                    colSpan: 1
                })
            })
            arr.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@o4uwvb@${i}`} needTigger={true} title={c.title} hide={c.hide} showGroup={c.defaultshow} items={_arr} col={1} />)
        })

        return arr;
    }

    save() {
        const {
            hrmOrganization
        } = this.props;
        const {
            dialogFunc
        } = hrmOrganization;
        hrmOrganization[dialogFunc] && hrmOrganization[dialogFunc]();
    }

    render() {
        const {
            hrmOrganization
        } = this.props;
        const {
            dialogTitle,
            visible,
            loading,
            form,
            formField,
            hideSaveBtn
        } = hrmOrganization;

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

        let tmpFormField = toJS(formField);
        let conditionLen = isEmpty(tmpFormField) ? 0 : toJS(tmpFormField).length;
        let itemLen = 0;
        let dialogHeight = 0;
        !isEmpty(tmpFormField) && toJS(tmpFormField).map(c => {
            itemLen = itemLen + c.items.length;
        });
        dialogHeight = conditionLen > 1 ? itemLen * 46 + conditionLen * 62 : ((itemLen-1) * 40+32) + 60;
        dialogHeight = dialogHeight > 660 ? 660 : dialogHeight;
        if (dialogHeight > window.innerHeight - 150) dialogHeight = window.innerHeight - 150;

        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@rpr2fr`}
                {...this.props}
                closable
                title={dialogTitle}
                hasScroll={true}
                icon="icon-coms-hrm"
                iconBgcolor="#217346"
                visible={visible}
                buttons={buttons}
                onCancel={() => hrmOrganization.updateVisible(false)}
                style={{width: dialogHeight>500?660:600, height: dialogHeight}}
                moreBtn={{datas:[{
                    key: '1',
                    content: i18n.button.save(),
                    icon: <i className='icon-coms-Preservation'/>,
                    onClick: () => this.save(),
                }]}}
            >
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@550fbu`} spinning={loading}>
                    <div style={conditionLen > 1 ? {} : {padding: '27px 8% 25px'}}>
                        {conditionLen > 1 ? this.getSearchGroupForm() : this.getForm()}
                    </div>
                </Spin>
            </WeaDialog>
        )
    }
}

export default NewAndEditDialog