import '../../style/shiftManager.less';
import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { WeaTop, WeaAlertPage, WeaLeftRightLayout } from 'ecCom';
import { i18n } from '../../public/i18n';
import Content from './Content';
// import {Tabs, OrganizationTree} from 'weaHrmComsPublic';
import { Tabs, OrganizationTree } from '../../../hrmComsPublic/index';
import { Dialog, CenterSpin } from '../../public/valhalla/components/index.js';
import ReminderSetting from './reminder/ReminderSetting.js';
import Msg from "./Msg.js";

@inject('hrmShiftManager')
@observer
export default class ShiftManager extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount () {
        this.init();
    }

    componentWillReceiveProps (nextProps) {
        if (this.props.location.key !== nextProps.location.key) {
            this.init();
            this.refs.orgTree && this.refs.orgTree.refs.tree.fetchData();
        }
    }

    init = () => {
        const {
            hrmShiftManager: store
        } = this.props;
        store.checkAuthorized('kq/shiftManagement', null, store.init, null, true);
    }

    render () {
        // const {Tabs, OrganizationTree} = window.weaHrmComsPublic;
        const {
            hrmShiftManager: store
        } = this.props;
        const {
            containerInitFinished,
            selectedSubCompany,
            orgTreeProps,
            getTopProps,
            mainTabConfig,
            tableMultiDelete,
            dialogStore,
            remindLoaing,
            dialogStore1,
            msgType,
            msgDatas,
        } = store;
        let title = i18n.label['388537']();
        if (containerInitFinished.detachable && selectedSubCompany != null && selectedSubCompany.name)
            title = `${title} - ${selectedSubCompany.name}`;
        const { buttons, menus } = getTopProps;
        const topProps = {
            title,
            icon: <i className='icon-coms-hrm' />,
            iconBgcolor: '#217346',
            showDropIcon: true,
            buttons: buttons,
            dropMenuDatas: menus
        }
        const tabProps = {
            tabConfig: mainTabConfig,
            activeTabInfo: {
                activeTabKey: mainTabConfig.activeTabKey,
                activeTabIndex: 0
            },
            rightMenu: menus,
            store: store
        }

        return (
            <div className="hrm_module_container shiftManager">
                {
                    containerInitFinished.init && containerInitFinished.authorized &&
                    <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@2h657f`} {...topProps}>
                        {
                            containerInitFinished.detachable
                                ?
                                <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@dvqlko`}
                                    leftWidth={320}
                                    leftCom={<OrganizationTree ecId={`${this && this.props && this.props.ecId || ''}_OrganizationTree@7wjodz`} {...orgTreeProps} ref='orgTree' />}>
                                    <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@as3mbc`} {...tabProps}>
                                        <Content ecId={`${this && this.props && this.props.ecId || ''}_Content@6walld`} store={store} />
                                    </Tabs>
                                </WeaLeftRightLayout>
                                :
                                <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@3uqh9v`} {...tabProps}>
                                    <Content ecId={`${this && this.props && this.props.ecId || ''}_Content@8gm9ab`} store={store} />
                                </Tabs>
                        }
                    </WeaTop>
                }
                {
                    containerInitFinished.init && !containerInitFinished.authorized &&
                    <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@xsixlj`}>
                        <div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
                    </WeaAlertPage>
                }
                {
                    dialogStore.visible && (
                        <Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@yu81s4`} store={dialogStore}>
                            <CenterSpin ecId={`${this && this.props && this.props.ecId || ''}_CenterSpin@fhrgs3`} loading={remindLoaing}>
                                <ReminderSetting ecId={`${this && this.props && this.props.ecId || ''}_ReminderSetting@lgmzdz`} store={store} />
                            </CenterSpin>
                        </Dialog>
                    )
                }
                {
                    dialogStore1.visible && (
                        <Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@xhfmmx`} store={dialogStore1}>
                            <Msg ecId={`${this && this.props && this.props.ecId || ''}_Msg@frwt4y`} type={msgType} datas={msgDatas} />
                        </Dialog>
                    )
                }
            </div>
        )
    }
}