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:0,
             positionColor:0,
             productPos:[1,2,3,4]
         }
    }

    render (){
        let {breakageProductInfo}=this.props;
        let {packStatus,statusColor,positionColor,productPos} =this.state;
        return (
            <div>
                {
                    Object.keys(breakageProductInfo).length>0?
                      <div className={'breakageContent'}>
                        {
                             breakageProductInfo.product?<div className={'commonPage'}>
                             <div className={'pageTitle clo333 font40'} style={{marginBottom:UTILPATH.getRemByPx(20)}}>
                                     <span>上报遗留货品信息</span>
                             </div>
                             <div className={'pagebox'}> 
                                   <div className={'breakProduct'}>
                                      <div className={'breakProductInfo'}>
                                         <div className={'breakProductImg'}>
                                            <img src={breakageProductInfo.product&&breakageProductInfo.product.skuImage&&UTILPATH.getPic(breakageProductInfo.product.skuImage,'middle')} alt=""/>
                                         </div>
                                         <div style={{textAlign:'left',marginLeft:UTILPATH.getRemByPx(10)}}>
                                             <h2 className={'col333 font40'} style={
                                                 {
                                                     fontWeight:'600',
                                                     width:'4.5rem',
                                                     overflow:'hidden',
                                                     textOverflow:'ellipsis',
                                                     whiteSpace:'nowrap',
                                                     height:'.5rem',
                                                     lineHeight:'.5rem',
                                                     marginTop:'.1rem'
                                                    }
                                                 }>{breakageProductInfo.product.skuName}</h2>
                                             <p className={'col333 font28'} style={{marginTop:'.1rem'}}><span>条形码:</span>{breakageProductInfo.product.barcode}</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> */}
                                                 {
                                                     breakageProductInfo.product.skuPositionList&&breakageProductInfo.product.skuPositionList.length===0?
                                                     null:breakageProductInfo.product.skuPositionList&&breakageProductInfo.product.skuPositionList.map((item,key)=>{
                                                         return  <li 
                                                                    key={key} 
                                                                    className={positionColor===key?'active':''}
                                                                    onClick={this.changePositionColor.bind(this,key)}
                                                                    >
                                                                    <img src={item.filePath} alt=""/>
                                                                    <span className={'font28 col333'}>{item.name}</span>
                                                                 </li>
                                                     })
                                                 }
                                             </ul>
                                      </div>
                                   </div>
                                   <div className={'breakProductPosition'}>
                                       {breakageProductInfo.product.skuPositionList&&breakageProductInfo.product.skuPositionList[positionColor]?<img src={breakageProductInfo.product.skuPositionList[positionColor].filePath} alt=""/>:null}
                                       <span className={'font28 col333'} style={{marginTop:'0.2rem',display:'inline-block'}}>{breakageProductInfo.product.skuPositionList&&breakageProductInfo.product.skuPositionList[positionColor]?breakageProductInfo.product.skuPositionList[positionColor].name:''}</span>
                                   </div>
                             </div>
                           </div> :null
                        }
                      <Button btnContainer={'colfff font30 backff775c'} text={'提交'} style={{position:'absolute',bottom:UTILPATH.getRemByPx(120),left:'50%',transform:'translate(-50%)'}} option={this.changePageDefault.bind(this)} />
                </div>:null
                }
            </div>
        )
    }
    
    //改变显示的报损页面
    changePageDefault(){
        let {product}=this.props.breakageProductInfo;
        let {statusColor,packStatus,positionColor}=this.state;
        let id=product.skuPositionList&&product.skuPositionList[positionColor]&&product.skuPositionList[positionColor].id?product.skuPositionList[positionColor].id  : '';
        let productDetail={skuId:product.skuId,skuStatus:packStatus[statusColor].code,skuPosition:id}
        this.props.submitBreakageProduct(productDetail);
        this.props.changePopShow(true)
    }

    //点击添加商品状态选中样式
    changeProductStatus(key){
        this.setState({statusColor:key})
    }

    //点击添加商品位置选中状态
    changePositionColor(key){
        this.setState({positionColor:key})
    }
}
export default BreakageProductDetail