import React from 'react';
require('./index.css');
import ImgToolComponent from '../../../components/CommonComponent/ImgToolComponent/CommonSmalContainer'
export default class DamageItem extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            text: ''
        }
    }
    showImg(imgSrc){
        let {showPopup,hidePopup} = this.props;
        let showImgDom = <div onClick={()=>hidePopup()} className={"showBigImg"}>
            <img src={imgSrc} alt=""/>
        </div>;
        showPopup({
            popupChild : showImgDom
        });
    }
    render(){
        let {itemInfo,deleteItem} = this.props;
        let {lossPosition,packingStatus,skuBaseInfoVo,inventoryLossId,fileModelList} = itemInfo;
        let productContent = ''
            skuBaseInfoVo.skuAttributesVoList.map((item,index)=>{
            let newText = "";
            newText = item.value+item.unit;
            productContent+=newText;
        })
            let imgListUi = fileModelList.map((item,index)=>{
                console.log(item.filePath)
            return <ImgToolComponent
                key={index+"image"}
                noCloseBtn={true}
                type={"custom"}
                imgSrc = { item.filePath}
                handleClikImgFunc = {()=>{this.showImg(item.filePath)}}
            ></ImgToolComponent>
        })

        return (
            <div className={"damageProductItem"}>
                <span onClick={()=>{deleteItem(inventoryLossId)}} className={"closeBtn font50"}>×</span>
                <div className={"productBaseInfo clearfix"}>
                    <img className={"productImg"} src= {skuBaseInfoVo.skuImagePath} alt=""/>
                    <div className={"baseNumber"}>
                        <p className={"barcode"}>{skuBaseInfoVo.barcode}</p>
                        <p className={"skuNumnber"}>{skuBaseInfoVo.skuNumber}</p>
                        <p className={"productName"}>{skuBaseInfoVo.skuName}</p>
                        <p className={"net"}>{productContent}</p>
                    </div>
                    <div className={"productCount"}>
                        <span className={"multipleIcon"}>×</span>
                        <span className={"count"}>1</span>
                    </div>
                </div>
                <div className={"productOtherInfo"}>
                    <div className={"locationAndStatusInfo"}>
                        <p className={"location font32"}>商品位置:<span>{lossPosition}</span></p>
                        <p className={"status font32"}>商品状态:<span>{packingStatus}</span></p>
                    </div>
                    <div className={"damageImgs clearfix"}>
                        {imgListUi}
                    </div>
                </div>
            </div>
        )
    }
}