import React from 'react';
import Button from '../../CommonComponent/ButtonComponent/ButtonComponent'
import SkuInfoComponent from '../../CommonComponent/SkuInfoComponent/SkuInfoComponent'
import PopModel from '../../CommonComponent/PopupComponent/PopupChildComponent'
require('./index.css')
export default class RecoverySecondPage extends React.Component{
    constructor(props){
        super(props);
        this.scanQrcode = this.scanQrcode.bind(this); //扫码回收
        this.wrongQrcode = this.wrongQrcode.bind(this); //扫描错误商品
        this.correctQrcode = this.correctQrcode.bind(this); //扫描正确商品
        this.putSkuToBox = this.putSkuToBox.bind(this); //将商品放入回收箱
        this.wrongSku = this.wrongSku.bind(this); //完成回收箱商品回收
        this.uploadWrongSku = this.uploadWrongSku.bind(this); //货品不符上报
        this.state={
            style : {
                width:"100%",
                height : "auto"
            }
        }
    }

    getPopInfo(){
        let btnDom = <Button btnContainer={"recoveryContainerQrcode font32 backff775c colfff"} key={"recoveryContainerCorrectQrcode"} text={"已放入"} option={this.putSkuToBox}/>
        return (
            <PopModel popupTitle={"货品匹配成功"} classContainer={"recoveryPopInfo"}>
                <div className={"icon iconfont icon-correct font150 col27ce61"} />
                <div className={"text font40 col000"}>
                    <p>请将货品放入回收箱</p>
                </div>
                <div className={"btn"}>
                    {btnDom}
                </div>
            </PopModel>

        )
    }

    wrongQrcode(){
        //拿错货品
        let {showPopup,hidePopup} = this.props;
        let btnDom = <Button btnContainer={"recoveryContainerQrcode font32"} 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});
    }

    wrongSku(){
        //货道商品不符
        let {showPopup,hidePopup} = this.props;
        let marginTop = '40px';
        let btnDom1 = <Button btnContainer={"recoveryPopInfoWrongSkuBtn1 font32"} key={"recoveryContainerShelfWrong1"} style={{'width':"100%"}} text={"货品不符"} option={this.uploadWrongSku}/>
        let btnDom2 = <Button btnContainer={"recoveryPopInfoWrongSkuBtn2 backff775c colfff font32"} key={"recoveryContainerShelfWrong2"} style={{'width':"100%","marginTop":marginTop}} text={"关闭窗口"} option={hidePopup}/>
        let popDom =
            <PopModel popupTitle={"遇到问题-货品不符"} classContainer={"recoveryPopInfo"}>
                <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});
    }

    correctQrcode(){
        let {showPopup} = this.props;
        let popDom = this.getPopInfo();
        showPopup({popupChild:popDom});
    }

    putSkuToBox(){
        //调取接口，将商品放入回收箱
    }

    uploadWrongSku(){
        //货品不符上报
        this.props.wrongShelf();
    }


    scanQrcode(){
        //扫码回收
        this.props.finishBoxRecovery();
    }



    render(){
        let props = this.props;
        let {headerInfo} = props;
        return(
            <div className={"RecoverySecondPage commonPage"}>
                <div className={"title font40 col333 pageTitle"}>任务目标：请将该货道货品进行扫码回收</div>
                <div className={"box pagebox"}>
                    <SkuInfoComponent style={{'display':'flex'}} skuInfo={headerInfo.taskList || {}}/>
                    <div className={"btn"}>
                        <Button btnContainer={"recoverySecondPageBtn font32 colfff"} key={"RecoverySecondPageBtn"} text={'扫码回收'} option={this.scanQrcode}/>
                        <div className={"text colff775c font28"} onClick={()=>this.wrongQrcode()}>货品不符？</div>
                    </div>
                </div>
            </div>
        )
    }
}
