import React from 'react';
import Button from '../../CommonComponent/ButtonComponent/ButtonComponent'
import PopModel from '../../CommonComponent/PopupComponent/PopupChildComponent'
import SkuInfoComponent from '../../CommonComponent/SkuInfoComponent/SkuInfoComponent'
require('./index.css');

const questionType = {
    1 : 'getSkuDom',
    2 : 'getQuestionPage',
    3 : 'getWrongSku',
    4 : 'overflowShelf',
    5 : 'getBadSku',
}

export default class ReplenishSkuPage extends React.Component{
    constructor(props){
        super(props);
        this.getPage = this.getPage.bind(this); //展示页面
        this.handleScanOver = this.handleScanOver.bind(this); //扫描完毕
        this.handleScanQrcode = this.handleScanQrcode.bind(this); //继续扫描
        this.getSkuDom = this.getSkuDom.bind(this); //获取商品DOM
        this.getSkuInfo = this.getSkuInfo.bind(this); //获取商品DOM
        this.getQuestionPage = this.getQuestionPage.bind(this); //获取问题列表页
        this.handleOverflowShelfQuestion = this.handleOverflowShelfQuestion.bind(this); //获取货道已满弹窗
        this.handleWrongSkuQuestion = this.handleWrongSkuQuestion.bind(this); //获取商品不符弹窗
        this.handleBadSkuQuestion = this.handleBadSkuQuestion.bind(this); //获取损坏商品弹窗
        this.getWrongSku = this.getWrongSku.bind(this); // 商品不符
        this.overflowShelf = this.overflowShelf.bind(this); // 货道已满页面
        this.putInBox = this.putInBox.bind(this); // 放回

        this.state={
            pageType : 1
        }
    }
    handleScanQrcode(){
        //扫描下一个
    }

    getSkuDom(){
        return(
            <div className={"replenishSkuPage commonPage"}>
                <div className={"title font40 col333 pageTitle"}>请将货品放到对应货架上
                    <span className={"font26 progressText"}>补货进度：3/30</span>
                </div>
                <div className={"pagebox"}>
                    {this.getSkuInfo()}
                    <div className={"btn pageBtn"}>
                        <div className={"tips colff775c font30"} onClick={()=>this.getPage(2)}>遇到问题？</div>
                        <Button btnContainer={"replenishPageBtn1 font32"} key={"replenishPageBtn1"} text={'扫描工作结束'} option={this.handleScanOver}/>
                        <Button btnContainer={"replenishPageBtn2 font32 colfff backff775c"} key={"replenishPageBtn2"} text={'扫描下一个'} option={this.handleScanQrcode}/>
                    </div>
                </div>
            </div>
        )
    }

    handleScanOver(){
        console.log("扫描结束")
        //货道商品不符
        let {showPopup,hidePopup} = this.props;
        let btnDom1 = <Button btnContainer={"replenishHandleScanOverBtn1 font32"} key={"replenishHandleScanOverBtn1"} text={"继续扫描"} option={this.handleScanQrcode}/>
        let btnDom2 = <Button btnContainer={"replenishHandleScanOverBtn2 backff775c colfff font32"} key={"replenishHandleScanOverBtn2"} text={"确认扫描完毕"} option={hidePopup}/>
        let popDom =
            <PopModel popupTitle={"补货结束确认"} classContainer={"replenishPopInfo"}>
                <div className={"icon iconfont icon-exclamation font150 colf5a623"} />
                <div className={"text font40 col000"}>
                    <p>请仔细确认是否所有待补货品都已经扫描完毕</p>
                </div>
                <div className={"btn"}>
                    {btnDom1}
                    {btnDom2}
                </div>
            </PopModel>;
        showPopup({popupChild:popDom});
    }

    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>
        )
    }

    getPage(type){
        type = type ? type : this.state.pageType;
        this.setState({
            pageType : type
        })
    }

    getQuestionPage(){
        return(
            <div className={"replenishQuestionPage commonPage"}>
                <div className={"title font40 col333 pageTitle"}>
                    <i className={"iconfont icon font70 icon-circle-left col000"} onClick={()=>this.getPage(1)}/>
                    遇到问题
                </div>
                <div className={"pagebox"}>
                    <div className={"btn pageBtn"}>
                        <div className={"tips col000 font40"}>补货过程中您是否遇到了如下问题？</div>
                        <Button btnContainer={"replenishQuestionPageBtn1 replenishQuestionPageBtn font32"} key={"replenishQuestionPageBtn1"} text={'种类不符'} option={()=>this.getPage(3)}/>
                        <Button btnContainer={"replenishQuestionPageBtn2 replenishQuestionPageBtn font32"} key={"replenishQuestionPageBtn2"} text={'货道已满'} option={()=>this.getPage(4)}/>
                        <Button btnContainer={"replenishQuestionPageBtn3 replenishQuestionPageBtn font32"} key={"replenishQuestionPageBtn3"} text={'货品损坏'} option={()=>this.getPage(5)}/>
                    </div>
                </div>
            </div>
        )
    }

    getWrongSku(){
        return(
            <div className={"replenishWrongSkuPage commonPage"}>
                <div className={"title font40 col333 pageTitle"}>
                    <i className={"iconfont icon font70 icon-circle-left col000"} onClick={()=>this.getPage(2)}/>
                    遇到问题
                </div>
                <div className={"pagebox"}>
                    <div className={"wrongSkuIcon"}>
                        <i className={"iconfont icon-exclamation font150 colf5a623"}  />
                    </div>
                    <div className={"tips col000 font40"}>请再次仔细确认货道中的货品是否相符？</div>
                    <div className={"skuInfo"}>
                        <div className={"text font28 col333"}>待补货品信息：</div>
                        <SkuInfoComponent style={{display:"flex",marginTop:"20px",padding:"0"}}/>
                    </div>
                    <div className={"btn pageBtn"}>
                        <Button btnContainer={"replenishWrongSkuBtn backff775c colfff font32"} key={"replenishWrongSkuBtn"} text={'货品不符'} option={this.handleWrongSkuQuestion}/>
                    </div>
                </div>
            </div>
        )
    }

    overflowShelf(){
        return(
            <div className={"replenishOverflowShelfPage replenishWrongSkuPage commonPage"}>
                <div className={"title font40 col333 pageTitle"}>
                    <i className={"iconfont icon font70 icon-circle-left col000"} onClick={()=>this.getPage(2)}/>
                    遇到问题-货道已满确认
                </div>
                <div className={"pagebox"}>
                    <div className={"wrongSkuIcon"}>
                        <i className={"iconfont icon-exclamation font150 colf5a623"}  />
                    </div>
                    <div className={"tips col000 font40"}>请再次仔细确认货道中是否已放满货品</div>
                    <div className={"skuInfo"}>
                        <div className={"text font28 col333"}>待补货品信息：</div>
                        <SkuInfoComponent style={{display:"flex",marginTop:"20px",padding:"0"}}/>
                    </div>
                    <div className={"btn pageBtn"}>
                        <Button btnContainer={"replenishWrongSkuBtn backff775c colfff font32"} key={"replenishWrongSkuBtn"} text={'货道已满'} option={this.handleOverflowShelfQuestion}/>
                    </div>
                </div>
            </div>
        )
    }

    getBadSku(){
        return(
            <div className={"replenishBadSkuPage replenishWrongSkuPage commonPage"}>
                <div className={"title font40 col333 pageTitle"}>
                    <i className={"iconfont icon font70 icon-circle-left col000"} onClick={()=>this.getPage(2)}/>
                    遇到问题-货品损坏确认
                </div>
                <div className={"pagebox"}>
                    <div className={"wrongSkuIcon"}>
                        <i className={"iconfont icon-exclamation font150 colf5a623"}  />
                    </div>
                    <div className={"tips col000 font40"}>此货品是否已经损坏，不能进行售卖</div>
                    <div className={"skuInfo"}>
                        <div className={"text font28 col333"}>待补货品信息：</div>
                        <SkuInfoComponent style={{display:"flex",marginTop:"20px",padding:"0"}}/>
                    </div>
                    <div className={"btn pageBtn"}>
                        <Button btnContainer={"replenishWrongSkuBtn backff775c colfff font32"} key={"replenishWrongSkuBtn"} text={'是的'} option={this.handleBadSkuQuestion}/>
                    </div>
                </div>
            </div>
        )
    }

    handleWrongSkuQuestion (){
        //货品不符解决办法
        let {showPopup,hidePopup} = this.props;
        let btnDom1 = <Button btnContainer={"replenishQuestionPopupBtn font32 backff775c colfff "} key={"replenishQuestionPopupBtn2"} text={"已放回"} option={()=>this.putInBox(questionType[2])}/>
        let popDom =
            <PopModel popupTitle={"遇到问题-货品不符解决办法"} classContainer={"replenishQuestionPopup"}>
                <div className={"text font40 col000"}>
                    <p>1、请将刚才扫描的货品转放到物流回收箱内带回</p>
                    <p>2、若A区补货箱内还有此货品也都放到物流回收箱带回</p>
                    <p>3、放完后请开始补其他货品</p>
                </div>
                <div className={"btn"}>
                    {btnDom1}
                </div>
            </PopModel>;
        showPopup({popupChild:popDom});
    }
    handleOverflowShelfQuestion(){
        //货道已满解决办法
        let {showPopup,hidePopup} = this.props;
        let btnDom1 = <Button btnContainer={"replenishQuestionPopupBtn font32 backff775c colfff "} key={"replenishQuestionPopupBtn1"} text={"已放回"} option={()=>this.putInBox(questionType[1])}/>
        let popDom =
            <PopModel popupTitle={"遇到问题-货道已满解决办法"} classContainer={"replenishQuestionPopup"}>
                <div className={"text font40 col000"}>
                    <p>1、请将刚才扫描的货品转放到物流回收箱内带回</p>
                    <p>2、若A区补货箱内还有此货品也都放到物流回收箱带回</p>
                    <p>3、继续扫描其它种类货品</p>
                </div>
                <div className={"btn"}>
                    {btnDom1}
                </div>
            </PopModel>;
        showPopup({popupChild:popDom});
    }
    handleBadSkuQuestion(){
        //货道已满解决办法
        let {showPopup,hidePopup} = this.props;
        let btnDom1 = <Button btnContainer={"replenishQuestionPopupBtn font32 backff775c colfff "} key={"replenishQuestionPopupBtn1"} text={"已放回"} option={()=>this.putInBox(questionType[3])}/>
        let popDom =
            <PopModel popupTitle={"遇到问题-货品破损解决办法"} classContainer={"replenishQuestionPopup"}>
                <div className={"text font40 col000"} style={{textAlign:"center",paddingLeft:"0"}}>
                    <p>请将刚才扫描的货品放到物流回收箱内带回</p>
                </div>
                <div className={"btn"}>
                    {btnDom1}
                </div>
            </PopModel>;
        showPopup({popupChild:popDom});
    }

    putInBox(type){
        //已放回
        let {hidePopup} = this.props;
        console.log("已放回 ",type)
        hidePopup()
    }

    render(){
        let props = this.props;
        return this[questionType[this.state.pageType]]()
    }
}
