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'
import PopModel from '../../components/CommonComponent/PopupComponent/PopupChildComponent'
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.state = {
            pageType : 1,
            showScanQrcode : false
        }

    }

    componentWillMount(){

    }

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

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


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

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

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

    getSkuInfo(){
        return(
            <div className={"replenishSkuInfo"}>
                <div className={"skuName font30 col333"}>商品名称：雪碧</div>
                <div className={"skuInfo"}>
                    <div className={"skuImg"}>
                        <img src="" alt=""/>
                    </div>
                    <div className={"areaImg"}>
                        <img src="" alt=""/>
                    </div>
                    <div className={"skuPos col333 font30"}>
                        <ul>
                            <li><span className={"skuPosTitle fl"}>所在区域：</span>A区域<span className={"colff775c showAreaImg"}>区域照片</span></li>
                            <li className={""}>
                                <span className={"skuPosTitle"}>货道信息：</span>
                                <span className={""}>一个字一个字一个字一个字一个字一个字</span>
                            </li>
                            <li><span className={"skuPosTitle fl"}>货道编号：</span>一个字</li>
                        </ul>
                    </div>
                </div>
            </div>
        )
    }

    getOtherHeader(){
        return <div className={"otherHeader replenishScanQrcodeHeader font32 clearfix colfff "}>
            <i className={"iconfont middle icon font50 icon-circle-left circleIcon fl"} onClick={()=>this.goBack.bind(this)()}/>
            <span className={"middle"}>任务目标：将A区补货箱中的货品扫码后放到货架上</span>
        </div>
    }

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


    //扫描货品异常
    errorSku(){
        //货道已满解决办法
        let {showPopup,hidePopup} = this.props;
        let btnDom = <Button btnContainer={"recoveryContainerQrcode font32 backff775c colfff"} key={"recoveryContainerWrongQrcode"} text={"确认扫描完毕"} option={hidePopup}/>
        let popDom =
            <PopModel popupTitle={"扫描货品异常"} classContainer={"recoveryPopInfo"}>
                <div className={"icon iconfont icon-wrong font150"} />
                <div className={"text font40 col000"}>
                    <p>您需要补完【XXX】，才能补其他货品</p>
                </div>
                <div className={"btn"}>
                    {btnDom}
                    <div className={"colff775c font30"}>忘记该货品的样子</div>
                </div>
            </PopModel>
        showPopup({popupChild:popDom});
    }

    //忘记样子
    forgetSku(){
        let {showPopup,hidePopup} = this.props;
        let btnDom = <Button btnContainer={"recoveryContainerQrcode font32 backff775c colfff"} key={"recoveryContainerWrongQrcode"} text={"继续扫描"} option={hidePopup}/>
        let popDom =
            <PopModel popupTitle={"扫描货品异常"} classContainer={"recoveryPopInfo"}>
                {this.getSkuInfo()}
                <div className={"btn"}>
                    {btnDom}
                </div>
            </PopModel>
        showPopup({popupChild:popDom});
    }

    //不在本次补货范围
    outReplenish(){
        //货道已满解决办法
        let {showPopup,hidePopup} = this.props;
        let btnDom = <Button btnContainer={"recoveryContainerQrcode font32 backff775c colfff"} key={"recoveryContainerWrongQrcode"} text={"关闭"} option={hidePopup}/>
        let popDom =
            <PopModel popupTitle={"扫描货品异常"} classContainer={"recoveryPopInfo"}>
                <div className={"icon iconfont icon-wrong font150"} />
                <div className={"text font40 col000"}>
                    <p>此货品不在本次补货范围内，请放入物流回收箱！</p>
                </div>
                <div className={"btn"}>
                    {btnDom}
                </div>
            </PopModel>
        showPopup({popupChild:popDom});
    }



    render(){
        let props = this.props;
        return (
            <div className={"replenishContainer"}>
                {
                    this.state.showScanQrcode ?
                        <div className={"replenishQrcode"} style={{width:'100%',height:'100%',backgroundColor:'#000'}}>
                            <Header
                                showHeader={CONFIG.headerStatus[2]}
                            >
                                {this.getOtherHeader()}
                            </Header>

                        </div> :
                        <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>
        )
    }
}