import '../../style/shift.less';
import React from 'react';
import { inject, observer} from 'mobx-react';
import {WeaTop, WeaLocaleProvider} from 'ecCom';
import {Spin} from 'antd';
import Left from './Left';
import Right from './Right';
const getLabel = WeaLocaleProvider.getLabel;

@inject('hrmShift')
@observer
export default class Shift extends React.Component {
    componentDidMount(){
        this.init();
    }

    componentWillReceiveProps(nextProps) {
        if(this.props.location.key !== nextProps.location.key) {
            this.init();
        }
    }

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

    render(){
        const {hrmShift: store} = this.props;
        const {hrmName, spinning} = store;
        let title = '';
        title= `${hrmName || `'${getLabel('130758',"我")}'`}${getLabel('125404',"的考勤")}`;

        const topProps = {
            title: getLabel('125798',"我的排班"),
			icon: <i className='icon-coms-hrm'/>,
			iconBgcolor: '#217346',
			showDropIcon: true,
			buttons: [],
			dropMenuDatas: []
        }
        return (
            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@bnenbl`} spinning={spinning}>
                <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@zfv3uk`} {...topProps}>
                    <div className='shift'>
                        <Left ecId={`${this && this.props && this.props.ecId || ''}_Left@fu2lgp`} store={store} />
                        <Right ecId={`${this && this.props && this.props.ecId || ''}_Right@bupa3b`} store={store} />
                    </div>
                </WeaTop>
            </Spin>
        )
    }
}