import React from 'react';
import SwiperComponent from '../../components/CommonComponent/SwiperComponent/SwiperComponent'
import TroubleItem from '../../components/TroubleComponent/TroubleItemComponent/TroubleItemComponent'
import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
import TextArea from "../TextAreaContainer/TextAreaContainer";
import Qrcode from '../Qrcode/Qrcode'
import FinishTrouble from '../../components/TroubleComponent/FinishTroubleComponent/FinishTroubleComponent'
import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
require('./index.css')

const showDom={
    1:'default',
    2:'textArea',
    3:'qrcode'
};

export default class TroubleContainer extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showTrouble : true,
            troubleList : {},
            currentErrorCode : 0,
            tmpText : '',
            tmpUrl : '',
            showStatus:showDom[1],
            style : {}
        };
        this.setItem = this.setItem.bind(this);
        this.showText = this.showText.bind(this);
        this.showQrcode = this.showQrcode.bind(this);
        this.goBack = this.goBack.bind(this);
        this.saveText = this.saveText.bind(this);
        this.getDefaultDom = this.getDefaultDom.bind(this);
        this.getTextAreaDom = this.getTextAreaDom.bind(this);
        this.getQrcodeDom = this.getQrcodeDom.bind(this);
        this.updateImg = this.updateImg.bind(this);
        this.dealTrouble = this.dealTrouble.bind(this);
        this.setStyle = this.setStyle.bind(this);
    }


    componentWillMount(){
        let {troubleList} = this.props;
        // initTroubleList();
        this.setState({
            troubleList : troubleList
        })
    }

    componentWillReceiveProps(nextProps){
        let troubleList = nextProps.troubleList;
        let nowTroubleList = this.state.troubleList;
        let troubleErrorCodeList = Array.isArray(troubleList.details) ? troubleList.details.map(i=>i.errorCode) : [];
        let nowtroubleErrorCodeList = Array.isArray(nowTroubleList.details) ? nowTroubleList.details.map(i=>i.errorCode) : [];

        //上一次和这一次不一样
        let troubleErrorCodeListStr = troubleErrorCodeList.join(",");
        let nowtroubleErrorCodeListStr = nowtroubleErrorCodeList.join(",");

        if(
            troubleErrorCodeListStr !== nowtroubleErrorCodeListStr
        ){
            this.setState({
                troubleList : troubleList
            })
        }

        let refreshImg = nextProps.refreshImg;
        if(refreshImg && refreshImg.errorId && refreshImg.type && refreshImg.files){
            this.updateImg(refreshImg);
        }


    }

    updateImg(info){
        let id = info.errorId;
        let type = info.type;
        let files = info.files;
        let troubleList = this.state.troubleList;
        let details = troubleList.details;
        let indexInfo = details.find(d=>d.id === id && d.type === type);
        if(indexInfo && indexInfo.id){
            this.setItem(indexInfo.errorCode,"files",files);
        }
    }

    showText(errcode){
        let troubleList = this.state.troubleList;
        let details = troubleList.details;
        let indexInfo = details.find(d=>d.errorCode === errcode);
        if(indexInfo && indexInfo.id){
            let text = indexInfo.explanation;
            this.setState({
                currentErrorCode : errcode,
                showStatus : showDom[2],
                tmpText: text,
            })
        }
    }

    showQrcode(errcode){
        let troubleList = this.state.troubleList;
        let details = troubleList.details;
        let indexInfo = details.find(d=>d.errorCode === errcode);
        if(indexInfo && indexInfo.id){
            this.setState({
                currentErrorCode : errcode,
                showStatus : showDom[3],
                tmpUrl: `${ENV.uploadImg}/${indexInfo.id}/${indexInfo.type}`,
            })
        }
    }

    setItem(errcode,option,info){
        let troubleList = this.state.troubleList;
        let details = troubleList.details;
        let index = details.findIndex(d=>d.errorCode === errcode);
        if(index > -1){
            details[index][option] = info;
        }
        this.setState({
            troubleList : troubleList,
        },()=>{
            this.goBack()
        })
    }

    saveText(text){
        let errcode = this.state.currentErrorCode;
        this.setItem(errcode,'explanation',text);
    }

    goBack(){
        this.setState({
            currentErrorCode : 0,
            showStatus : showDom[1],
            tmpText: '',
            tmpUrl : '',
            style:{}
        })
    }

    dealTrouble(){
        let {showPopup,hidePopup,updateTroubleList} = this.props;
        let troubleList = this.state.troubleList;
        let details = troubleList.details;
        let arr = details.filter(d=>{
            return !d.isExistProblem || ( d.isExistProblem === 1 && ! d.explanation)
        });

        let btnDom = <Button key={"dealTrouble1"} style={{'width':'260px'}} text={"关闭"} option={hidePopup}/>
        if(arr && arr.length > 0){
            showPopup({
                popupText:'请完成所有需要处理的故障的必填项',
                popupButtons:[btnDom]
            })
        }else{
            details.forEach((d)=>{
                d.imagesFileId = d.files.map(f=>f.id).join(',');
            });
            updateTroubleList(details);
            this.setState({
                showTrouble : false
            })
        }
    }

    getDefaultDom(){
        let {userInfo,storeInfo,getRefreshImg,deleteImg,changePages,showPopup,hidePopup} = this.props;
        let troubleList = this.state.troubleList;
        let showTrouble = Array.isArray(troubleList.details) && troubleList.details.length > 0;
        let details = Array.isArray(troubleList.details) ? troubleList.details : [];
        let dom = details.map((i,k)=>{
            return <TroubleItem key={k} item={i} num={k+1} setItem={this.setItem}
                                showText={this.showText} showQrcode={this.showQrcode}
                                getRefreshImg={getRefreshImg}
                                deleteImg={deleteImg}
                                showPopup={showPopup}
                                hidePopup={hidePopup}

            />;
        });
        let swiperOptions = {
            width : 1396,
            spaceBetween: 30,
            freeMode:true,
        };
        let swiperContainer = CONFIG.swiperContainers.troubleSwiperContainer;
        let swiperCount = details.length;
        return(
            <div className={"toubleContainer " + (showTrouble ? '' : 'hide')}>
                <HeaderComponent
                    showHeader={CONFIG.headerStatus[1]}
                    userinfo={userInfo}
                    storeInfo={storeInfo}
                />

                {
                    this.state.showTrouble ?
                        <div className={"troubleContent " + ( this.state.showTrouble ? '' : 'hide')}>
                            <div className={"troubleText font32"}><span className={"colff7860"}>* </span>必填项</div>
                            <div className={"troubleBox"}>
                                <SwiperComponent
                                    swiperContainer={swiperContainer} swiperOptions={swiperOptions} swiperCount={swiperCount}
                                >
                                    {dom}
                                </SwiperComponent>
                            </div>
                            <div className={"troubleBtnBox"}>
                                <div className={"troubleBtn colfff font32"} onClick={()=>this.dealTrouble.bind(this)()}>
                                    处理完毕
                                </div>
                            </div>

                        </div> : <FinishTrouble changePages={changePages}/>
                }
            </div>
        )
    }

    setStyle(style){
        this.setState({
            style : style
        })
    }

    getTextAreaDom(){
        return <TextArea
            text={this.state.tmpText}
            goBack={this.goBack}
            saveText={this.saveText}
            setStyle={this.setStyle}
        />
    }

    getQrcodeDom(){
        return <Qrcode goBack={this.goBack} url={this.state.tmpUrl}/>
    }

    getDom(){
        switch (this.state.showStatus){
            case showDom[1]:
                return this.getDefaultDom();
            case showDom[2]:
                return this.getTextAreaDom();
            case showDom[3]:
                return this.getQrcodeDom();
            default :
                return null;
        }
    }


    render(){
        return (
            <div className={"troubleContainers "+(this.state.showStatus === showDom[2] ? 'backfff' : '')} style={this.state.style}>
                {
                    this.getDom()
                }
            </div>
        )
    }
}