import React from 'react'
import Button from '../../../components/CommonComponent/ButtonComponent/ButtonComponent'
require('./index.css')
class BreakageProductDetail extends React.Component{
    constructor(props){
         super(props);
         this.state={
             packStatus:[
                 {
                    status:'包装完整',
                    code:1
                 },
                 {
                     status:'包装损坏',
                     code:2
                 }
             ],
             statusColor:-1
         }
    }

    render (){
        let {breakageProductInfo}=this.props;
        let {packStatus,statusColor} =this.state;
        return (
            <div>
                {
                    Object.keys(breakageProductInfo).length>0?
                      <div className={'breakageContent'}>
                      <div className={'commonPage'}>
                        <div className={'pageTitle clo333 font40'} style={{marginBottom:'20px'}}>
                                <span>上报遗留货品信息</span>
                        </div>
                        <div className={'pagebox'}> 
                              <div className={'breakProduct'}>
                                 <div className={'breakProductInfo'}>
                                    <div className={'breakProductImg'}>
                                        <img src={breakageProductInfo.product.skuImage} alt=""/>
                                    </div>
                                    <div style={{marginTop:'30px',textAlign:'left',marginLeft:'10px'}}>
                                        <h2 className={'col333 font40'} style={{fontWeight:'800'}}>{breakageProductInfo.product.skuName}</h2>
                                        <p className={'col333 font28'} style={{marginTop:'20px'}}><span>条形码:</span>56546213456554</p>
                                    </div>
                                 </div>
                                 <div className={'breakProductStatus'}>
                                        <h4 className={'col333 font32'}>货品状态</h4>
                                        <p className={'col333 font28'}>
                                            {
                                                packStatus.map((item,key)=>{
                                                   return <span key={key} className={statusColor===key?'active':''} onClick={this.changeProductStatus.bind(this,key)} >{item.status}</span>
                                                })
                                            }
                                        </p>
                                 </div>
                                 <div className={'ProductPosition'}>
                                        <h4 className={'col333 font32'}>请选择货品的位置:</h4>
                                        <ul className={'imgList'}>
                                            <li><img src={UTILPATH.localImg.defaultImg} alt=""/><span className={'font28 col333'}>上</span></li>
                                            <li className={'active'}><img src={UTILPATH.localImg.defaultImg} alt=""/><span className={'font28 col333'}>下</span></li>
                                            <li><img src={UTILPATH.localImg.defaultImg} alt=""/><span className={'font28 col333'}>左</span></li>
                                            <li><img src={UTILPATH.localImg.defaultImg} alt=""/><span className={'font28 col333'}>右</span></li>
                                        </ul>
                                 </div>
                              </div>
                              <div className={'breakProductPosition'}>
                                        <img src={UTILPATH.localImg.defaultImg} alt=""/>
                              </div>
                        </div>
                      </div> 
                      <Button btnContainer={'colfff font30 backff775c'} text={'提交'} style={{position:'absolute',bottom:'120px',left:'50%',transform:'translate(-50%)'}} option={this.changePageDefault.bind(this)} />
                </div>:null
                }
            </div>
        )
    }
    changePageDefault(){
        let {product}=this.props.breakageProductInfo;
        let {statusColor}=this.state;
        let productDetail={skuId:product.skuId,skuStatus:statusColor,skuPosition:0}
        this.props.submitBreakageProduct(productDetail);
        this.props.changePopShow(true)
    }
    changeProductStatus(key){
        this.setState({statusColor:key})
    }
}
export default BreakageProductDetail