import React from 'react';
import Header from '../../components/CommonComponent/HeaderComponent/HeaderComponent';
import LeftContainer from '../LeftContainer/LeftContainer';
import RightContainer from '../RightContainer/RightContainer';
import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
import PopModel from '../../components/CommonComponent/PopupComponent/PopupChildComponent'
require('./index.css');

export default class ReplenishContainer extends React.Component{
    constructor(props){
        super(props);
    }

    componentWillMount(){

    }

    wrongQrcode(){
        //货道商品不符
        let {showPopup,hidePopup} = this.props;
        let btnDom1 = <Button btnContainer={"replenishPopInfoWrongSkuBtn font32"} key={"replenishContainerShelfWrong1"} text={"确认扫描完毕"} option={this.uploadWrongSku}/>
        let popDom =
            <PopModel popupTitle={"扫描货品异常"} classContainer={"replenishPopInfo"}>
                <div className={"icon iconfont icon-exclamation font150 colf5a623"} />
                <div className={"text font40 col000"}>
                    <p>您需要补完【XXX】，才能补其它货品</p>
                </div>
                <div className={"btn"}>
                    {btnDom1}
                    <div className={"tip"}>忘记该货品的样子</div>
                </div>
            </PopModel>;
        showPopup({popupChild:popDom});
    }

    getSkuDom(){
        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>所在区域：A区域<span className={"colff775c"}>区域照片</span></li>
                            <li>一个字一个字一个字一个字一个字一个字</li>
                            <li>一个字</li>
                        </ul>
                    </div>
                </div>
            </div>
        )
    }

    scanQrcode(){
        console.log("扫描下一个")
    }
    scanOver(){
        console.log("扫描结束")
    }
    getPage(){
        return (
            <div className={"replenishPage commonPage"}>
                <div className={"title font40 col333 pageTitle"}>请将货品放到对应货架上
                    <span className={"font26 progressText"}>补货进度：3/30</span>
                </div>
                <div className={"pagebox"}>
                    {this.getSkuDom()}
                    <div className={"btn pageBtn"}>
                        <div className={"tips colff775c font30"}>遇到问题？</div>
                        <Button btnContainer={"replenishPageBtn1 font32"} key={"replenishPageBtn1"} text={'扫描工作结束'} option={this.scanOver}/>
                        <Button btnContainer={"replenishPageBtn2 font32 colfff backff775c"} key={"replenishPageBtn2"} text={'扫描下一个'} option={this.scanQrcode}/>
                    </div>
                </div>
            </div>
        )
    }

    render(){
        let props = this.props;
        return (
            <div className={"replenishContainer"}>
                {
                    props.headerInfo && props.headerInfo.storeInfo ?
                        <Header headerInfo={props.headerInfo}/> : null
                }

                <LeftContainer leftInfo={props.headerInfo}/>
                <RightContainer>
                    {this.getPage()}
                </RightContainer>
            </div>
        )
    }
}