import React, {
    Component
} from 'react';
import {
    observer
} from 'mobx-react';
import {
    WeaRightMenu,
    WeaTableEdit,
    WeaDialog
} from 'ecCom';
import classnames from 'classnames';
import EncryptSetting from './EncryptSetting';
import ViewRangeForm from './ViewRangeForm';
import ViewRangeSetting from './ViewRangeSetting';
import FormInfo from './FormInfo';

@observer
export default class FieldDef extends Component {
    constructor(props) {
        super(props);
        this.state = {
            resize: new Date().getTime()
        }
    }

    componentDidMount() {
        window.addEventListener('resize', this.resizeHandle);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.resizeHandle);
    }

    resizeHandle = (e) => {
        this.setState({
            resize: new Date().getTime()
        })
    }

    render() {
        const {
            resize
        } = this.state;
        const {
            rightMenu,
            store,
            resetClass
        } = this.props;
        const {
            setEditTable,
            tableEditConfig,
            formTarget,
            dialogParams,
            setDialogVisible,
            getDialogOpButtons,
            showError,
            editorDialogRightMenu,
            refreshFeildDef,
            refreshForm,
            dropdownSelectedKey,

            moduleName,
            isJobTreeNode
        } = store;
        const classes = classnames({
            ['tabPane']: true,
            ['tabPane-include']: resetClass
        })
        const {
            groupInfoFrom,
            groupInfoFromFields,
            typeInfoFrom,
            typeInfoFromFields,
            childInfoForm,
            childInfoFormFields
        } = formTarget;
        const {
            editGroupInfo,
            editTypeInfo,
            groupInfoSetting,
            createChildInfo,
            childInfoSetting
        } = dialogParams;

        let tableProps = {};
        if (this.tabDom) {
            tableProps = {
                scroll: {
                    y: this.tabDom.offsetHeight - 80,
                }
            }
            //人员卡片字段定义页面
            // if (moduleName === 'resourcefielddefined') {
            //     if ((window.e9_locale.userLanguage == 7)) { //系统语言为中文
            //         Object.assign(tableProps.scroll, {
            //             x: 1200
            //         });
            //     } else {
            //         Object.assign(tableProps.scroll, {
            //             x: isJobTreeNode ? 1400 : 1900
            //         });
            //     }
            // }
        }

        const rMenu = [...rightMenu, ...store.getBasicMenus(this.props.logSmallType, this.props.targetId)]

        return (
            <div className={classes} ref={dom => { this.tabDom = dom }}>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@43qdk8`} datas={rMenu}>
                    <WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@5fu5eh`} tableProps={tableProps} viewAttr={3} rowKey={'fieldidrowKey'}
                        ref={(editTable) => setEditTable(editTable, 'fieldDef')}
                        {...tableEditConfig['fieldDef']}
                    />
                </WeaRightMenu>
                <EncryptSetting ecId={`${this && this.props && this.props.ecId || ''}_EncryptSetting@imlc4x`} store={store} />
                <ViewRangeSetting ecId={`${this && this.props && this.props.ecId || ''}_ViewRangeSetting@2vmdra`} store={store} />
                <ViewRangeForm ecId={`${this && this.props && this.props.ecId || ''}_ViewRangeForm@bg4o68`} store={store} />
                {/* 新增分组 */}
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@etbstc`}
                    icon="icon-coms-hrm"
                    iconBgcolor="#217346"
                    style={{ width: 440, height: 70 }}
                    title={editGroupInfo.title}
                    visible={editGroupInfo.visible}
                    onCancel={() => setDialogVisible('editGroupInfo', false)}
                    buttons={getDialogOpButtons()}
                    moreBtn={{ datas: editorDialogRightMenu }}
                >
                    <FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@x4akor`} center={false} form={groupInfoFrom} formFields={groupInfoFromFields} menu={editorDialogRightMenu} />
                </WeaDialog>
                {/* 新增类型 */}
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@etbstc`}
                    icon="icon-coms-hrm"
                    iconBgcolor="#217346"
                    style={{ width: 440, height: 70 }}
                    title={editTypeInfo.title}
                    visible={editTypeInfo.visible}
                    onCancel={() => setDialogVisible('editTypeInfo', false)}
                    buttons={getDialogOpButtons()}
                    moreBtn={{ datas: editorDialogRightMenu }}
                >
                    <FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@x4akor`} center={false} form={typeInfoFrom} formFields={typeInfoFromFields} menu={editorDialogRightMenu} />
                </WeaDialog>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@hxqf4v`}
                    icon="icon-coms-hrm"
                    iconBgcolor="#217346"
                    style={{ width: 620, height: 450 }}
                    title={groupInfoSetting.title}
                    visible={groupInfoSetting.visible}
                    onCancel={() => setDialogVisible('groupInfoSetting', false, '')}
                    buttons={getDialogOpButtons()}
                    moreBtn={{ datas: editorDialogRightMenu }}
                >
                    <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@u3ghz1`} datas={editorDialogRightMenu}>
                        <WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@9x9otf`}
                            ref={(editTable) => setEditTable(editTable, 'groupSetting')}
                            tableProps={{ scroll: { y: 360 } }}
                            {...tableEditConfig['groupSetting']} />
                    </WeaRightMenu>
                </WeaDialog>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@dirux3`}
                    icon="icon-coms-hrm"
                    iconBgcolor="#217346"
                    style={{ width: 440, height: createChildInfo.height }}
                    title={createChildInfo.title}
                    visible={createChildInfo.visible}
                    onCancel={() => setDialogVisible('createChildInfo', false)}
                    buttons={getDialogOpButtons()}
                    moreBtn={{ datas: editorDialogRightMenu }}
                >
                    <FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@mypkxi`} center={false} form={childInfoForm} formFields={childInfoFormFields} menu={editorDialogRightMenu} />
                </WeaDialog>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@k8ta6q`}
                    icon="icon-coms-hrm"
                    iconBgcolor="#217346"
                    style={{ width: 620, height: 450 }}
                    title={childInfoSetting.title}
                    visible={childInfoSetting.visible}
                    onCancel={() => setDialogVisible('childInfoSetting', false, '')}
                    buttons={getDialogOpButtons()}
                    moreBtn={{ datas: editorDialogRightMenu }}
                >
                    <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@i9bjcx`} datas={editorDialogRightMenu}>
                        <WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@mma0l9`}
                            ref={(editTable) => setEditTable(editTable, 'childInfoSetting')}
                            tableProps={{ scroll: { y: 360 } }}
                            {...tableEditConfig['childInfoSetting']} />
                    </WeaRightMenu>
                </WeaDialog>
            </div>
        )
    };
}