import React from 'react';
import SwiperComponent from '../../../components/CommonComponent/SwiperComponent/SwiperComponent';
require('./index.css');
import ImgToolComponent from '../../../components/CommonComponent/ImgToolComponent/CommonSmalContainer';
export default class ProductDetailItem extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            currentPosition:undefined,
            currentPakageStatus:undefined,
            currentImgFiles:[],
            canClickSubmitBtn:true,
        }
    }
    componentWillMount(){
        let {data_currentProblemObj,refreshImg,handleSaveEditProductInfo} = this.props;
        this.setState({
            currentPosition:data_currentProblemObj.lossPostion,
            currentPakageStatus:data_currentProblemObj.packingStatus,
            currentImgFiles:refreshImg.files
        })
    }
    componentWillReceiveProps(nextProps){
        let {refreshImg,handleSaveEditProductInfo} = nextProps;
        let imgList = refreshImg.files && refreshImg.files.length>0 ? refreshImg.files:[];
        let lastRefreshImg = this.props.refreshImg;
        let lastImgList = lastRefreshImg.files && lastRefreshImg.files.length>0 ? lastRefreshImg.files:[];
        if(String(imgList)!= String(lastImgList)){
            let newImgIds = imgList.map((item,index)=>{
                return Number(item.id);
            })
            let saveDataObj = {};
            this.setState({
                currentImgFiles:refreshImg.files
            },()=>{
                saveDataObj.type = "imgList";
                saveDataObj.data = newImgIds;
                handleSaveEditProductInfo(saveDataObj)
            })
        }

    }
    // 点击选择商品位置
    handleSelectPosition(event){
        let {handleSaveEditProductInfo} = this.props;
        let currentValue = event.currentTarget.getAttribute('date-value');
        let saveDataObj = {};
        this.setState({
            currentPosition:currentValue
        },()=>{
            saveDataObj.type = "productPosition";
            saveDataObj.data = currentValue;
            handleSaveEditProductInfo(saveDataObj)
        })
    }
    //点击选择商品包装状态
    handleSelectStaus(event){
        let {handleSaveEditProductInfo} = this.props;
        let saveDataObj = {};
        let currentValue = event.currentTarget.getAttribute('date-value');
        this.setState({
            currentPakageStatus:currentValue
        },()=>{
            saveDataObj.type = "productPakingStatus";
            saveDataObj.data = currentValue;
            handleSaveEditProductInfo(saveDataObj)
        })
    }

    handleSubmit(){
        let {handleSubmitProductInfo,data_currentProblemObj,clearProductSuccess} = this.props;
        this.setState({
            canClickSubmitBtn:false
        })
        handleSubmitProductInfo(data_currentProblemObj);
        clearProductSuccess()

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

    render(){
        let props = this.props;
        let {skuBaseInfoVo,packingList,positionList,refreshImg} = this.props;
        let imgFileList = refreshImg.files?refreshImg.files:[];
        let productContent = '';
        let swiperContainer = CONFIG.swiperContainers.productPostionContainer;
        let swiperOptions = {
            // width : 260,
            slidesPerView: "auto",
            // spaceBetween: 30,
            freeMode:true
        };
        let swiperCount = positionList.length;
        let positonUi = positionList.map((item,index)=>{
                return <li key={"position"+index}
                        date-value = {index}
                        className={index == this.state.currentPosition?"checkLi":""}
                        onClick={this.handleSelectPosition.bind(this)}>
                        {item}
                </li>

        })
        let statusUi = packingList.map((item,index)=>{
            return <li
                key={"pakingStatus"+index}
                date-value = {index}
                className={index == this.state.currentPakageStatus?"checkLi":""}
                onClick={this.handleSelectStaus.bind(this)}
            >{item}</li>
        })
        let imgListUi = imgFileList.map((item,index)=>{
            return <ImgToolComponent
                key={"img"+index}
                type={"custom"}
                noCloseBtn ={false}
                imgSrc = {item.filePath}
                handleClikCloseFunc = {()=>{props.handleDeleteImg(item.id)}}
                handleClikImgFunc = {()=>{this.showImg(item.filePath)}}

            ></ImgToolComponent>
        })
        skuBaseInfoVo.skuAttributesVoList.map((item,index)=>{
            let newText = "";
            newText = item.value+item.unit;
            productContent+=newText;
        })
        return (
            <div className={"productContainer clearfix"}>
                <div className={"baseInfo clearfix"}>
                    <img className={"productImg"} src={skuBaseInfoVo.skuImagePath} alt=""/>
                    <div className={"skuInfo"}>
                        <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>
                <div className={"locationInfo clearfix"}>
                    <div className={"infoTitle"}>商品位置</div>
                    <ul className={"detailContainer clearfix"}>
                        {
                            <SwiperComponent   swiperContainer={swiperContainer}
                                               swiperOptions={swiperOptions}
                                               swiperCount={swiperCount}>{positonUi}
                            </SwiperComponent>

                       }

                    </ul>
                </div>
                <div className={"statusInfo"}>
                    <div className={"infoTitle"}>商品状态</div>
                    <ul className={"detailContainer clearfix"}>
                        {statusUi}
                    </ul>
                </div>
                <div className={"uploadContainer clearfix"}>
                    <div className={"uploadImgRight"}>
                        {imgListUi}
                    </div>
                    {
                        this.state.currentPakageStatus == 1?(
                            <div className={"operationLeft"}>
                                <ImgToolComponent
                                    type={"add"}
                                    noCloseBtn = {true}
                                    handleClikImgFunc = {props.handleAddImg}
                                ></ImgToolComponent>
                                <ImgToolComponent
                                    type={"refresh"}
                                    noCloseBtn = {true}
                                    handleClikImgFunc = {props.handleRefreshImg}
                                ></ImgToolComponent>
                            </div>
                        ):""
                    }


                </div>
                <div className={"btnContainer"}>
                    <button
                        onClick={this.handleSubmit.bind(this)}
                        className={"submitEditBtn"+(this.state.currentPosition==undefined || this.state.currentPakageStatus==undefined ||((Number(this.state.currentPakageStatus)==2 && imgFileList.length<=0)||!this.state.canClickSubmitBtn)?" ":" selectBtn")}
                        disabled={(this.state.currentPosition==undefined || this.state.currentPakageStatus==undefined ||(Number(this.state.currentPakageStatus)==2 && imgFileList.length<=0)||!this.state.canClickSubmitBtn)?true:false}
                    >提交</button>
                </div>
            </div>
        )
    }
}