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'
import SanCodeComponent from '../../components/BreakageComponent/SanCodeComponent/SanCodeComponent'
import PopModel from '../../components/CommonComponent/PopupComponent/PopupChildComponent'
import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
require('./index.css')
class BreakageContainer extends React.Component {
    constructor(props){
         super(props)
         this.state={
            showPage:1,//初始显示的页面
            isShow:true,//控制扫码页的显示隐藏
            SanCodePage:'SanCode',//控制显示扫码或手动输入
            popShow:false //控制弹框
         }
         this.changePage=this.changePage.bind(this);
    }

    render(){
        let props=this.props;
        let {isShow,popShow}=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>:this.getSanCodePgae()
                     }
                    {
                        popShow?<div style={{width:'100%',height:'100%',background:'rgba(0,0,0,.8)',position:'absolute',top:'0',left:'0'}}>
                            <PopModel popupTitle={"货品匹配成功"} classContainer={"recoveryPopInfo"}>
                            <div className={"icon iconfont icon-correct font150 col27ce61"} />
                            <div className={"text font40 col000"}>
                                <p>请将货品放入回收箱</p>
                            </div>
                            <div className={"btn"}>
                                <Button text={'已放入'} btnContainer={'font32 backff775c colfff'} option={this.changePopHide.bind(this)} />
                            </div>
                    </PopModel>
                        </div>:null
                    }
                   </div>
         ) 
    }

    //控制弹框消失
    changePopHide(){
        this.changePopShow(false)
        this.changePage(1)
    }

    //改变显示的组件
    changePage(page){
         this.setState({
             showPage:page,
             isShow:true
         })
    }
    
    //切换到扫码的页面
    changeCodePage(bool){
        this.setState({
            isShow:bool
        })
    }
    
    //根据传入的值判断显示扫码页或手动输入码页
    changeSanCodePage(CodePage){
        this.setState({
            SanCodePage:CodePage
        })
    }

    //根据判断显示应该显示的组件
    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)}
                                         changeSanCodePage={this.changeSanCodePage.bind(this)}
                 />
                 break;
            case  2 :
                 pages=<BreakageProductDetail breakageProductInfo={props.breakageProductInfo}
                                              changePage={this.changePage}
                                              submitBreakageProduct={this.transmitInfo.bind(this)}
                                              changePopShow={this.changePopShow.bind(this)}
                 />
                 break;
        }
        return pages;
    }

    //根据数据显示扫码 还是手动输入条形码
    getSanCodePgae(){
        let {SanCodePage}=this.state;
        let SanPage=null;
        switch(SanCodePage){
            case 'SanCode' :
                    SanPage=<SanCodeComponent changeSanCodePage={this.changeSanCodePage.bind(this)}
                                              changeCodePage={this.changeCodePage.bind(this)}
                                          />
                break;
            case 'HandCode' :
                    SanPage=<BreakageCode changePage={this.changePage.bind(this)} changeSanCodePage={this.changeSanCodePage.bind(this)} getBarCodeProductInfo={this.getproductCode.bind(this)} />
                break;
        }
       return  SanPage;
    }

    //把二维码传给后台
    getproductCode(barcode){
        this.props.getBarCodeProductInfo(barcode)
    }

    //把商品的详细信息传给后台
    transmitInfo(productDetail){
        this.props.submitBreakageProduct(productDetail)
    }

    //控制弹框的显示和隐藏
    changePopShow(bool){
        this.setState({popShow:bool})
    }
}
export default BreakageContainer