import React from 'react';
import Button from '../../CommonComponent/ButtonComponent/ButtonComponent'
import Header from '../../CommonComponent/HeaderComponent/HeaderComponent';
import PopModel from '../../CommonComponent/PopupComponent/PopupChildComponent'
require('./index.css')
export default class ReplenishScanPage extends React.Component{
    constructor(props){
        super(props);
        this.getOtherHeader = this.getOtherHeader.bind(this)
        this.getBarcodeInput = this.getBarcodeInput.bind(this)
        this.errorSku = this.errorSku.bind(this)
        this.forgetSku = this.forgetSku.bind(this)
        this.outReplenish = this.outReplenish.bind(this)
        this.getSkuInfo = this.getSkuInfo.bind(this)
        this.makeSureScanOver = this.makeSureScanOver.bind(this);
        this.submitBarcode = this.submitBarcode.bind(this);
        this.failSubmit = this.failSubmit.bind(this);
        this.state = {
            barcodeText : ''
        }
    }

    componentWillReceiveProps(nextProps){
        if(nextProps.replenishInfo && nextProps.replenishInfo.errorInfo){
            //有错误信息，再对应页面弹出错误信息弹窗，要区分错误信息

        }
    }

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

    handleInputChange(e){
        this.setState({
            barcodeText:e.target.value
        })
    }

    getBarcodeInput(){
        return (
            <div className={"barcodeInputDom"}>
                <div className={"barcodeInputText font30"}>条形码输入错误，请重新输入</div>
                <input value={this.state.barcodeText} className={"barcodeInput font30 col000"} type="text" onChange={this.handleInputChange.bind(this)}/>
                <div className={"barcodeInputTip font30 colff775c"}><span className={"colfff"}>or</span>条形码扫描</div>
                <Button btnContainer={"barcodeInputBarcode font32 backff775c colfff"} key={"barcodeInputBarcode"} text={"确定"} option={this.submitBarcode}/>
            </div>
        )
    }


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

    //忘记样子
    forgetSku(){
        let {showPopup,hidePopup} = this.props;
        let btnDom = <Button btnContainer={"replenishScanPageForgetSkuBtn font32 backff775c colfff"} key={"replenishScanPageForgetSkuBtn"} text={"继续扫描"} option={hidePopup}/>
        let popDom =
            <PopModel popupTitle={"扫描货品异常"} classContainer={"replenishPopInfo replenishScanPageForgetSku"}>
                {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});
    }

    getSkuInfo(){
        let {barcodeInfo} = this.props;
        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>
        )
    }

    makeSureScanOver(){
        //确认扫描完毕
        let {hidePopup} = this.props;
        hidePopup()
    }

    failSubmit(){
        this.setState({
            barcodeText : ''
        },()=>{
            this.props.hidePopup()
        })
    }

    submitBarcode(){
        //提交条形码信息
        let barcodeText = this.state.barcodeText;
        let {showPopup,getBarCodeProductInfo} = this.props;
        if(barcodeText){
            barcodeText = barcodeText.trim();
            if(this.checkNumber(barcodeText)){
                console.log("submitBarcode ",barcodeText);
                //获取条形码信息
                getBarCodeProductInfo(barcodeText);
            }else{
                //提示条形码不正确
                let btnDom = <Button btnContainer={"recoveryContainerQrcode font32 backff775c colfff"} key={"recoveryContainerWrongQrcode2"} text={"关闭"} option={this.failSubmit}/>
                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});
            }

        }else{
            //提示输入条形码
            let btnDom = <Button btnContainer={"recoveryContainerQrcode font32 backff775c colfff"} key={"recoveryContainerWrongQrcode1"} text={"关闭"} option={this.failSubmit}/>
            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});
        }

    }

    /**
     * 验证条形码结果是否为纯数字
     * @param str
     * @returns {boolean}
     */
    checkNumber(str){
        let reg = /^[0-9]*$/;
        return reg.test(str);
    }



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