import { inject, observer} from 'mobx-react';
import {Row,Col,Input,Button,Alert,Spin,Icon} from 'antd'
import {WeaTop} from "ecCom"

import MLinkCard from './MLinkCard';
import OLinkCard from './OLinkCard';

import AddProject from '../dialog/addProjectDialog'
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

@inject('prjAddStore')
@observer
class PrjAdd extends React.Component {

    componentDidMount() {
		const {prjAddStore} = this.props;
		prjAddStore.initDatas();
		this.scrollheigth();
	}
    scrollheigth(){
    	let top = jQuery(".wea-prj-add-content").offset() ? (jQuery(".wea-prj-add-content").offset().top ? jQuery(".wea-prj-add-content").offset().top : 0) : 0;
        let scrollheigth = document.documentElement.clientHeight - top;
        jQuery(".wea-prj-add-content").height(scrollheigth-30);
    }
    componentWillReceiveProps(nextProps){
        const keyOld = this.props.location.key;
		const keyNew = nextProps.location.key;
		if(keyOld !== keyNew) {
            const {prjAddStore} = nextProps;
            prjAddStore.initDatas();
            this.scrollheigth();
        }
    }
    componentWillUnmount(){
        const { prjAddStore } = this.props;
        prjAddStore.clearStatus();
    }

  render() {
      const {prjAddStore} = this.props;
      const {showDatas = {},mulitcol,isAbc,loading,addProjectStore} = prjAddStore;
      const {typesShow,typesCols,usedBeans,abcBtns,user} = showDatas;
      const actions  = {addProjectStore};
    return (
        <div className="prj-create-main">
            <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@10mktg`} 
                loading={loading} 
                icon={<i className='icon-coms-project' />}
                iconBgcolor='#217346'
                title={getLabel(15007,"新建项目")}
                buttons={this.getButtons()} 
                showDropIcon={false}/>
                <div className="wea-prj-add-content">
                    {isAbc  && (
                        <div className="abcbtn-group">
                        {
                            abcBtns.map(abcBtn => <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@kn6gus@${abcBtn.letter}`} className={abcBtn.selected ? 'btn-selected' : ''} type='ghost' key={abcBtn.letter}
                                disabled={abcBtn.disabled} onClick={this.goABC.bind(this,abcBtn.letter)}>{abcBtn.letter}</Button>)
                        }
                        </div>)
                    }
                    {
                        typesShow.length == 0 && !loading ? <Alert ecId={`${this && this.props && this.props.ecId || ''}_Alert@pekk6s`} message={getLabel(558,"提示")} description={getLabel(508226,"没有项目类型或无创建权限!")} type="info" showIcon /> :(
                            mulitcol ?
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@au5g4v`}>
                                {typesCols.map((c,i)=>{
                                    return <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@gxvbxx@${i}`} span={24 / typesCols.length} style={{padding:'0 10px'}}>
                                     <MLinkCard ecId={`${this && this.props && this.props.ecId || ''}_MLinkCard@ezb42p@${i}`} types={c} user={user} mulitcol={mulitcol}  isAbc={isAbc}  actions={actions}/>
                                 </Col>
                                })}
                            </Row>
                         :
                         <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@2f03su`}>
                             <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@052py5`} span="24" style={{paddingLeft:10,paddingRight:10}}>
                                 <OLinkCard ecId={`${this && this.props && this.props.ecId || ''}_OLinkCard@m0ckgg`} user={user} types={typesShow} mulitcol={mulitcol} isAbc={isAbc} actions={actions}/>
                             </Col>
                         </Row>)
                    }
                </div>
            <AddProject ecId={`${this && this.props && this.props.ecId || ''}_AddProject@myvuh3`} contentStore={prjAddStore} isreflesh={false} />
        </div>
    );
  }
  getButtons(){
    const {prjAddStore} = this.props;
    const {isAbc,mulitcol} = prjAddStore;
        return [
            <i className={"icon-button icon-New-Flow-Letter" + (isAbc ? ' wea-new-top-btn-clicked' : '')} onClick={this.showABC.bind(this)}/>,
            <i className={"icon-button icon-New-Flow-1" + (mulitcol ? ' wea-new-top-btn-clicked' : '')} onClick={this.showMulitcol.bind(this)}/>
        ]
    }
    goABC(letter){
		const {prjAddStore} = this.props;
		prjAddStore.setAbcSelected(letter);
	  	let topheight = jQuery('#'+letter).position().top;
	  	jQuery(".wea-prj-add-content").scrollTop(topheight);
    }
    showMulitcol(){
		const {prjAddStore} = this.props;
		const mulitcol = prjAddStore.mulitcol;
		prjAddStore.setMulitcol(!mulitcol);
		jQuery(".wea-wf-add-content").scrollTop(0);
	}
	showABC(){
		const {prjAddStore} = this.props;
		const {isAbc} = prjAddStore;
		prjAddStore.setIsAbc(!isAbc);
		jQuery(".wea-wf-add-content").scrollTop(0);
	}
}

export default PrjAdd