import '../../style/scheduleSetting.less';
import React, {Component} from 'react';
import {inject,observer} from 'mobx-react';
import {WeaTop, WeaLocaleProvider} from 'ecCom';
import Tabs from '../../../hrmengine/coms/Tabs';
import {Button, Spin} from 'antd';
import {i18n} from '../../public/i18n';
import Setting from './Setting';
import Analysis from './Analysis';
const getLabel = WeaLocaleProvider.getLabel;

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

	componentDidMount() {
        this.init()
    }

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

    init = () => {
        const {
            hrmScheduleSetting: store,
            params
        } = this.props;
        store.init(params.id);
    }

    render(){
        const {
			hrmScheduleSetting: store
        } = this.props;
        const {
            groupName,
            groupId,
            tabConfig,
            save,
            spinning,
            spinTip
        } = store;
        const config = store.toJS(tabConfig);
        const tabProps = {
            tabConfig: config,
            tabChangeHandle: config.tabChangeHandle,
            activeTabInfo: {
                activeTabKey: config.activeTabKey,
                activeTabIndex: store.getTabIndex(config.tabs, config.activeTabKey)
            },
            store: store
        }

        if(groupName){document.title = `${getLabel('16695','排班设置')}:${groupName || ''}`}

        const topProps = {
			title: `${getLabel('16695','排班设置')}:${groupName || ''}`,
			icon: <i className='icon-coms-hrm'/>,
			iconBgcolor: '#217346',
			showDropIcon: true
        }
        const generateButtons = () =>{
            const props = {};
            let buttons = [];
            if(config.activeTabKey === '1'){
                buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@z45gps`} type='primary' op='save' onClick={() => save()}>{i18n.label.save()}</Button>)
            }
            Object.assign(props, {
                buttons,
                dropMenuDatas: [...store.convertToMenus(buttons),{
                    key: "2",
                    icon: <i className="icon-coms-Print-log" />,
                    content: "日志",
                    onClick: key => window.setLogViewProps({logSmallType: '10000',targetId:groupId})
                }
                ]
            })
            return props;
        }
        
        return (
            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@umfc0q`} spinning={spinning} tip={spinTip}>
                <div id='scheduleSetting' className="hrm_module_container scheduleSetting">
                    <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@1k8vg8`} {...topProps} {...generateButtons()}>
                        <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@9iu6ne`} {...tabProps}>
                            <Setting ecId={`${this && this.props && this.props.ecId || ''}_Setting@j6daol`} />
                            <Analysis ecId={`${this && this.props && this.props.ecId || ''}_Analysis@rcm4na`} />
                        </Tabs>
                    </WeaTop>
                </div>
            </Spin>
        )
    }
}