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.submitBarcode = this.submitBarcode.bind(this);
        this.failSubmit = this.failSubmit.bind(this);
        this.changeShowInput = this.changeShowInput.bind(this);
        this.getScanDom = this.getScanDom.bind(this);
        this.hidePop = this.hidePop.bind(this);
        this.showErrorInfo = this.showErrorInfo.bind(this);
        this.handleScanOver = this.handleScanOver.bind(this);
        this.scanOver = this.scanOver.bind(this);
        this.putInBox = this.putInBox.bind(this);
        this.handleScanContinue = this.handleScanContinue.bind(this);
        this.state = {
            barcodeText : '',
            barcodeErrorText : '',
            showInput : true,
            btnClock : false
        }
    }

    shouldComponentUpdate(nextProps,nextState){
        return !!(nextProps.replenishInfo && nextProps.replenishInfo.errorInfo && (
            !nextProps.replenishInfo.errorInfo.errorMessage || !this.props.replenishInfo || !this.props.replenishInfo.errorInfo ||
            !this.props.replenishInfo.errorInfo.errorMessage || (this.props.replenishInfo.errorInfo.errorMessage !== nextProps.replenishInfo.errorInfo.errorMessage)
        ) || (JSON.stringify(nextState) !== JSON.stringify(this.state)))
    }

    componentWillUnmount(){
        this.setState({
            btnClock : false
        })
        this.props.emptyBarcodeInfo()
    }

    componentWillReceiveProps(nextProps){
        let props = this.props;
        let {replenishInfo,barcodeInfo} = props;

        if(JSON.stringify(this.props) !== JSON.stringify(nextProps)){

            if(nextProps.replenishInfo && nextProps.replenishInfo.errorInfo && nextProps.replenishInfo.errorInfo.errorMessage){
                //有错误信息，再对应页面弹出错误信息弹窗，要区分错误信息
                // nextProps.hidePopup();
                if(!replenishInfo.errorInfo || !replenishInfo.errorInfo.errorMessage || (replenishInfo.errorInfo && replenishInfo.errorInfo.errorMessage && replenishInfo.errorInfo.errorMessage !== nextProps.replenishInfo.errorInfo.errorMessage)){
                    if(nextProps.replenishInfo.errorInfo.errorType){
                        switch (nextProps.replenishInfo.errorInfo.errorType) {
                            case "NT":
                                //不在本次
                                this.outReplenish.call(this);
                                break;
                            case "NA":
                                //不在本区
                                this.outAreaReplenish.call(this);
                                break;
                            case "NS":
                                this.errorSku();
                                break;
                            case "WrongBarcode":
                                this.onWrongBarcode.call(this);
                                break;

                        }
                    }else{
                        //没有错误类型的错误
                        this.showErrorInfo(nextProps.replenishInfo.errorInfo.errorMessage);
                    }
                }
            }else if(nextProps.barcodeInfo && nextProps.barcodeInfo.product && nextProps.barcodeInfo.product.skuId && (
                !this.props.barcodeInfo || !this.props.barcodeInfo.product || !this.props.barcodeInfo.skuId ||
                this.props.barcodeInfo.skuId !== nextProps.barcodeInfo.product.skuId
            )){
                this.goBack.bind(this)(2)
            }
        }
    }

    componentDidMount(){
        this._startScan()
    }

    showErrorInfo(errMsg){
        let {showPopup,hidePopup,barcodeInfo} = this.props;
        let {product} = barcodeInfo;
        let btnDom = <Button btnContainer={"replenishScanPageErrorSkuBtn font32 backff775c colfff"} key={"replenishScanPageErrorSkuBtn"} text={"确定"} option={this.hidePop}/>
        let popDom =
            <PopModel popupTitle={"扫描出错"} classContainer={"replenishPopInfo replenishScanPageErrorInfo"}>
                <div className={"icon iconfont icon-exclamation colf5a623 font150"} />
                <div className={"text font40 col000"}>
                    <p>{errMsg}</p>
                </div>
                <div className={"btn"}>
                    {btnDom}
                </div>
            </PopModel>
        showPopup({popupChild:popDom});
    }

    goBack(type){
        let {emptyErrorInfo,goBack,hidePopup} = this.props;
        emptyErrorInfo();
        hidePopup();
        goBack(type)
    }

    hidePop(){
        let {emptyErrorInfo,hidePopup} = this.props;
        emptyErrorInfo();
        hidePopup();
        this.setState({
            barcodeText : ''
        });
        if(!this.state.showInput){
            this._startScan()
        }
    }

    getOtherHeader(){
        let {headerInfo} = this.props;
        let {taskInfo={}} = headerInfo;
        let btnStyle = {
            display: 'inline-block',
            float: 'right',
            transform: 'translateY(20%)',
            position: 'relative'
        };
        return <div className={"otherHeader replenishScanQrcodeHeader font32 colfff "}>
            <i className={"iconfont middle icon font50 icon-circle-left circleIcon fl"} onClick={()=>this.goBack.bind(this)(1)}/>
            <span className={"middle title"}>任务目标：将{taskInfo.area || ""}区补货箱中的货品扫码后放到货架上</span>
            <span className={"replenishScanQrcodeHeaderBtn colfff"} onClick={()=>this.handleScanOver()}>扫描结束？</span>
        </div>
    }

    handleScanContinue(){
        let {emptyErrorInfo,hidePopup} = this.props;
        emptyErrorInfo();
        hidePopup()
    }

    handleScanOver(){
        //货道商品不符
        let {showPopup,hidePopup} = this.props;
        let btnDom1 = <Button btnContainer={"replenishHandleScanOverBtn1 font32 bordere5e5e5"} key={"replenishHandleScanOverBtn1"} text={"继续扫描"} option={this.handleScanContinue}/>
        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.emptyErrorInfo();
                props.hidePopup()
                props.finishReplenish(2);
            })
        }
    }


    handleInputChange(e){
        this.setState({
            barcodeText:e.target.value
        })
    }
    handleFocus(){
        if(this.state.barcodeErrorText){
            this.setState({
                barcodeErrorText : '',
                barcodeText : ""
            })
        }

    }

    getBarcodeInput(){
        return (
            <div className={"replenishScanBarcodeInputDom"}>
                <div className={"barcodeInputText font30"}>{this.state.barcodeErrorText}</div>
                <input value={this.state.barcodeText} autoFocus={true} className={"barcodeInput font30 col000"} onFocus={this.handleFocus.bind(this)} type="text" onChange={this.handleInputChange.bind(this)}/>
                {/*<div className={"barcodeInputTip font30 colff775c"} onClick={()=>this.changeShowInput()}><span className={"colfff"}>or</span>条形码扫描</div>*/}
                <div>
                    <Button btnContainer={"barcodeInputBarcode font32 backff775c colfff"} key={"barcodeInputBarcode"} text={"确定"} option={this.submitBarcode}/>
                </div>
            </div>
        )
    }


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

    putInBox(type){
        //已放回
        let {uploadError} = this.props;
        uploadError(type);
        this.hidePop();
    }

    //忘记样子
    forgetSku(){
        let {showPopup,hidePopup} = this.props;
        let btnDom = <Button btnContainer={"replenishScanPageForgetSkuBtn font32 backff775c colfff"} style={{marginTop:"0"}} key={"replenishScanPageForgetSkuBtn"} text={"继续扫描"} option={this.hidePop}/>
        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"} key={"replenishContainerWrongQrcode"} text={"关闭"} option={this.hidePop}/>
        let popDom =
            <PopModel popupTitle={"扫描货品异常"} classContainer={"replenishPopInfo"}>
                <div className={"icon iconfont icon-wrong font150 colf00"} />
                <div className={"text font40 col000"}>
                    <p>此货品不在本次补货范围内，请放入物流回收箱！</p>
                </div>
                <div className={"btn"}>
                    {btnDom}
                </div>
            </PopModel>
        showPopup({popupChild:popDom});
    }

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


    //条形码错误
    onWrongBarcode(){
        //货道已满解决办法
        let {showPopup,hidePopup} = this.props;
        let btnDom = <Button btnContainer={"replenishContainerQrcode font32 backff775c colfff"} key={"replenishContainerWrongQrcode"} text={"关闭"} option={this.hidePop}/>
        let popDom =
            <PopModel popupTitle={"扫描货品异常"} classContainer={"replenishPopInfo"}>
                <div className={"icon iconfont icon-wrong font150 colf00"} />
                <div className={"text font40 col000"}>
                    <p>条形码错误！</p>
                </div>
                <div className={"btn"}>
                    {btnDom}
                </div>
            </PopModel>;
        showPopup({popupChild:popDom});
    }


    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>
                    <div className={"areaImg"}>
                        <img src={areaImage || UTILPATH.localImg.defaultImg} alt=""/>
                    </div>
                    <div className={"skuPos col333 font30"}>
                        <ul>
                            <li><span className={"skuPosTitle fl"}>所在区域：</span>{taskList.area || ""}区域<span className={"colff775c showAreaImg"}>区域照片</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>
        )
    }


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

    submitBarcode(){
        //提交条形码信息
        let barcodeText = this.state.barcodeText;
        let {getBarCodeProductInfo} = this.props;
        if(barcodeText){
            barcodeText = barcodeText.trim();
            if(this.checkNumber(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);
    }

    _onBarCodeRead = (e) => {
        this._stopScan();
        this.setState({
            barcodeText : e.nativeEvent.data.code
        },()=>{
            this.submitBarcode()
        });


    };

    _startScan = (e) => {
        // this._barCode.startScan()
    };

    _stopScan = (e) => {
        // this._barCode.stopScan()
    }

    /**
     * 调用扫描条形码
     * @returns {*}
     */
    getScanDom(){
        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 :"",
            barcodeErrorText:""
        },()=>{
            if(this.state.showInput){
                this._stopScan()
            }else{
                this._startScan()
            }
        })
    }


    render(){
        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>
        )
    }
}