import React from 'react';
require('./index.css')
export default class SkuInfoComponent extends React.Component{
    constructor(props){
        super(props);
        this.showImg = this.showImg.bind(this)
        this.state={
            style : {
                width:"100%",
                height : "auto"
            }
        }
    }

    handleErrorImg(ref){
        let nowRef = this.refs[ref];
        let newSrc = UTILPATH.handleImgError(nowRef);
        nowRef.src = newSrc;
    }

    handleLoadImg(ref){
        let nowRef = this.refs[ref];
        let style = UTILPATH.handleImgLoad(nowRef);
        this.setState({
            style:style
        })
    }

    showImg(imgSrc){
        let {showPopup,hidePopup} = this.props;
        let showImgDom = <div onClick={()=>hidePopup()} className={"showBigImg"}>
            <img src={imgSrc || UTILPATH.localImg.defaultImg} alt=""/>
        </div>;
        showPopup({
            popupChild : showImgDom
        });
    }


    render(){
        let props = this.props;
        let {classNames='',style={},skuInfo={},taskType=""} = props;
        return (
            <div className={"skuInfoComponent " + classNames} style={style}>
                <div className={"img"}>
                    <img style={this.state.style} ref={"secondPageImg"} onLoad={()=>this.handleLoadImg.bind(this)("secondPageImg")} onError={()=>this.handleErrorImg.bind(this)("secondPageImg")} src={UTILPATH.getPic(skuInfo.skuImage,"middle")} alt=""/>
                </div>
                <ul className={"shelfInfo font30 col333"}>
                    <li className={""}>
                        <span className={""}>货品名称：{skuInfo.skuName || ''}</span>
                        {
                            skuInfo.targetNum ? <span className={"totalNum "}>需回收数量：<span className={"font40 colff775c"}>{skuInfo.targetNum || 0}</span></span>
                                : null
                        }
                     </li>
                    <li className={""}>
                        <span className={""}>所在区域：{skuInfo.area || ''}
                            {
                                skuInfo.areaImage ? <span className={"areaBtn colff775c"} onClick={()=>this.showImg(skuInfo.areaImage)}>位置照片</span> : null
                            }
                        </span>
                        {
                            taskType === "RE" ? <span className={"currentNum"}>已回收数量：<span className={"font40 colff775c"}>{skuInfo.recoverNum || 0}</span></span>
                                : null
                        }

                    </li>
                    <li className={""}>货道信息：{skuInfo.position || ''}</li>
                </ul>
            </div>
        )
    }
}