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:'HandCode',//控制显示扫码或手动输入
            popShow:false, //控制弹框,
            pop1Show:true,  //控制异常弹窗显示
            pop2Show:false
         }
         this.changePage=this.changePage.bind(this);
         this.changeBreakPop=this.changeBreakPop.bind(this)
    }

    render(){
        let props=this.props;
        let {isShow,popShow,pop1Show,pop2Show}=this.state;
         return (
                  <div className={"BreakageContainer"}>
                     {
                          isShow?<div style={{width:'100%',height:'100%'}}>
                          <HeaderComponent headerInfo={props.headerInfo} />
                           <LeftContainer menuType={props.menuType} 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={props.breakageContainer.status&&props.breakageContainer.status.success?"货品匹配成功":'货品匹配失败'} classContainer={"recoveryPopInfo"}>
                            <div className={props.breakageContainer.status&&props.breakageContainer.status.success?"icon iconfont icon-correct font150 col27ce61":"icon iconfont icon-exclamation font150 colfffd00"} />
                            <div className={"text font40 col000"}>
                                <p>{props.breakageContainer.status&&props.breakageContainer.status.message}</p>
                            </div>
                            <div className={"btn"}>
                                <Button text={props.breakageContainer.status&&props.breakageContainer.status.success?"已放入":'关闭'} btnContainer={'font32 backff775c colfff'} option={this.changePopHide.bind(this,props.breakageContainer.status&&props.breakageContainer.status.success)} />
                            </div>
                    </PopModel>
                        </div>:null
                    }
                        {
                          !pop1Show?<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-exclamation font150 colfffd00"} />
                            <div className={"text font40 col000"}>
                                <p>{props.breakageProductInfo.product.message}</p>
                            </div>
                            <div className={"btn"}>
                                <Button text={'关闭'} btnContainer={'font32 backff775c colfff'} option={this.changePopHideReturn.bind(this)} />
                            </div>
                    </PopModel>
                        </div>:null
                    }
                    {
                        pop2Show?<PopModel popupTitle={"提示"}>
                                   <div className={"text font40 col000"}>
                                <p style={{marginTop:'2rem'}}>敬请期待！</p>
                            </div>
                            <div className={"btn"}>
                                <Button text={'关闭'} style={{marginLeft:'50%',transform:'translateX(-25%)',marginTop:'2rem'}} btnContainer={'font32 backff775c colfff'} option={this.changeBreakPop.bind(this,false)} />
                            </div>
                        </PopModel>:null
                    }
                   </div>
         ) 
    }

    //控制弹框消失
    changePopHide(bool){
        this.changePopShow(false);
        if(bool){
           this.changePage(1)
        }else{
            this.changeCodePage(false);
            this.changeSanCodePage('HandCode'); 
        }
    }
    //控制弹框消失返回输入条形码页
    changePopHideReturn(){
        this.setState({
            pop1Show:true
        })
        this.changeSanCodePage('HandCode')
    }
    //改变显示的组件
    changePage(page){
         this.setState({
             showPage:page,
             isShow:true
         })
    }
    
    //切换到扫码的页面
    changeCodePage(bool){
        this.setState({
            isShow:bool
        })
    }
    
    //根据传入的值判断显示扫码页或手动输入码页
    changeSanCodePage(CodePage){
        this.setState({
            SanCodePage:CodePage
        })
    }
    //判断条形码损坏的弹框显示隐藏
    changeBreakPop(bool){
        this.setState({
            pop2Show:bool
        })
    }





    //根据判断显示应该显示的组件
    getPages(){
        let pages=null;
        let props=this.props;
        let {showPage}=this.state;
        switch(showPage){
            case  1 :
                 pages=<DefaultComponent pullTaskList={props.pullTaskList} 
                                         menuType={props.menuType}
                                         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;
        let props=this.props;
        switch(SanCodePage){
            case 'SanCode' :
                    SanPage=<SanCodeComponent changeSanCodePage={this.changeSanCodePage.bind(this)}
                                              changeCodePage={this.changeCodePage.bind(this)}
                                              changeBreakPop={this.changeBreakPop}
                                          />
                break;
            case 'HandCode' :
                    SanPage=<BreakageCode changePage={this.changePage.bind(this)} 
                                          changeSanCodePage={this.changeSanCodePage.bind(this)} 
                                          getBarCodeProductInfo={this.getproductCode.bind(this)} 
                                          breakageProductInfo={props.breakageProductInfo}
                                          changeBreakPop={this.changeBreakPop}
                                          />
                                          
                break;
        }
       return  SanPage;
    }

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

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

    //控制弹框的显示和隐藏
    changePopShow(bool){
        this.setState({popShow:bool})
    }
    componentWillReceiveProps(nextProps){
         if(nextProps.breakageProductInfo.product&&nextProps.breakageProductInfo.product.success===false){
            this.setState({pop1Show:nextProps.breakageProductInfo.product.success})
         }else{
             this.setState({pop1Show:true})
         }
    }
}
export default BreakageContainer