import React, { Fragment } from 'react';
import {
    inject,
    observer
} from 'mobx-react';
import {
    toJS
} from 'mobx';
import { Authority, Top, Search, Table, Dialog, ImportExcel, OrgTree } from '../../public/valhalla/components/index';
import { WeaAuth, WeaLeftRightLayout } from 'ecCom';
import { i18n } from '../../public/i18n';
import '../../style/common.less';

@inject("sensitiveListStore")
@observer
export default class List extends React.Component {
    componentWillMount() {
        const { location: { query }, sensitiveListStore: { setPageType } } = this.props;
        if (query.type) {
            setPageType(query.type);
        }
    }
    componentWillReceiveProps(nextProps) {
        const nextType = nextProps.location.query.type,
            isSameType = (this.props.location.query.type === nextType);
        if (!isSameType) {
            const { sensitiveListStore: { setPageType } } = this.props;
            setPageType(nextType);
        }
        if (
            this.props.location.key !== nextProps.location.key ||
            !isSameType
        ) {
            this.init()
        }
    }

    componentDidMount() {
        this.init()
    }

    init = () => {
        const { sensitiveListStore: { init } } = this.props;
        init();
    }

    getContent = () => {
        const { sensitiveListStore: { searchStore, tableListStore, pageType, isDetachable, orgTreeStore } } = this.props;
        const com = (
            <div className={`hrm${pageType}`}>
                <Search store={searchStore} />
                <Table store={tableListStore} />
            </div>
        )
        if (['intercept', 'approval'].includes(pageType)) {
            if (isDetachable) {
                return (
                    <WeaLeftRightLayout
                        isNew
                        leftCom={<OrgTree store={orgTreeStore} />}
                    >
                        {com}
                    </WeaLeftRightLayout>
                )
            } else {
                return com;
            }
        } else {
            return com;
        }

    }

    getDialogContent = () => {
        const { sensitiveListStore: { formStore, pageDialogType, secTableListStore, searchGroupProps, secSearchStore } } = this.props;

        if (['wordTypeRemainset', 'wordTypeRemainsetadd'].includes(pageDialogType)) {
            return (
                <div>
                    <Search store={secSearchStore} />
                    <Table store={secTableListStore} />
                </div>
            )
        } else {
            return <div className={pageDialogType}>{formStore.form.render(searchGroupProps)}</div> 
        }
    }

    render() {
        const { sensitiveListStore: { authorityStore, topStore, dialogStore, secDialogStore, importCommon, formStore, secFormStore, searchGroupProps, authVisible, saveAuth,setAuthVisible } } = this.props;

        return (
            <Authority store={authorityStore}>
                <Top store={topStore}>
                    {this.getContent()}
                    <Dialog store={dialogStore}>
                        {this.getDialogContent()}
                    </Dialog>
                    <Dialog store={secDialogStore}>
                        {secFormStore.form.render(searchGroupProps)}
                    </Dialog>
                    <WeaAuth
                        visible={authVisible}
                        moduleName='currency'
                        title={i18n.label['531602']()}
                        conditions={toJS(formStore.conditions)}
                        onOk={saveAuth}
                        onCancel={()=>setAuthVisible(false)}
                    />
                    { importCommon.importDialog.visible &&  <ImportExcel store={importCommon} />}
                </Top>
            </Authority>
        );
    }
}