import React from 'react';
import { inject, observer } from 'mobx-react';
import { Button, Tabs,Card,Pagination,Row,Col } from 'antd';
import {toJS} from "mobx";
import {Condition,getAdButtons} from '../list/listCondition';
import {WeaTableNew} from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
import {WeaRightMenu,WeaTop,WeaTab,WeaErrorPage,WeaBrowser,WeaTools,WeaLeftRightLayout,WeaProgress,WeaLocaleProvider} from 'ecCom';
import ListLeftTree from '../list/listLeftTree'
import ShareDialog from '../dialog/shareDialog'
import ExchangeDialog from '../dialog/exchangeDialog'
import ProjectDialog from '../dialog/projectDialog'
const getLabel = WeaLocaleProvider.getLabel;

@inject('queryPrjStore')
@observer
class QueryProjectResult extends React.Component {
    constructor(props) {
        super(props);
        this.doInit(this.props);
	}
    doInit(props){
        const { location:{query},queryPrjStore } = props;
        const {initTreeDatas,doSearch,initDatas,form} = queryPrjStore;
        initDatas(query);
        //doSearch();
        initTreeDatas();
        
    }
    componentDidMount() {
        const {queryPrjStore, location:{query},} = this.props;
        queryPrjStore.initDatas(query);
    }

    componentWillReceiveProps(nextProps){
        const keyOld = this.props.location.key;
        const keyNew = nextProps.location.key;
        const queryOld = this.props.location.query;
        const queryNew = nextProps.location.query;
        //点击菜单路由刷新组件
        const { queryPrjStore } = nextProps;
		if(keyOld !== keyNew||queryOld !== queryNew) {
            queryPrjStore.clearStatus();
            this.doInit(nextProps);
        }
    }

    componentWillUnmount(){
        const { queryPrjStore } = this.props;
        queryPrjStore.clearStatus();
    }
    
    render(){
        const {queryPrjStore} = this.props;
        const {title,loading,tableStore,showSearchAd,form,exchangeStore,projectInfoStore,reLoad,showLeft} = queryPrjStore;
        const formParams = form.getFormParams() || {};
        return (
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@mlyx8k`} datas={this.getRightMenu()} onClick={this.onRightMenuClick.bind(this)}  >
            <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@ca7ewm`}
                    title={getLabel(16413,"查询项目")}
                    loading={loading}
                    icon={<i className='icon-coms-project' />}
                    iconBgcolor='#217346'
                    buttons={this.getTopButtons()}
                    buttonSpace={10}
                    showDropIcon={true}
                    dropMenuDatas={this.getRightMenu()}
                    onDropMenuClick={this.onRightMenuClick.bind(this)} 
                >
                <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@qha9n9`} 
	                isNew = {true}
	            	showLeft = {showLeft}
                    leftCom={<ListLeftTree ecId={`${this && this.props && this.props.ecId || ''}_ListLeftTree@8snxwo`} listStore={queryPrjStore} key={this.props.location.key}  initkey={"all"} />}
                    onCollapse={showLeft => queryPrjStore.setLeftShow(showLeft)}
                >
                    <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@szqi74`}
                        buttonsAd={getAdButtons(queryPrjStore,this.props.ecId || '')}
                        searchType={['base','advanced']}
                        searchsBaseValue={formParams.name}
                        setShowSearchAd={bool=>{queryPrjStore.setShowSearchAd(bool)}}
                        hideSearchAd={()=> queryPrjStore.setShowSearchAd(false)}
                        searchsAd={
                            <div><Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@bmguxp`} listStore={queryPrjStore} form={form} onEnterSearch={this.onEnterSearch} ></Condition></div>
                        }
                        showSearchAd={showSearchAd}
                        onSearch={v=>{queryPrjStore.doSearch()}}
                        onSearchChange={v=>{queryPrjStore.appendFormFields({name:{value:v}})}}
                        onChange={ this.changeData }
                    />
                        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@opzeuo`} 
                            comsWeaTableStore={tableStore}
                            hasOrder={true}
                            needScroll={true}
                            register_table={()=>reLoad()}
                            getColumns={c=>this.reRenderColumns(c)}
                            tableWidth={this.tableWidth}
                            onOperatesClick={this.onOperatesClick.bind(this)}
                        />
                    </WeaLeftRightLayout>
                </WeaTop>
                <ShareDialog ecId={`${this && this.props && this.props.ecId || ''}_ShareDialog@ppun94`} contentStore={queryPrjStore} />
                <ExchangeDialog ecId={`${this && this.props && this.props.ecId || ''}_ExchangeDialog@dnz4uw`} contentStore={exchangeStore}  />
                <ProjectDialog ecId={`${this && this.props && this.props.ecId || ''}_ProjectDialog@fqu57i`}  contentStore={projectInfoStore}/>
        </WeaRightMenu>)

    }

    
    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}%`;
    }

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

    getTopButtons(){
        const {queryPrjStore} = this.props;
        const {rightMenu,tableStore} = queryPrjStore;
        let {selectedRowKeys} = tableStore;
        let btnArr = [];
        let that = this;
        const isDisabled = !(selectedRowKeys.length>0 && `${toJS(selectedRowKeys)}`);
        rightMenu && rightMenu.length>0 && toJS(rightMenu).map(m=>{
            let fn = m.menuFun.indexOf('this') >= 0 ? `${m.menuFun.split('this')[0]})` : m.menuFun;
            m.isTop == '1' && btnArr.length < 4 && btnArr.push(
               <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5dvni6@${m.type}`} type="primary" 
                   disabled={isDisabled && m.isControl == "1"}
                   onClick={()=>{
                       if(fn == ""){
                           if(m.type == "BTN_EXPORT"){ //导出Excel
                                queryPrjStore.doPrjExcelExp();
                           }
                       }
                    }}>
                   {m.menuName}
               </Button>
           );
       });
       return btnArr;
    }

    getRightMenu(){
        const {queryPrjStore }= this.props;
        const {rightMenu} = queryPrjStore;
        let btnArr = [];
        rightMenu && rightMenu.length>0 && rightMenu.map(m=>{
            btnArr.push({
                icon: <i className={m.menuIcon} />,
                content: m.menuName
            })
        });
    	return btnArr
    }
    onRightMenuClick(key){
        const {queryPrjStore }= this.props;
        const {rightMenu} = queryPrjStore;
        let that = this;
        rightMenu &&  rightMenu.length>0  && rightMenu.map((m,i)=>{
        	if(Number(key) == i){
                let fn = m.menuFun.indexOf('this') >= 0 ? `${m.menuFun.split('this')[0]})` : m.menuFun;
                if(m.type == "BTN_SEARCH"){
                    queryPrjStore.doSearch();
                }else if(m.type == "BTN_COLUMN"){ //定制列
                    queryPrjStore.onShowColumn();
                }else if(m.type == "BTN_EXPORT"){
                    queryPrjStore.doPrjExcelExp();
                }
            }
        });
    }
    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@siia3c@${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;
    }
    changeData=(key)=>{
        const {queryPrjStore} = this.props;
        queryPrjStore.setShowSearchAd(false);
        queryPrjStore.doSearch({
            tabkey:key
        });
    }

    onOperatesClick(record,index,operate,flag){
        const {queryPrjStore} = this.props;
        const {shareStore,exchangeStore,projectInfoStore} = queryPrjStore;
        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){   //正常
                queryPrjStore.doPlanOpt({method:'normal',prjid:record.randomFieldId})
            }else if('onOver' == fn){   //延期
                queryPrjStore.doPlanOpt({method:'delay',prjid:record.randomFieldId})
            }else if('onFinish' == fn){   //完成
                queryPrjStore.doPlanOpt({method:'complete',prjid:record.randomFieldId})            
            }else if('onFrozen' == fn){   //冻结
                queryPrjStore.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){   //项目删除
                queryPrjStore.delPrjInfo({method:"del",prjid:record.randomFieldId,from:"mymanagerproject"})
            }
        }      
    }
}

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