import React from 'react';
import { Button, Tabs, Card, Tooltip, Row, Col, Spin, Menu, Icon  } from 'antd';
import { inject, observer } from 'mobx-react';
import { WeaTop, WeaInputSearch, WeaLeftRightLayout, WeaNewScroll, WeaEchart, WeaDropdown, WeaProgress, WeaNewScrollPagination, WeaSelect, WeaAlertPage, WeaTab, WeaRightMenu } from 'ecCom';
import {routerShape} from 'react-router';
const { SubMenu } = Menu;
import AddPrjGroupDialog from '../dialog/addPrjGroupDialog';
import {toJS} from 'mobx';
import {Condition,getAdButtons} from '../list/portalCondition';
import {WeaTableNew} from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
import { WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import loadjs from 'loadjs';
import "./index.less";
import ShareDialog from '../dialog/shareDialog'
import ExchangeDialog from '../dialog/exchangeDialog'
import ProjectDialog from '../dialog/projectDialog'
import ItemList from "../projectBoard/ItemList";
import ProjectCard from "./projectCard";
@inject("projectPortalStore","queryPrjStore","projectBoardStore")
@observer
class ProjectPortal extends React.Component {
    static contextTypes = {
        router: routerShape
    }
    constructor(props) {
        super(props);
        this.state = {
            current: 'allPrj',
            ctrlHeight : 200,
            viewScope : "card",
            showSearchAd : false,
            selectedKey : 0
        };
    }
    componentDidMount() {
        const {projectPortalStore, queryPrjStore, location:{query}, projectBoardStore} = this.props;
        queryPrjStore.initDatas(query);
        projectPortalStore.initDatas({viewScope:this.state.viewScope});
        projectBoardStore.initList();
        // if (!loadjs.isDefined('weaPrjEcharts')) {
            // loadjs(['/js/echart/echarts.min.js'], 'weaPrjEcharts', {
            //     success: () => {
            //         projectPortalStore.initDatas({viewScope:this.state.viewScope});
            //     }
            // });
        // } else {
        //     projectPortalStore.initDatas({viewScope:this.state.viewScope});
        // }
        // console.log(this.refs);
        // this.setState({
        //     ctrlHeight: this.refs.searGroup.height
        // });
        
    }

    componentWillReceiveProps(nextProps){
        const keyOld = this.props.location.key;
        const keyNew = nextProps.location.key;
        const query = nextProps.location.query;
        if(keyOld !== keyNew) {
            const { projectPortalStore, queryPrjStore, projectBoardStore } = nextProps;
            queryPrjStore.clearStatus();
            queryPrjStore.initDatas(query);
            projectPortalStore.clearStatus();
            projectPortalStore.prjGroupStore1.setId('allPrj');
            this.setState({viewScope : "card",current: 'allPrj'});
            projectPortalStore.initDatas({viewScope:this.state.viewScope});
            projectBoardStore.initList();
            // if (!loadjs.isDefined('weaPrjEcharts')) {
            //     loadjs(['/js/echart/echarts.min.js'], 'weaPrjEcharts', {
            //         success: () => {
            //             projectPortalStore.initDatas({viewScope:this.state.viewScope});
            //             projectBoardStore.initList();
            //         }
            //     });
            // } else {
            //     projectPortalStore.initDatas({viewScope:this.state.viewScope});
            //     projectBoardStore.initList();
            // }
        }
    }

    componentWillUnmount (){
        const { queryPrjStore, projectPortalStore } = this.props;
        queryPrjStore.clearStatus();
        projectPortalStore.clearStatus();
        projectPortalStore.prjGroupStore1.setId('allPrj');
        this.setState({viewScope : "card",current: 'allPrj',selectedKey:0});
    }
   
    render() {
        const { projectPortalStore, queryPrjStore, projectBoardStore } = this.props;
        const { title, prjGroupStore, groups, prjGroupStore1, tableStore, reLoad, loadding, exchangeStore, projectInfoStore, quickSearch, counts, initDatas, isLoadJs, prjtype } = projectPortalStore;
        const { form, showSearchAd } = queryPrjStore;
        let prjdatas =  this.getProjects();
        const formParams = form.getFormParams() || {};
        const topTab = [
            {
              title: getLabel('31458','分组') ,
              viewcondition: "0"
            },
            {
              title: getLabel('320','列表'),
              viewcondition: "1"
            }
          ];
        return (
            <div className="prj-portal-page">
                <WeaRightMenu>
                    <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@1gdr8p`} title={getLabel('387831','项目门户')}  icon={<i className='icon-coms-project' />} buttons={this.getTopButtons()} iconBgcolor='#217346'/>
                    <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@uw9p6t`}
                        leftWidth={300}
                        leftCom={
                            <div className="prj-portal-left">
                                <div className="search-group" ref="searchGroup" style={{height:"100%"}}>
                                    {/* <WeaInputSearch
                                        style={{width:"100%"}}
                                        placeholder={getLabel('511884','搜索分组')}
                                        onSearch={(v) =>{quickSearch(v)}}
                                    /> */}
                                    <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@wj0hak`}
                                        style={{backgroundColor:'#f9f9f9'}}
                                        datas={topTab}
                                        keyParam="viewcondition" //主键
                                        selectedKey={this.state.selectedKey}
                                        onChange={v => {
                                            this.setState({ selectedKey: v });
                                            queryPrjStore.form.resetConditionValue();
                                            queryPrjStore.form.updateFields({'prjtype':'-1'});
                                            if(v==0){
                                                initDatas({viewScope:this.state.viewScope});
                                            }else if(v==1){
                                                projectBoardStore.initList();
                                            }
                                        }}
                                    />
                                    <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@4wg24v`}
                                        buttonsAd={getAdButtons(queryPrjStore,projectPortalStore,() =>{
                                            if(this.state.selectedKey==0){
                                                initDatas(formParams);
                                            }else if(this.state.selectedKey==1){
                                                projectBoardStore.getProjectList1(formParams);
                                            }
                                        })}
                                        searchType={['base','advanced']}
                                        showSearchAd={showSearchAd}
                                        searchsAd={
                                            <div><Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@sw1t78`} listStore={queryPrjStore} form={form} onEnterSearch={this.onEnterSearch} ></Condition></div>
                                        }
                                        setShowSearchAd={bool=>{queryPrjStore.setShowSearchAd(bool)}}
                                        keyParam="key"
                                        searchsBaseValue={formParams.name}
                                        onSearchChange={v=>{queryPrjStore.appendFormFields({name:{value:v}})}}
                                        onSearch={() =>{
                                            if(this.state.selectedKey==0){
                                                initDatas(formParams);
                                            }else if(this.state.selectedKey==1){
                                                projectBoardStore.getProjectList1(formParams);
                                            }
                                        }}
                                        leftStyle={{paddingRight: 350}}
                                    />
                                    {
                                        this.state.selectedKey==0&&
                                        <div   style={{ width: '100%',height:"calc(100% - 20px)" }} >
                                            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@m7seuy`}  height={"100%"} onScroll={(e)=>{ this.setState({ scrollTop:e.target.scrollTop, }) }}>
                                                <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@606msa`}
                                                    theme={'light'}
                                                    onClick={this.handleClick}
                                                    style={{ width: '100%'}}
                                                    defaultOpenKeys={['sub1']}
                                                    selectedKeys={[this.state.current]}
                                                    mode="inline"
                                                    >
                                                    <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@dz1uzu`} key="allPrj">
                                                        <i className="icon-coms-Modular-o" />
                                                        <span>{getLabel('518255','全部项目')}</span>
                                                        <span style={{color:'rgb(197, 197, 197)',float:'right'}}>{counts.allPrj}</span>
                                                    </Menu.Item>
                                                    <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@3rh2ed`} key="mineStar">
                                                        <i className="icon-coms-Collection" />
                                                        <span>{getLabel('518251','我的星标')}</span>
                                                        <span style={{color:'rgb(197, 197, 197)',float:'right'}}>{counts.mineStar}</span>
                                                    </Menu.Item>
                                                    <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@6svx8z`} key="myPrj">
                                                        <i className="icon-coms-yonghu" />
                                                        <span>{getLabel('83231','我参与的')}</span>
                                                        <span style={{color:'rgb(197, 197, 197)',float:'right'}}>{counts.myPrj}</span>
                                                    </Menu.Item>
                                                    <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@egf0x6`} key="expPrj">
                                                        <i className="icon-coms-File" />
                                                        <span>{getLabel('16408','项目执行')}</span>
                                                        <span style={{color:'rgb(197, 197, 197)',float:'right'}}>{counts.expPrj}</span>
                                                    </Menu.Item>
                                                    <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@vwlj7y`} key="endPrj">
                                                        <i className="icon-coms-currency-Task" />
                                                        <span>{getLabel('518252','已完成项目')}</span>
                                                        <span style={{color:'rgb(197, 197, 197)',float:'right'}}>{counts.endPrj}</span>
                                                    </Menu.Item>
                                                    <SubMenu ecId={`${this && this.props && this.props.ecId || ''}_SubMenu@eky2jj`}
                                                        key="sub1"
                                                        title={
                                                        <span>
                                                            <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@mjwnlx`} type="hdd" />
                                                            <span>{getLabel('518256','项目分组')}</span>
                                                            <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@xdwdrh`} type="plus-square" className="add-icon" onClick={(e) =>{e.stopPropagation() ;prjGroupStore.handlePrjGroupDialog(true)}} />
                                                        </span>
                                                        }
                                                    >
                                                        {this.getGroups(groups)}
                                                    </SubMenu>
                                                </Menu>
                                            </WeaNewScroll>
                                        </div>
                                    }
                                    {
                                        this.state.selectedKey==1&&
                                        <ItemList ecId={`${this && this.props && this.props.ecId || ''}_ItemList@c6zywt`} title={getLabel(101, "项目")} store={projectBoardStore} fromPortal={true} formParams={formParams}/>
                                    }
                                    <AddPrjGroupDialog ecId={`${this && this.props && this.props.ecId || ''}_AddPrjGroupDialog@0jp2bb`} projectPortalStore={projectPortalStore} prjGroupStore={prjGroupStore} />
                                    <AddPrjGroupDialog ecId={`${this && this.props && this.props.ecId || ''}_AddPrjGroupDialog@dikpkv`} projectPortalStore={projectPortalStore} prjGroupStore={prjGroupStore1} />
                                </div>   
                            </div>
                        }
                        // onCollapse={showLeft => console.log('showLeft:', showLeft)}
                    >
                    {
                        this.state.selectedKey==0&&this.state.viewScope=="card" && prjdatas.length==0 && 
                        <div style={{height: window.innerHeight}}>
                            <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@ba11b8`} icon="icon-coms-blank" >
                                <div style={{color : '#000'}}>
                                    {getLabel(83553, '暂无数据')}
                                </div>
                            </WeaAlertPage>
                        </div>
                    }
                    {
                        this.state.selectedKey==0&&this.state.viewScope=="card" && prjdatas.length > 0 && 
                        <WeaNewScrollPagination ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScrollPagination@ks92hg`}  height={"calc(100% - 55px)"} className="prj-portal-right" loadding={loadding}   onScrollEnd={this.onScrollEnd}>
                            {
                                prjdatas.map((item,i)=>{
                                    return <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@d060iz@${i}`}>{item}</Row>
                                })
                            }
                        </WeaNewScrollPagination>
                    }    
                    {
                            this.state.selectedKey==0&&this.state.viewScope=="list" && <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@qguy17`} 
                            comsWeaTableStore={tableStore}
                            hasOrder={true}
                            needScroll={true}
                            register_table={()=>reLoad()}
                            getColumns={c=>this.reRenderColumns(c)}
                            tableWidth={this.tableWidth}
                            onOperatesClick={this.onOperatesClick.bind(this)}
                        />
                    }
                    {
                        this.state.selectedKey==1&&(parseInt(projectBoardStore.prjid)>0?
                        <ProjectCard ecId={`${this && this.props && this.props.ecId || ''}_ProjectCard@98nxoq`} prjid={projectBoardStore.prjid} fromPortal={true} dellCallBack={() =>{projectBoardStore.getProjectList1(formParams);}} changeCallBack={() =>{projectBoardStore.getProjectList1(formParams);}} ></ProjectCard>
                        :
                        <div style={{height: window.innerHeight}}>
                            <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@penn7u`} icon="icon-coms-blank" >
                                <div style={{color : '#000'}}>
                                    {getLabel(83553, '暂无数据')}
                                </div>
                            </WeaAlertPage>
                        </div>)
                    }
                    </WeaLeftRightLayout>
                    <ShareDialog ecId={`${this && this.props && this.props.ecId || ''}_ShareDialog@7xkyz5`} contentStore={projectPortalStore} />
                    <ExchangeDialog ecId={`${this && this.props && this.props.ecId || ''}_ExchangeDialog@2ndzbm`} contentStore={exchangeStore}  />
                    <ProjectDialog ecId={`${this && this.props && this.props.ecId || ''}_ProjectDialog@phl8ng`}  contentStore={projectInfoStore}/>
                </WeaRightMenu>
            </div>
        )
    }

    onEnterSearch=() =>{
        const { projectPortalStore,queryPrjStore } = this.props;
        const { form } = queryPrjStore;
        const formParams = form.getFormParams() || {};
        projectPortalStore.initDatas(formParams);
        queryPrjStore.setShowSearhAd(false);
    }
    onOperatesClick(record,index,operate,flag){
        const {projectPortalStore} = this.props;
        const {shareStore,exchangeStore,projectInfoStore} = projectPortalStore;
        let _href = operate && operate.href ? operate.href : "";
		let fn = _href.replace("javascript:","");
		fn = fn.substring(0,fn.indexOf('('));
        let that = this;
        if(fn != ""){
			if("onShare"==fn){  //共享
                shareStore.handleShareDialog(true,"prj",record.randomFieldId)
            }else if('onNormal' == fn){   //正常
                projectPortalStore.doPlanOpt({method:'normal',prjid:record.randomFieldId})
            }else if('onOver' == fn){   //延期
                projectPortalStore.doPlanOpt({method:'delay',prjid:record.randomFieldId})
            }else if('onFinish' == fn){   //完成
                projectPortalStore.doPlanOpt({method:'complete',prjid:record.randomFieldId})            
            }else if('onFrozen' == fn){   //冻结
                projectPortalStore.doPlanOpt({method:'freeze',prjid:record.randomFieldId})                            
            }else if('onEdit' == fn){   //编辑
                projectInfoStore.handleDialog(true,record.randomFieldId,{viewtype:'edit',prjid:record.randomFieldId}) ;                                              
            }else if('onListTask' == fn){   //任务列表
                
            }else if('onDiscuss' == fn){   //相关交流
                exchangeStore.handleExchangeDialog(true,"prj",record.randomFieldId,{})
            }else if('onDel' == fn){   //项目删除
                projectPortalStore.delPrjInfo({method:"del",prjid:record.randomFieldId,from:"mymanagerproject"})
            }
        }      
    }

    onScrollEnd = () => {
        const { projectPortalStore, queryPrjStore } = this.props;
        const { searchNextPage } = projectPortalStore;
        const { form } = queryPrjStore;
        const formParams = form.getFormParams() || {};
        searchNextPage(formParams);
    }

    tableWidth = (columns) => {
        let width = 0;
        let cols = 0;
        columns.map(col => {
          if (col.display === 'true') {
            let oldwidth = col.oldWidth || '10%';
            let widthInt = parseFloat(oldwidth.replace('%', ''));
            if (widthInt <= 0) {
              widthInt = 10;
            }
            width += widthInt;
            cols++
          }
        })
        //超过10列，才出现滚动条，width>100才出现滚动条
        if(cols<=10){
            width = 100 ;
        }
        return `${width}%`;
    }

    reRenderColumns(columns){
        columns.forEach((c,i)=>{
            if(c.dataIndex=='finish'){
                c.render = function(text, record){
                    return  <span  className='wea-prj-progressStyle' >
                    <WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@938jt0@${i}`} percent={record.finish}  strokeColor={record.finishspan} />
                </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;
    }

    handleClick = e => {
        const {projectPortalStore,queryPrjStore} = this.props;
        queryPrjStore.form.resetConditionValue();
        queryPrjStore.form.updateFields({'prjtype':'-1'});
        projectPortalStore.setPrjType('-1');
        projectPortalStore.initDatas({groupid:e.key});
        projectPortalStore.prjGroupStore1.setId(e.key);
        this.setState({
          current: e.key,
        });
    };

    getProjects = () => {
        let row = [];
        let col= [];
        const { prjDatas, collectProject, counts, getPrjSearchDatas } = this.props.projectPortalStore;
        let datas = prjDatas;
        datas.map((item,index)=>{
            let data = [];
            let data2 = [];
            let dataall = [];
            for (var i = 0; i < item.xdata.length; i++) {
                
                data.push([item.xdata[i],item.data[i]]);
                data2.push([item.xdata[i],item.data2[i]]);
                dataall.push([item.xdata[i],item.dataall[i]]);
            }

            col.push(
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@i648jy@${index}`} span="6">
                    <Card ecId={`${this && this.props && this.props.ecId || ''}_Card@yozrr5@${index}`} bordered={false}>
                        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@u3m0vh@${index}`}>
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4xvm27@${index}`} span="19">
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@aiw2n2@${index}`}>
                                    <span className="prj-card-title" title={item.name} onClick={()=>{this.forwardProjectCard("?prjid="+item.id)}}>{item.name}</span>
                                </Row>
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@v34nme@${index}`}>
                                    <span className="prj-card-msg">{item.dynamic}</span>
                                </Row>
                            </Col>
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@48ryto@${index}`} span="5">
                                <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@f4hobz@${index}`} placement="bottom" title={item.hrmname}>
                                    <a href={'javaScript:openhrm('+item.hrmid+');'} onClick={e => window.pointerXY(e)} >
                                        <img src={item.hrmimg} className="manager-img" />
                                    </a>
                                </Tooltip>
                            </Col>
                        </Row>
                        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@jgcnw8@${index}`}>
                            <div style={{height:"200px",padding:"0px"}}>
                                <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@dgebm1@${index}`} ref="chart2" chartName={""} 
                                option={{
                                    xAxis: {
                                        type: 'category',
                                        // boundaryGap: [0, 0],
                                     
                                        axisPointer: {
                                            value: '2016-10-7',
                                            snap: true,
                                            lineStyle: {
                                                color: '#004E52',
                                                opacity: 0.5,
                                                width: 0
                                            },
                                            label: {
                                                show: true,
                                                
                                                backgroundColor: '#004E52'
                                            },
                                            handle: {
                                                show: true,
                                                color: '#004E52'
                                            }
                                        },
                                        splitLine: {
                                            show: false
                                        }
                                    },
                                    tooltip: {
                                        extraCssText:"font-size:6px"
                                    },
                                    yAxis: {
                                        data : [2,5,10,20,50,100],
                                        type: 'value',
                                        axisTick: {
                                            inside: true
                                        },
                                        splitLine: {
                                            show: false
                                        },
                                        axisLabel: {
                                            inside: true,
                                        },
                                        z: 10
                                    },
                                  
                                    grid: {
                                        top: 15,
                                        left: 15,
                                        right: 15,
                                        bottom: 50,
                                        height: 160
                                    },
                                    series: [
                                        {
                                            name:getLabel('518653','超期数量'),
                                            type:'line',
                                            smooth: true,
                                            symbol: 'circle',
                                            symbolSize: 6,
                                            sampling: 'average',
                                            // itemStyle: {
                                            //     normal: {
                                            //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            //             offset: 0,
                                            //             color: '#e87979'
                                            //         }, {
                                            //             offset: 1,
                                            //             color: '#f1f1f1'
                                            //         }])
                                            //     }
                                            // },
                                            stack: 'a',
                                            areaStyle: {
                                                normal:'#8ec6ad'
                                            },
                                            data: data2,
                                        },{
                                            name:getLabel('518343','已完成数量'),
                                            type:'line',
                                            smooth: true,
                                            symbol: 'circle',
                                            symbolSize: 6,
                                            sampling: 'average',
                                            // itemStyle: {
                                            //     normal: {
                                            //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            //             offset: 0,
                                            //             color: '#2db7f5'
                                            //         }, {
                                            //             offset: 1,
                                            //             color: '#f1f1f1'
                                            //         }])
                                            //     }
                                            // },
                                            stack: 'b',
                                            areaStyle: {
                                                normal:'#8ec6ad'
                                            },
                                            data: data,
                                        },
                                    ]
                                }}
                                useDefault={false}/>
                            </div>
                        </Row>
                        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@mnag2k@${index}`}>{/* 底部按钮组 */}
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@2bazmr@${index}`} span="20">
                                
                            </Col>
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@mpsoql@${index}`} span="4">
                                <i className={item.isGuanZhu?'icon-coms-Collection2':'icon-coms-Collection'} style={item.isGuanZhu?{fontSize:'16px',color:'lightcoral'}:{fontSize:'16px'}} onClick={() =>{
                                    collectProject({prjid:item.id,type:item.isGuanZhu?0:1});
                                    item.isGuanZhu=!item.isGuanZhu;
                                    if(item.isGuanZhu){
                                        counts.mineStar++;
                                    }else{
                                        counts.mineStar--;
                                    }
                                    getPrjSearchDatas();
                                }}/>
                            </Col>
                        </Row>
                    </Card>
                </Col>
            )
            if((index+1)%4 == 0){
                row.push(col);
                col= [];
            }
            if(index == datas.length-1){
                row.push(col);
                col= [];
            }
            
        });
        return row;
    }

    getTopButtons = () => {
        const { projectPortalStore, queryPrjStore } = this.props;
        const { prjtypes, initDatas, setPrjType, setOrderBy, prjtype } = projectPortalStore;
        const { form } = queryPrjStore;
        const formParams = form.getFormParams() || {};
        const options = [
            {
                key: "",
                selected:true,
                showname: ""
            },
            {
              key: "createtime",
              showname: getLabel('518253','按创建时间')
            },
            {
              key: "manager",
              showname: getLabel('518254','按项目经理')
            }
          ];
        let buttons = [];
        if(this.state.selectedKey==0){
            buttons.push( 
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@fn8i80`} style={{width:'180px'}}>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@nb41e1`} span={12}>
                        {getLabel('586','项目类型')}
                    </Col>
    
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@vhywf1`} span={1}>
                    </Col>
    
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@44dngl`} span={11}>
                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@6cjbb`}
                            style={{width:'100px'}}
                            options={toJS(prjtypes)}
                            value={prjtype}
                            viewAttr={2}
                            onChange={(v, showname) => {
                                queryPrjStore.appendFormFields({prjtype:{value:v}})
                                setPrjType(v);
                                initDatas(formParams);
                            }}
                        />
                    </Col>
                </Row>            
            );
            buttons.push( 
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@5ytpfx`} style={{width:'180px'}}>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@jz2isn`} span={6}>
                        {getLabel('338','排序')}
                    </Col>
    
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@8maelf`} span={1}>
                    </Col>
    
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@x7j905`} span={17}>
                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@6rm310`}
                            style={{width:'120px'}}
                            options={options}
                            // value={value}
                            viewAttr={2}
                            onChange={(v, showname) => {
                                setOrderBy(v);
                                initDatas();
                            }}
                        />
                    </Col>
                </Row>            
            );
            if(this.state.viewScope == "card"){
                buttons.push(   <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@uxd1je`} type="ghost"  icon="bars" onClick={()=>this.changeScope("list")}/>)
            }else{
                buttons.push(   <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@q6ooy3`} type="ghost"  icon="appstore-o" onClick={()=>this.changeScope("card")}/>)
            }
        }
        return buttons;
    }

    changeScope = (viewScope) => {
        this.setState({viewScope : viewScope})
    }

    getGroups = (arr) =>{
        const { projectPortalStore } = this.props;
        const { deletePrjGroupInfo,prjGroupStore1 } = projectPortalStore;
        let datas = [];
        arr.map(c =>{
            datas.push(<Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@9rw7gd@${c.id}`} style={{display:'relative',paddingRight:'48px'}} key={c.id} >
            <span>{c.name}</span>
            <i className='icon-coms-delete' style={{position:'absolute',top:'15px',right:'0px'}} onClick={(e) =>{
                e.stopPropagation()
                e.preventDefault();
                deletePrjGroupInfo({groupid:c.id});
                if(this.state.current==c.id){
                    this.setState({current:'allPrj'});
                }
            }} />
            <i className='icon-coms-edit' style={{position:'absolute',top:'15px',right:'20px'}} onClick={(e) =>{
                e.stopPropagation()
                e.preventDefault();
                prjGroupStore1.handlePrjGroupDialog(true,{id:c.id});
            }} />
            </Menu.Item>);
        })
        return datas;
    }

    forwardProjectCard(query){
        const path = "/portal/card"+query;
        this.context.router.push({
            pathname: "/main/prj"+path
        });
    }

}

export default ProjectPortal;