import React from 'react';
import Button from '../../CommonComponent/ButtonComponent/ButtonComponent'
import SkuInfoComponent from '../../CommonComponent/SkuInfoComponent/SkuInfoComponent'
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 key={"recoveryContainerCorrectQrcode"} style={{'width':"100%","marginTop":"36%"}} text={"已放入"} option={this.putSkuToBox}/>
        return (
            <div className={"recoveryPopInfo"}>
                <div className={"icon iconfont icon-correct font100"} />
                <div className={"text font40 col000"}>
                    <p>请将货品放入回收箱</p>
                </div>
                <div className={"btn"}>
                    {btnDom}
                </div>
            </div>
        )
    }

    wrongQrcode(){
        //拿错货品
        let {showPopup,hidePopup} = this.props;
        let btnDom = <Button key={"recoveryContainerCorrectQrcode"} style={{'width':"100%","marginTop":"36%"}} text={"关闭"} option={hidePopup}/>
        let popDom =
            <div className={"recoveryPopInfo"}>
                <div className={"icon iconfont icon-wrong font100"} />
                <div className={"text font40 col000"}>
                    <p>您拿错货品了，请放回货架！</p>
                </div>
                <div className={"btn"}>
                    {btnDom}
                </div>
            </div>;
        showPopup(popDom);
    }

    wrongSku(){
        //货道商品不符
        console.log("货道商品不符 ",this.props)
        let {showPopup,hidePopup} = this.props;
        let marginTop = '40px';
        let btnDom1 = <Button key={"recoveryContainerShelfWrong1"} style={{'width':"100%"}} text={"货品不符"} option={this.uploadWrongSku}/>
        let btnDom2 = <Button key={"recoveryContainerShelfWrong2"} style={{'width':"100%","marginTop":marginTop}} text={"关闭窗口"} option={hidePopup}/>
        let popDom =
            <div className={"recoveryPopInfo"}>
                <div className={"icon iconfont icon-exclamation font100"} />
                <div className={"text font40 col000"}>
                    <p>请确认货道信息，不要数错货道哦</p>
                </div>
                <div className={"btn"}>
                    {btnDom1}
                    {btnDom2}
                </div>
            </div>;
        showPopup(popDom);
    }

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

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

    uploadWrongSku(){
        //货品不符上报

    }


    scanQrcode(){
        //扫码回收
        console.log("scan")
    }



    render(){
        let props = this.props;
        let style = {'width':"410px","background":"#ff7860","display": "inline-block"}
        let classInfo = {
            colorInfo : "colfff",
            className : ''
        }
        return(
            <div className={"RecoverySecondPage"}>
                <div className={"title font40 col333"}>任务目标：请将该货道货品进行扫码回收</div>
                <div className={"box"}>
                    <SkuInfoComponent style={{'display':'flex'}}/>
                    <div className={"btn"}>
                        <Button key={"RecoverySecondPageBtn"} classInfo={classInfo} style={style} text={'扫码回收'} option={this.scanQrcode}/>
                        <div className={"text colff775c font28"} onClick={()=>this.wrongSku()}>货品不符？</div>
                    </div>
                </div>
            </div>
        )
    }
}
