import '../../../style/report.less';
import React, {Component} from 'react';
import {inject,observer} from 'mobx-react';
import {WeaTop, WeaAlertPage, WeaRightMenu, WeaLocaleProvider} from 'ecCom';
import {Spin} from 'antd';
import {i18n} from '../../../public/i18n';
import SearchGroup from './SearchGroup';
import DataList from './DataList';
const getLabel = WeaLocaleProvider.getLabel;


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

	componentDidMount() {
        this.init();
	}

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

    init = () => {
        const {
            hrmAttendanceMonthReport: store
        } = this.props;
        store.init();
    }
    
    render(){
        const {hrmAttendanceMonthReport: store} = this.props;
        const {containerInitFinished, getTopProps, spinning, spinTip} = store;
        const {buttons, menus} = getTopProps();
        const topProps = {
            title: getLabel('390351','考勤汇总报表'),
			icon: <i className='icon-coms-hrm'/>,
			iconBgcolor: '#217346',
			showDropIcon: true,
			buttons: buttons,
			dropMenuDatas: menus
        }
        return (
            <div className="hrm_module_container report">
			{
                containerInitFinished.init && containerInitFinished.authorized &&
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@rwmm61`} spinning={spinning} tip={spinTip}>
                    <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@hvg2df`} {...topProps}>
                        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@n5ukhf`} datas={menus} >
                            <div className='layout'>
                                <div className='layoutContent includeFoot'>
                                    <SearchGroup ecId={`${this && this.props && this.props.ecId || ''}_SearchGroup@gfx6d5`} store={store}/>
                                    <DataList ecId={`${this && this.props && this.props.ecId || ''}_DataList@6wla5c`} store={store} />
                                </div>
                            </div>
                        </WeaRightMenu>
                    </WeaTop>
                </Spin>
			}
			{
				containerInitFinished.init && !containerInitFinished.authorized && 
              	<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@jwm3un`}>
                  	<div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
              	</WeaAlertPage>
			}
            </div>
        )
    }
}