import React from "react"
import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
import LeftContainer from '../LeftContainer/LeftContainer'
import RightContainer from '../RightContainer/RightContainer'
import {headerStatus} from '../../config/showPage'
import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
import PopupComponent from '../../components/CommonComponent/PopupComponent/PopupComponent'
require('./index.css')
class TakeStokeContaniner extends React.Component {
    constructor(props){
         super(props);
         this.state={
             showButton:true,
             number:1,
             initNum:0
         }
    }

    render(){
       let {showButton,number,initNum}=this.state;
       let props = this.props;
       let tokeTaskProduct=props.tokeTaskProduct;
       return (
                <div className={'TokeStokeContainer'}>
                        <HeaderComponent headerStatus={headerStatus[1]} headerInfo={props.headerInfo}/>
                         <LeftContainer leftInfo={props.headerInfo}/>
                         <RightContainer>
                             <div className={"TokeStokeContent"}>
                                  <div className={'commonPage'}>
                                        {
                                            showButton?<div className={'pageTitle clo333 font40'}>
                                              <span>任务目标:</span>
                                              <span>请<span className={number===1?'col333':'colff775c'}>{number===1?'输入':'再次输入'}</span>以下货道中货品的数量</span>
                                           </div>:
                                           <div className={'pageTitle clo333 font40'}>
                                              <span>任务目标:</span>
                                              <span>请从货道上拿下<span className={'colff775c'}>{initNum-tokeTaskProduct.realQuantity}</span>个货品放入回收箱</span>
                                           </div>
                                        }
                                      <div className={'pagebox'}>
                                            <div className={'productImg'}>
                                                  <img style={{width:'100%',height:'100%'}} src={tokeTaskProduct.skuImage} alt=""/>
                                            </div>
                                            <div className={'productDetail clo333 font30'}>
                                                <p><span>货品名称:</span>雪碧 250ml</p>
                                                <p><span>所在区域:</span>A区1号柜<span className={'colff775c'} onClick={this.showImg.bind(this)}>位置照片</span></p>
                                                <p><span>货道信息:</span>第六行<span>第三货道</span><span>{tokeTaskProduct.positionNum}</span></p>
                                            </div>
                                      </div>
                                      {
                                             showButton?<div className={'productHandle'}>
                                             <div className={'productNum'}>
                                                     <p className={'font30 clo333'}>
                                                         <span>货品数量:</span>
                                                         <span className={'disNum'} onClick={this.productNum.bind(this,'dis')}>－</span>
                                                         <span className={'baseNum font50 colff775c'}>{initNum}</span>
                                                         <span className={'addNum'} onClick={this.productNum.bind(this,'add')}>＋</span>
                                                     </p>
                                             </div>
                                          <Button text={'提交'} btnContainer={'backff775c font32 colfff'} style={{marginTop:'80px'}} option={this.checkProductNum.bind(this)} />
                                          </div>:<Button text={'已放入'} btnContainer={'backff775c font32 colfff'} style={{marginTop:'280px'}} />
                                      }
                                  </div>
                             </div>
                         </RightContainer>
                         <PopupComponent 
                          popupInfo={{}}
                          />
                    </div>
            )
    }
    showImg(){
        let popupInfo={showPopup:true,popupChild:<img onClick={this.props.hidePopup} className={'defaultPopup'} src={UTILPATH.localImg.defaultImg} alt=""/>}
        this.props.showPopup(popupInfo)
    }
    productNum(str){
        let {initNum}=this.state;
        let tokeTaskProduct=this.props.tokeTaskProduct;
        if(str==='add'){
            initNum++;
            this.setState({
                initNum
            })
        }else if(str==='dis'){
            if(initNum>0){
               initNum--; 
            }
            this.setState({
                initNum
            })
        }
    }
    checkProductNum(){
        let {initNum}=this.state;
        let {workListId,skuPassId}=this.props.tokeTaskProduct;
        let tokeProductInfo={workListId,skuPassId,quantity:initNum}
        this.props.checkProductQuantity(tokeProductInfo)
    }
    componentWillReceiveProps(nextProps){
          let {type}=nextProps.TokeStokeState;
          switch(type){
              case 1 :
              this.setState({number:1,showButton:true})
              break;
              case 2 :
              this.setState({number:type})
              break;
              case 3 :
              this.setState({showButton:false})
              break;
          }
    }
   
}
export default TakeStokeContaniner