'use strict';
import React from 'react';
import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
import ProductDetailItem from '../../components/ScanBarCodeComponent/ProductDetailComponent/ProductDetailItem'
import PopupComponent from '../../components/CommonComponent/PopupComponent/PopupComponent'
import ButtonComponent from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
import Qrcode from '../../components/CommonComponent/Qrcode/Qrcode'

require('./index.css');
export default class ScanBarCodeContainer extends React.Component{
    constructor(props) {
        super(props);
        const {state, dispatch} = this.props;
        this.state = {
            "barCodeValue":'',
            "canChangeBtnColor":false,
            "showProductInfo":false,
            "showPopup":false,
            "popupInfo":{},
            "showQr":false,
            "qrUrl":"",
            "taskTy":"BS"
        }

    }
    componentWillMount() {
    }
    componentDidMount(){
    }
    componentDidUpdate() {
    }
    componentWillReceiveProps(nextProps){
        //显示查询到的商品的数据
        let {state,changePages} = nextProps;
        let {scanBarCode,userInfo,storeInfo,refreshImg,errMsg} = state;
        let productInfo = state.scanBarCode;
        let {inventorylossId,skuBaseInfoVo,packingList,positionList,data_currentProblemObj,submit} = productInfo;
        let {clearProductSuccess,showPopup,hidePopup} = this.props;
        if(submit){
            changePages(CONFIG.showPage[3]);
            return
        }
        let productDetailUi = <ProductDetailItem
                                    skuBaseInfoVo = {skuBaseInfoVo}
                                    packingList = {packingList}
                                    positionList = {positionList}
                                    inventorylossId = {inventorylossId}
                                    data_currentProblemObj = {data_currentProblemObj}
                                    handleAddImg ={this.handleAddImg.bind(this)}
                                    handleDeleteImg ={this.handleDeleteImg.bind(this)}
                                    handleRefreshImg ={this.handleRefreshImg.bind(this)}
                                    handleSubmitProductInfo = {this.handleSubmitProductInfo.bind(this)}
                                    handleSaveEditProductInfo = {this.handleSaveEditProductInfo.bind(this)}
                                    refreshImg = {refreshImg}
                                    changePages = {changePages}
                                    clearProductSuccess = {clearProductSuccess}
                                    showPopup={showPopup}
                                    hidePopup={hidePopup}
                                />
        if(scanBarCode.skuBaseInfoVo && scanBarCode.skuBaseInfoVo.skuId && (!errMsg.errMsg || errMsg.errMsg=="") ){
            this.setState({
                popupInfo:{
                    showPopup:true,
                    popupChild:productDetailUi
                },
                showProductInfo:true,
                canChangeBtnColor:true

            })
        }
        if(errMsg.errMsg){
            showProductInfo:false

        }

    }
    componentWillUnmount() {
        let {submitProductSuccess} = this.props;
        submitProductSuccess({"submit":false})
    }
    // 输入条形码改变 onchange事件监听 条形码的值
    handleSaveInputBarCode(event){
        let barCodeValue = event.target.value;
        this.setState({
            barCodeValue :barCodeValue
        },()=>{})

    }
    // 点击输入条形码 确定按钮
    handleSubmitInputClick(){
        // 1. 检查输入的条形码是否为空
        if(!this.state.barCodeValue){
            this.setState({
                showPopup:true,
                popupInfo:{
                    "popupText":"输入合法的条形码",
                    "showPopup":true,
                    "popupButtons": [<ButtonComponent key={"btn"+this.state.barCodeValue} option={this.handleTryAgainClick.bind(this)} text={"再次尝试"}/>]
                }
            })
            return
        }
        // 2. 请求查询接口
            //准备查询数据
        let {getProductInfo,state} = this.props;
        let {headerInfo} = state;
        let postData = {};
        postData.warehouseId = headerInfo.storeId?Number(headerInfo.storeId):"";
        postData.taskId = headerInfo.taskId?Number(headerInfo.taskId):"";
        postData.sellOrderId = headerInfo.sellOrderId?Number(headerInfo.sellOrderId):"";
        postData.skuBarcode = String(this.state.barCodeValue);
        getProductInfo(postData);
        this.setState({
            canChangeBtnColor:false,
        })

    }
    // 点击再次再次尝试
    handleTryAgainClick(){
        this.setState({
            showPopup:false
        })
    }

    handleInputBarCode(){
        this.setState({
            canChangeBtnColor:true
        })
    }
    handleOnclick(){
        this.setState({
            showProductInfo:true
        })
    }
    handleSaveEditProductInfo(data){
        let {saveEditProductInfo} = this.props;
        saveEditProductInfo(data)
    }
    //二维码返回
    handleQrBack(){
        this.setState({
            showQr:false
        })
    }
    //上传图片
    handleAddImg(){
        let {state} = this.props;
        let {storeInfo,scanBarCode} = state;
        let tmpUrl = "";
        tmpUrl =  `${ENV.uploadImg}/${scanBarCode.inventorylossId}/${this.state.taskTy}`
        this.setState({
            "showQr":true,
            "qrUrl":tmpUrl
        },()=>{
            console.log(this.state.qrUrl)
        })
        console.log("添加照片")
    }
    handleDeleteImg(id){
        console.log(id)
        let {deleteImg,state} = this.props;
        let {scanBarCode} = state;
        console.log(this.state.taskTy)
        deleteImg(scanBarCode.inventorylossId,this.state.taskTy,id);
    }
    handleRefreshImg(data){
        let {getRefreshImg,state} = this.props;
        let {scanBarCode} = state;
        getRefreshImg(scanBarCode.inventorylossId,this.state.taskTy);
        console.log("刷新照片")
    }
    //点击编辑报损的商品的提交按钮
    handleSubmitProductInfo(data){
        let {submitProductInfo,userInfo,storeInfo,headerInfo} = this.props;
        //检查如果选择了 包装损坏还没有上传图片的话进行提示
        let pakageStatus = data.packingStatus;
        let packingStatusImageIds = data.data_currentProblemObj;
        data.taskId = headerInfo.taskId?Number(headerInfo.taskId):""
        submitProductInfo(data);
    }
    render() {
        let {state} = this.props;
        let {userInfo,storeInfo} = state;
        let productInfo = state.scanBarCode;
        return (
            <div className={"scanBarCodeContainer"}>
                {this.state.showQr?(
                    <Qrcode goBack={this.handleQrBack.bind(this)}  url={this.state.qrUrl}></Qrcode>
                ):(
                    <div>
                        <HeaderComponent
                            showHeader={CONFIG.headerStatus[1]}
                            userinfo={userInfo}
                            storeInfo={storeInfo}
                        />
                        <div className={"container"}>
                            <div className={"inputContaienr"}>
                                <input
                                    onChange={this.handleSaveInputBarCode.bind(this)} onFocus={()=>{this.handleInputBarCode.bind(this)()}} placeholder={"点击输入条形码 "} className={"barcodeValueInput"} type="text"/>
                                <button disabled={!this.state.canChangeBtnColor?true:false} onClick={this.handleSubmitInputClick.bind(this)}  className={this.state.canChangeBtnColor?"submitBtn btnFous":"submitBtn"}>确定</button>
                            </div>
                            {
                                this.state.showProductInfo?(
                                    <PopupComponent popupInfo = {this.state.popupInfo}/>
                                ):""
                            }
                        </div>
                    </div>
                )}

            </div>
        )
    }
}
function select(store) {
    return Object.assign({}, {state: store})
}