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:'-'
         }
    }

    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={UTILPATH.getPic(tokeTaskProduct.skuImage,"middle")} alt=""/>
                                            </div>
                                            <div className={'productDetail clo333 font30'}>
                                                <p><span>货品名称:</span>{tokeTaskProduct.skuName}</p>
                                                <p><span>所在区域:</span>{tokeTaskProduct.area}<span className={'colff775c'} onClick={this.showImg.bind(this)}>位置照片</span></p>
                                                <p><span>货道信息:</span>{tokeTaskProduct.position}<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'} style={{opacity:initNum==='-'?0:1}}>{initNum}</span>
                                                         <span className={'addNum'} onClick={this.productNum.bind(this,'add')}>＋</span>
                                                     </p>
                                             </div>
                                          <Button text={'提交'} btnContainer={'font32 colfff'} style={{marginTop:UTILPATH.getRemByPx(80),background:initNum==='-'?'#ededed':'#ff7860'}} option={this.checkProductNum.bind(this)} />
                                          </div>:<Button option={this.clickPutIn.bind(this)} text={'已放入'} btnContainer={'backff775c font32 colfff'} style={{marginTop:UTILPATH.getRemByPx(280)}} />
                                      }
                                  </div>
                             </div>
                         </RightContainer>
                         <PopupComponent 
                          popupInfo={{}}
                          />
                    </div>
            )
    }
    //显示放大显示
    showImg(){
        let props = this.props;
        let tokeTaskProduct=props.tokeTaskProduct;
        let popupInfo={showPopup:true,popupChild:<img onClick={this.props.hidePopup} className={'defaultPopup'} src={tokeTaskProduct.skuImage} alt=""/>}
        this.props.showPopup(popupInfo)
    }
    //产品数量的加减
    productNum(str){
        let {initNum}=this.state;
        if(str==='add'){
            if(initNum==='-'){
                 initNum=0;
            }else{
                 initNum++;
            }
            this.setState({
                initNum
            })
        }else if(str==='dis'){
            if(initNum>0){
               initNum--; 
            }
            this.setState({
                initNum
            })
        }
    }
    //核对产品数量
    checkProductNum(){
        let {initNum}=this.state;
        if(initNum!=='-'){
            let {workListId,skuPassId}=this.props.tokeTaskProduct;
            let tokeProductInfo={workListId,skuPassId,quantity:initNum}
            this.props.checkProductQuantity(tokeProductInfo)
        }
        
    }
    //根据后台返回的数据  判断显示的组件
    componentWillReceiveProps(nextProps){
          if(!(this.props.TokeStokeState.type===3&&nextProps.TokeStokeState.type===3)){
                let {type}=nextProps.TokeStokeState;
                switch(type){
                    case 1 :
                    this.setState({number:1,showButton:true,initNum:'-'})
                    break;
                    case 2 :
                    this.setState({number:type,initNum:'-',showButton:true})
                    break;
                    case 3 :
                    this.setState({showButton:false})
                    break;
                }
          }
         
    }
    //点击已放入 继续拉取工单
    clickPutIn(){
        this.props.getTaskList();
        this.setState({number:1,showButton:true,initNum:0})
    }
   
}
export default TakeStokeContaniner