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

@inject("queryTaskStore")

@observer
class QueryTaskCondition extends React.Component {
    static contextTypes = {
        router: routerShape
    }
    constructor(props) {
        super(props);
    }
    resetHeight(height){
        jQuery(".prj-query-condition").height(height - 60);
    }
    componentDidMount() {
        const {queryTaskStore} = this.props;
        queryTaskStore.getQueryCondition({},true);
    }
    componentWillReceiveProps(nextProps){
        if(this.props.location.key !== nextProps.location.key){
            const {queryTaskStore} = this.props;
            queryTaskStore.getQueryCondition({},true);
        }
    }
    render() {
        const { queryTaskStore } = this.props;
        const { loading,title, form} = queryTaskStore;
        // const formParams = form.getFormParams();    //Mobx-form的Bug，form传给子组件时需外层调用下取值，否则查询条件变了组件不会render
        // const cusFormParams = customForm && customForm.getFormParams();
        return (
            <div className='prj-query'>
            	<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@qhliqk`} datas={this.getRightMenu()}>
                <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@tflio7`}
                	title={getLabel(24457,"查询任务")}
                	loading={loading}
                	icon={<i className='icon-coms-project' />}
                	iconBgcolor='#217346'
                    getHeight={this.resetHeight.bind(this)}
                	buttons={[]}
                	buttonSpace={10}
                	showDropIcon={true}
                	dropMenuDatas={this.getRightMenu()} >
                        <div className='prj-query-condition'>
                           <Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@pghpdy`} listStore={queryTaskStore} form={form}></Condition>
                        </div>
                        <div className='prj-query-btns'>
                            {this.getSearchButtons()}
                        </div>
                </WeaTop>
                </WeaRightMenu>
            </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 { queryTaskStore } = this.props;
        const {clearFormFields } = queryTaskStore;
        const btnStyle = {borderRadius: 3, minWidth: 80}
        return [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@gz3pxh@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@q39xyn@reset`} type="ghost" style={btnStyle} onClick={()=>{clearFormFields()}}>{getLabel(2022,"重置")}</Button>)
        ]
    }
    forwardQueryResult(){
        const path = "/queryTaskResult";
        this.context.router.push({
            pathname: "/main/prj"+path
        });
    }
}

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