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.continueScan = this.continueScan.bind(this); // 继续扫描
        this.scanOver = this.scanOver.bind(this); // 全部补货完毕
        this.showImg = this.showImg.bind(this); // 全部补货完毕

        this.state={
            pageType : 1,
            btnClock : false
        }
    }
    handleScanQrcode(){
        //扫描下一个
        if(!this.state.btnClock){
            this.setState({
                btnClock : true
            },()=>{
                this.props.finishBoxRecovery();
                this.continueScan()
            })
        }
    }

    shouldComponentUpdate(nextProps,nextState){
        return !!((nextProps.barcodeInfo && nextProps.barcodeInfo.product && nextProps.barcodeInfo.product.skuId
                && (!this.props.barcodeInfo || !this.props.barcodeInfo.product || !this.props.barcodeInfo.product.skuId ||
                this.props.barcodeInfo.product.skuId !== nextProps.barcodeInfo.product.skuId
            ) || nextState.pageType !== this.state.pageType || nextState.btnClock !== this.state.btnClock))
    }


    componentWillUnmount(){
        console.log("ReplenishSkuPage componentWillUnmount");
        this.setState({
            btnClock : false
        })
    }

    getSkuDom(){
        let {headerInfo} = this.props;
        let {taskList={}} = headerInfo;
        return(
            <div className={"replenishSkuPage commonPage"}>
                <div className={"title font40 col333 pageTitle"}>请将货品放到对应货架上
                    <span className={"font26 progressText"}>补货进度：{taskList.repCurrentNum}/{taskList.repTotalCount}</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 bordere5e5e5"} 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 bordere5e5e5"} key={"replenishHandleScanOverBtn1"} text={"继续扫描"} option={hidePopup}/>
        let btnDom2 = <Button btnContainer={"replenishHandleScanOverBtn2 backff775c colfff font32"} key={"replenishHandleScanOverBtn2"} text={"确认扫描完毕"} option={this.scanOver}/>
        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});
    }

    //确认扫描完毕
    scanOver(){
        let props = this.props;
        if(!this.state.btnClock){
            this.setState({
                btnClock : true
            },()=>{
                props.hidePopup()
                props.finishReplenish(1);
            })
        }
    }

    showImg(imgSrc){
        let {showPopup,hidePopup} = this.props;
        let showImgDom = <div onClick={()=>hidePopup()} className={"showBigImg"}>
            <img src={imgSrc || UTILPATH.localImg.defaultImg} alt=""/>
        </div>;
        showPopup({
            popupChild : showImgDom
        });
    }

    getSkuInfo(){
        let {headerInfo} = this.props;
        let {taskList={}} = headerInfo;
        let skuImg = taskList.skuImage ? UTILPATH.getPic(taskList.skuImage,"middle") : '';
        let areaImage = taskList.areaImage ? UTILPATH.getPic(taskList.areaImage,"middle") : '';
        return(
            <div className={"replenishSkuInfo"}>
                <div className={"skuName font30 col333"}>商品名称：{taskList.skuName || ""}</div>
                <div className={"skuInfo"}>
                    <div className={"skuImg"}>
                        <img src={skuImg || UTILPATH.localImg.defaultImg} alt=""/>
                        <div className={"skuImgText font20"}>货品图片</div>
                    </div>
                    <div className={"areaImg"}>
                        <img src={areaImage || UTILPATH.localImg.defaultImg} alt=""/>
                        <div className={"skuImgText font20"}>摆放方式</div>
                    </div>
                    <div className={"skuPos col333 font30"}>
                        <ul>
                            <li><span className={"skuPosTitle fl"}>所在区域：</span>{taskList.area}区域<span className={"colff775c showAreaImg"} onClick={()=>this.showImg(taskList.areaImage)}>区域照片</span></li>
                            <li className={""}>
                                <span className={"skuPosTitle"}>货道信息：</span>
                                <span className={""}>{taskList.position}</span>
                            </li>
                            <li><span className={"skuPosTitle fl"}>货道编号：</span>{taskList.positionNum}</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 bordere5e5e5"} key={"replenishQuestionPageBtn1"} text={'种类不符'} option={()=>this.getPage(3)}/>
                        <Button btnContainer={"replenishQuestionPageBtn2 replenishQuestionPageBtn font32 bordere5e5e5"} key={"replenishQuestionPageBtn2"} text={'货道已满'} option={()=>this.getPage(4)}/>
                        <Button btnContainer={"replenishQuestionPageBtn3 replenishQuestionPageBtn font32 bordere5e5e5"} key={"replenishQuestionPageBtn3"} text={'货品损坏'} option={()=>this.getPage(5)}/>
                    </div>
                </div>
            </div>
        )
    }

    getWrongSku(){
        let {headerInfo,showPopup,hidePopup} = this.props;
        let {taskList={},taskInfo={}} = headerInfo;
        let marginTop = UTILPATH.getRemByPx(20)
        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 font110 colf5a623"}  />
                    </div>
                    <div className={"tips col000 font40"}>请再次仔细确认货道中的货品是否相符？</div>
                    <div className={"skuInfo"}>
                        <div className={"text font28 col333"}>待补货品信息：</div>
                        <SkuInfoComponent showPopup={showPopup} hidePopup={hidePopup} style={{display:"flex",marginTop:marginTop,padding:"0"}} skuInfo={taskList} />
                    </div>
                    <div className={"btn pageBtn"}>
                        <Button btnContainer={"replenishWrongSkuBtn backff775c colfff font32"} key={"replenishWrongSkuBtn"} text={'货品不符'} option={this.handleWrongSkuQuestion}/>
                    </div>
                </div>
            </div>
        )
    }

    overflowShelf(){
        let {headerInfo,showPopup,hidePopup} = this.props;
        let {taskList={}} = headerInfo;
        let marginTop = UTILPATH.getRemByPx(20)
        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 font110 colf5a623"}  />
                    </div>
                    <div className={"tips col000 font40"}>请再次仔细确认货道中是否已放满货品</div>
                    <div className={"skuInfo"}>
                        <div className={"text font28 col333"}>待补货品信息：</div>
                        <SkuInfoComponent showPopup={showPopup} hidePopup={hidePopup} style={{display:"flex",marginTop:marginTop,padding:"0"}} skuInfo={taskList}/>
                    </div>
                    <div className={"btn pageBtn"}>
                        <Button btnContainer={"replenishWrongSkuBtn backff775c colfff font32"} key={"replenishWrongSkuBtn"} text={'货道已满'} option={this.handleOverflowShelfQuestion}/>
                    </div>
                </div>
            </div>
        )
    }

    getBadSku(){
        let {headerInfo} = this.props;
        let {taskList={}} = headerInfo;
        let marginTop = UTILPATH.getRemByPx(20)
        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 font110 colf5a623"}  />
                    </div>
                    <div className={"tips col000 font40"}>此货品是否已经损坏，不能进行售卖</div>
                    <div className={"skuInfo"}>
                        <div className={"text font28 col333"}>待补货品信息：</div>
                        <SkuInfoComponent  style={{display:"flex",marginTop:marginTop,padding:"0"}} skuInfo={taskList}/>
                    </div>
                    <div className={"btn pageBtn"}>
                        <Button btnContainer={"replenishWrongSkuBtn backff775c colfff font32"} key={"replenishWrongSkuBtn"} text={'是的'} option={this.handleBadSkuQuestion}/>
                    </div>
                </div>
            </div>
        )
    }

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

    putInBox(type){
        //已放回
        let {hidePopup,uploadError,beginScan} = this.props;
        if(!this.state.btnClock){
            this.setState({
                btnClock: true,
            },()=>{
                uploadError(type);
                hidePopup();
                beginScan();
            })
        }


    }

    continueScan(){
        let {showPopup,hidePopup,beginScan} = this.props;
        hidePopup();
        beginScan();
    }

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