import React from 'react';
import { inject, observer } from 'mobx-react';
import { Button,  } from 'antd';
import {toJS} from "mobx";
import {WeaTableNew} from 'comsMobx';
import {WeaRightMenu,WeaTop,WeaTab,WeaErrorPage,WeaTools,WeaProgress,WeaBrowser,WeaLocaleProvider} from 'ecCom';
const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;
import {Condition,getAdButtons} from './list/listCondition';

@inject('projectReportStore')
@observer
class ProjectReport extends React.Component {
    constructor(props) {
        super(props);
    }
    componentDidMount(){
        const {projectReportStore,params } = this.props;
        const {doSearch,initData} = projectReportStore;
        initData(params);
        doSearch(params);
    }
    componentWillReceiveProps(nextProps){
        const keyOld = this.props.location.key;
		const keyNew = nextProps.location.key;
		if(keyOld !== keyNew) {
            const {projectReportStore,params } = nextProps;
            const {doSearch,initData} = projectReportStore;
            initData(params);
            doSearch(params);
        }
    }
    componentWillUnmount(){
        const {projectReportStore,params } = this.props;
        projectReportStore.clearStatus();
    }
    render(){
        const {projectReportStore} = this.props;
        const {title,loading,form,showSearchAd,tableStore,reLoad} = projectReportStore;
        return (
            <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@bp0tk5`} datas={this.getRightMenu()}   onClick={this.onRightMenuClick.bind(this)}  
            collectParams={{
                favname:'',
                favouritetype: "3",
                objid: 0,    
                importantlevel:1,
              }}>
                <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@vlh844`}
                    title={title}
                    loading={loading}
                    icon={<i className='icon-coms-project' />}
                    iconBgcolor='#217346'
                    buttons={[]}
                    buttonSpace={10}
                    showDropIcon={true}
                    dropMenuDatas={this.getRightMenu()}
                    onDropMenuClick={this.onRightMenuClick.bind(this)} 
                >
                    <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@c2pp0s`}
                        buttonsAd={getAdButtons(projectReportStore,this.props.ecId || '')}
                        searchType={['advanced']}
                        setShowSearchAd={bool=>{projectReportStore.setShowSearchAd(bool)}}
                        hideSearchAd={()=> projectReportStore.setShowSearchAd(false)}
                        searchsAd={
                            <div><Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@j1ltze`} listStore={projectReportStore} form={form} onEnterSearch={this.onEnterSearch} ></Condition></div>
                        }
                        showSearchAd={showSearchAd}
                        onSearch={v=>{prjExecuteStore.doSearch()}}
                        advanceHeight={100}
                    />
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@w7p0f7`} 
                        comsWeaTableStore={tableStore}
                        hasOrder={true}
                        needScroll={true}
                        getColumns={c=>this.reRenderColumns(c)}
                        register_table={()=>reLoad()}
                    />
                </WeaTop>
            </WeaRightMenu>
        )
    }

    onEnterSearch = ()=>{
        const projectReportStore = this.props;
        projectReportStore.doSearch();
        projectReportStore.setShowSearchAd(false);
    }

    reRenderColumns(columns){
        columns.forEach(c=>{
            if(c.dataIndex=='resultcount'){
                c.render = function(text, record){
                    if(record.resultcountspan){
                        return  <span  className='wea-prj-progressStyle' >
                            <WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@ubhejz`} percent={record.resultcountspan}   />
                        </span>
                    }
                }
            } else {
            //   c.render = function(text, record){
            //       let valueSpan = record[c.dataIndex + "span"] !== undefined ? record[c.dataIndex + "span"] : record[c.dataIndex];
            //       return <span dangerouslySetInnerHTML={{__html: valueSpan}}></span>
            //     }
            }
        })
        return columns;
    }
    getRightMenu(){
        const {projectReportStore} = this.props;
        const {rightMenu} = projectReportStore;
        let btnArr = [];
        rightMenu && rightMenu.length>0 && rightMenu.map(m=>{
            btnArr.push({
                icon: <i className={m.menuIcon} />,
                content: m.menuName,
            })
        });
    	return btnArr
    }
    onRightMenuClick(key){
        const {projectReportStore} = this.props;
        const {rightMenu} = projectReportStore;
        let that = this;
        rightMenu &&  rightMenu.length>0  && rightMenu.map((m,i)=>{
        	if(Number(key) == i){
                if(m.type == "BTN_SEARCH"){ 
                    projectReportStore.doSearch();
                }
            }
        });
    }

}

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