import React from 'react';
import { inject, observer } from 'mobx-react';
import {routerShape} from 'react-router';
import { Button} from 'antd';
import {Condition} from '../list/listCondition';
import {WeaRightMenu,WeaTop,WeaErrorPage,WeaTools,WeaAlertPage,WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

@inject('prjMonitorStore')
@observer
class ProjectMonitor extends React.Component {
    static contextTypes = {
        router: routerShape
    }
    constructor(props) {
        super(props);
	}
    componentDidMount(){
        const { prjMonitorStore } = this.props;
        const {initDatas}  = prjMonitorStore;
        WeaTools.callApi('/api/proj/pcproject/getPrjMonitorRight', 'GET', {}).then(data=>{
            prjMonitorStore.hasRight = data.isright;
            prjMonitorStore.verified = true;
            if(data.isright){
                initDatas({},true);
                //initTreeDatas();
            }
        });
    }
    componentWillReceiveProps(nextProps){
        const { prjMonitorStore } = this.props;
        const {initDatas}  = prjMonitorStore;
        if(this.props.location.key !== nextProps.location.key){
            WeaTools.callApi('/api/proj/pcproject/getPrjMonitorRight', 'GET', {}).then(data=>{
                prjMonitorStore.hasRight = data.isright;
                prjMonitorStore.verified = true;
                if(data.isright){
                    initDatas({},true);
                    //initTreeDatas();
                }
            });
        }
    }
    resetHeight(height){
        jQuery(".prj-query-condition").height(height - 60);
    }
    render(){
        const {prjMonitorStore} = this.props;
        const {loading,form,verified,hasRight} = prjMonitorStore;
        if (verified && !hasRight) {
            return (<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@wptzwk`} >
                    <div style={{color : '#000'}}>
                        {getLabel(2012,"对不起，您暂时没有权限！")}
                    </div>
                </WeaAlertPage>
            )
        } 
        if (verified && hasRight) {
        return (
            <div className='prj-query'>
            <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@ujirmt`} datas={this.getRightMenu()}  >
                <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@cgl2xz`}
                    title={getLabel(19870,"项目监控")}
                    loading={loading}
                    icon={<i className='icon-coms-project' />}
                    iconBgcolor='#217346'
                    buttons={[]}
                    getHeight={this.resetHeight.bind(this)}
                    buttonSpace={10}
                    showDropIcon={true}
                    dropMenuDatas={this.getRightMenu()}
                >
                <div className='prj-query-condition'>
                        <Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@z2gals`} listStore={prjMonitorStore} form={form}></Condition>
                    </div>
                    <div className='prj-query-btns'>
                        {this.getSearchButtons()}
                    </div>
                </WeaTop>
            </WeaRightMenu>
            </div>
            )
        }
        return (<div></div>)

    }

    getRightMenu(){
        let btns = [];
    	btns.push({
            key: "search",
    		icon: <i className='icon-coms-search'/>,
            content:getLabel(197,"搜索"),
            onClick: this.forwardQueryResult.bind(this)
    	});
    	return btns;
    }
    getSearchButtons() {
        const { prjMonitorStore } = this.props;
        const {clearFormFields,setSelectedTreeKey} = prjMonitorStore;
        const btnStyle = {borderRadius: 3, minWidth: 80}
        return [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@yd2h4a@search`} type="primary" style={btnStyle} onClick={this.forwardQueryResult.bind(this)}>{getLabel(197,"搜索")}</Button>),
            (<span style={{width:'15px', display:'inline-block'}}></span>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@96hpj6@reset`} type="ghost" style={btnStyle} onClick={()=>{clearFormFields;setSelectedTreeKey&&setSelectedTreeKey('-1')}}>{getLabel(2022,"重置")}</Button>)
        ]
    }
    forwardQueryResult(){
        const path = "/monitorResult";
        this.context.router.push({
            pathname: "/main/prj"+path
        });
    }
}

export default WeaTools.tryCatch(React,
    props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@b2h5v0`} msg={ props.error ? props.error : getLabel(383324,"对不起，该页面异常，请联系管理员")} />,
    {error: ""}
)(ProjectMonitor);