import { Icon} from 'antd';
import React from 'react';
import cloneDeep from 'lodash/cloneDeep'
import './index.less'


export class PrjTaskLayout extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showLeft:props.defaultShowLeft || true,
            isHover:false,
            leftWidth:props.leftWidth || 250,  
            treeWidth:props.treeWidth || 250
            //showRight:false
        }
    }
    componentWillReceiveProps(nextProps){
        if(this.props.showRight !== nextProps.showRight){
           // this.showright(nextProps.showRight);
           this.rightShowCo(nextProps.showRight);
        }
    }

    componentDidMount(props){
        let $this = $(this.refs._container)
        let handle = $this.find(this.props.handle)
       // let isDrag = false;
        // let _timer = 
        $this.click(function(){
            rightShowCo(false);
        });
        
    }
    leftShowCo(e){
        const {showLeft,leftWidth,treeWidth} = this.state;
        const { onLeftChange,leftCom} = this.props;
        if(showLeft){
           jQuery(".three-side-right").animate({width:0},300,"linear",onLeftChange && onLeftChange(false))
        }else{
            jQuery(".three-side-right").animate({width:leftCom? leftWidth:treeWidth},300,"linear",onLeftChange && onLeftChange(true))
        }
    	this.setState({showLeft:!showLeft});
    	e.stopPropagation();
    	e.preventDefault();
    	e.nativeEvent.preventDefault();
    }

    rightShowCo(showRight){
      //  const {showLeft,leftWidth,treeWidth} = this.state;
        const { rightCom,rightWidth} = this.props;
        if(showRight){
           jQuery(".prj-layout-right").animate({width:0},300,"linear")
        }else{
            jQuery(".prj-layout-right").animate({width:rightCom? rightWidth:0},300,"linear")
        }
    	//this.setState({showLeft:!showLeft});
    	// e.stopPropagation();
    	// e.preventDefault();
    	// e.nativeEvent.preventDefault();
    }

    render() {
        const {leftCom,rightCom,rightWidth} = this.props;
        return (
            <div className="wea-prj-task-layout">
                <div className="prj-layout-right" style={{width: 0}}>
                    <div className="prj-layout-board" style={{width:rightWidth}}>
                        <div style={{background:"#fff",height:"100%"}} style={{width:rightWidth}}>
                            {rightCom && rightCom}
                        </div>
                    </div>
                </div>
                <div className="prj-layout-left">
                    <div className="prj-layout-container" rsf="_container">
                        <div style={{background:"#fff",height:"100%"}}>
                            {leftCom && leftCom}
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}