import React from 'react';
import Header from '../../components/CommonComponent/HeaderComponent/HeaderComponent';
import LeftContainer from '../LeftContainer/LeftContainer';
import RightContainer from '../RightContainer/RightContainer';
import ReplenishHomePage from '../../components/ReplenishComponent/ReplenishHomePage/ReplenishHomePage'
import ReplenishSkuPage from '../../components/ReplenishComponent/ReplenishSkuPage/ReplenishSkuPage'
import ReplenishScanPage from '../../components/ReplenishComponent/ReplenishScanPage/ReplenishScanPage'
import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'

require('./index.css');

const replenishPageIndex = {
    1 : 'getHomePage',
    2 : 'getSkuPage',
    3 : 'getScanPage',
}

export default class ReplenishContainer extends React.Component{
    constructor(props){
        super(props);
        this.beginScan = this.beginScan.bind(this)
        this.goBack = this.goBack.bind(this)
        this.state = {
            pageType : 1,
            showScanQrcode : false
        }

    }

    componentWillMount(){

    }

    componentWillReceiveProps(nextProps){
        console.log("componentWillReceiveProps ",nextProps);

        //如果有错误信息，弹出错误信息
        //如果有条形码信息，展示条形码信息
        // if(!nextProps.replenishInfo.errorInfo || !nextProps.replenishInfo.errorInfo.errorMessage){
        //
        // }else{
        //
        // }
        //
        //
        //
        //
        //
        // if(nextProps.barcodeInfo && nextProps.barcodeInfo.product && nextProps.barcodeInfo.product.skuId && nextProps.replenishInfo && (!nextProps.replenishInfo.errorInfo || !nextProps.replenishInfo.errorInfo.errorMessage)){
        //     //有条形码信息且 没有错误信息 进入条形码扫描成功页面
        //     console.log("in ",this.state.pageType,typeof this.state.pageType);
        //     if(this.state.pageType !== 2){
        //         console.log("2222222");
        //         nextProps.hidePopup();
        //         this.setState({
        //             pageType : 2,
        //             showScanQrcode : false
        //         })
        //     }
        // }else if(nextProps.replenishInfo && nextProps.replenishInfo.errorInfo && nextProps.replenishInfo.errorInfo.errorMessage){
        //     //有错误信息，再对应页面弹出错误信息弹窗，要区分错误信息
        // }else if(!nextProps.barcodeInfo || !nextProps.barcodeInfo.product || !nextProps.barcodeInfo.product.skuId){
        //     if(this.state.pageType !== 3){
        //         nextProps.hidePopup();
        //         this.setState({
        //             pageType : 3,
        //             showScanQrcode : false
        //         })
        //     }
        // }
    }

    getPage(type){
        console.log("type ",type)
        return (props)=>this[replenishPageIndex[type]](props)
    }

    beginScan(){
        this.setState({
            pageType : 3,
            showScanQrcode : true,
        })
    }


    getHomePage(props){
        let {headerInfo} = props;
        return(
            <ReplenishHomePage headerInfo={headerInfo}
                               scanQrcode={()=>this.beginScan()}
            />
        )
    }

    getSkuPage(props){
        return <ReplenishSkuPage {...props} beginScan={this.beginScan}/>
    }

    getScanPage(props){
        return <ReplenishScanPage {...props}/>
    }

    goBack(type){
        this.setState({
            showScanQrcode : false,
            pageType : type
        })
    }




    render(){
        console.log("render ",this.state.pageType,this.state.showScanQrcode);
        let props = this.props;
        return (
            <div className={"replenishContainer page"}>
                {
                    this.state.showScanQrcode ?
                        <ReplenishScanPage {...props} goBack={this.goBack}/> :
                        <div style={{width:'100%',height:'100%'}}>
                            {
                                props.headerInfo && props.headerInfo.storeInfo ?
                                    <Header headerInfo={props.headerInfo}/> : null
                            }

                            <LeftContainer leftInfo={props.headerInfo}/>
                            <RightContainer>
                                {this.getPage(this.state.pageType)(props)}
                            </RightContainer>
                        </div>
                }

            </div>
        )
    }
}