import React from "react"
import LeftContainer from '../LeftContainer/LeftContainer'
import RightContainer from '../RightContainer/RightContainer'
import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
import DefaultComponent from '../../components/BreakageComponent/defaultComponent/DefaultComponnet'
import BreakageProductDetail from '../../components/BreakageComponent/BreakageProductDetail/BreakageProductDetail'
import BreakageCode from '../../components/BreakageComponent/BreakageCode/BreakageCode'
require('./index.css')
class BreakageContainer extends React.Component {
    constructor(props){
         super(props)
         this.state={
            showPage:1,
            isShow:true
         }
         this.changePage=this.changePage.bind(this);
    }

    render(){
        let props=this.props;
        let {isShow}=this.state;
         return (
             <div className={"BreakageContainer"}>
                  {
                       isShow?<div style={{width:'100%',height:'100%'}}>
                       <HeaderComponent headerInfo={props.headerInfo} />
                        <LeftContainer leftInfo={props.headerInfo}/>
                        <RightContainer>
                              {
                                 this.getPages() 
                              }
                        </RightContainer>
                       </div>:<BreakageCode changePage={this.changePage.bind(this)} changeCodePage={this.changeCodePage.bind(this)} getBarCodeProductInfo={this.getproductCode.bind(this)} />
                  }
             </div>
         ) 
    }
    componentDidMount(){
        
    }
    //改变显示的组件
    changePage(page){
         this.setState({
             showPage:page,
             isShow:true
         })
    }
    
    //切换到扫码的页面
    changeCodePage(bool){
        this.setState({
            isShow:bool
        })
    }
    getPages(){
        let pages=null;
        let props=this.props;
        let {showPage}=this.state;
        switch(showPage){
            case  1 :
                 pages=<DefaultComponent pullTaskList={props.pullTaskList} 
                                         changeCodePage={this.changeCodePage.bind(this)}
                 />
                 break;
            case  2 :
                 pages=<BreakageProductDetail breakageProductInfo={props.breakageProductInfo}
                                              changePage={this.changePage}
                                              submitBreakageProduct={this.transmitInfo.bind(this)}
                 />
                 break;
        }
        return pages;
    }
    getproductCode(barcode){
        this.props.getBarCodeProductInfo(barcode)
    }
    transmitInfo(productDetail){
        this.props.submitBreakageProduct(productDetail)
    }
}
export default BreakageContainer