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.changeShowInput = this.changeShowInput.bind(this);
        this.getScanDom = this.getScanDom.bind(this);
        this.state = {
            barcodeText : '',
            barcodeErrorText : '',
            showInput : false
        }
    }

    componentWillReceiveProps(nextProps){
        if(nextProps.replenishInfo && nextProps.replenishInfo.errorInfo && nextProps.replenishInfo.errorInfo.errorMessage){
            //有错误信息，再对应页面弹出错误信息弹窗，要区分错误信息
            nextProps.hidePopup();
            if(nextProps.replenishInfo.errorInfo.errorType){
                switch (nextProps.replenishInfo.errorInfo.errorType) {
                    case "NT":
                    case "NA":
                        this.outReplenish();
                        break;
                    case "NS":
                        this.errorSku();
                        break;
                }
            }else{
                //没有错误类型的错误
                console.log("ReplenishScanPage ",nextProps.replenishInfo.errorInfo.errorMessage)
            }
        }
    }

    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"}>{this.state.barcodeErrorText}</div>
                <input value={this.state.barcodeText} className={"barcodeInput font30 col000"} type="text" onChange={this.handleInputChange.bind(this)}/>
                <div className={"barcodeInputTip font30 colff775c"} onClick={()=>this.changeShowInput()}><span className={"colfff"}>or</span>条形码扫描</div>
                <Button btnContainer={"barcodeInputBarcode font32 backff775c colfff"} key={"barcodeInputBarcode"} text={"确定"} option={this.submitBarcode}/>
            </div>
        )
    }


    //扫描货品异常
    errorSku(){
        //货道已满解决办法
        let {showPopup,hidePopup,barcodeInfo} = this.props;
        let {product} = barcodeInfo;
        let btnDom = <Button btnContainer={"replenishScanPageErrorSkuBtn font32 backff775c colfff"} style={{marginTop:'10%'}} 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>您需要补完【{product.skuName || ""}】，才能补其他货品</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"} style={{marginTop:'10%'}} 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={"replenishContainerQrcode font32 backff775c colfff"} style={{marginTop:'10%'}} key={"replenishContainerWrongQrcode"} text={"关闭"} option={hidePopup}/>
        let popDom =
            <PopModel popupTitle={"扫描货品异常"} classContainer={"replenishPopInfo"}>
                <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"}>商品名称：{barcodeInfo.skuName || ""}</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>{barcodeInfo.area || ""}区域<span className={"colff775c showAreaImg"}>区域照片</span></li>
                            <li className={""}>
                                <span className={"skuPosTitle"}>货道信息：</span>
                                <span className={""}>{barcodeInfo.position || ""}</span>
                            </li>
                            <li><span className={"skuPosTitle fl"}>货道编号：</span>{product.positionNum || ""}</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{
                //提示条形码不正确
                this.setState({
                    barcodeErrorText : '条形码输入错误，请重新输入'
                })
            }

        }else{
            //提示输入条形码
            this.setState({
                barcodeErrorText : '请输入条形码'
            })
        }

    }

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


    /**
     * 调用扫描条形码
     * @returns {*}
     */
    getScanDom(){
        let {headerInfo} = this.props;
        return (
            <div className={"replenishScanDom"}>
                <div className={"colff775c scanTips font30"} onClick={()=>this.changeShowInput()}><span className={"colfff font26"}>or</span> 手动输入条形码</div>
            </div>
        )
    }

    /**
     * 条形码扫描和输入框切换
     */
    changeShowInput(){
        this.setState({
            showInput : !this.state.showInput,
            barcodeText :""
        })
    }


    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.state.showInput ? this.getBarcodeInput() : this.getScanDom()
                }
            </div>
        )
    }
}
