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 "../../components/CommonComponent/TextAreaContainer/TextAreaContainer";
import Qrcode from '../../components/CommonComponent/Qrcode/Qrcode'
import FinishTrouble from '../../components/TroubleComponent/FinishTroubleComponent/FinishTroubleComponent'
import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
import PopModel from '../../components/CommonComponent/PopupComponent/PopupMiddleComponent'
import LeftContainer from '../LeftContainer/LeftContainer';
import RightContainer from '../RightContainer/RightContainer';
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 : {},
            initialSlide : 0,
            tempinitialSlide : 0,
            btnClock : false
        };
        this.setItem = this.setItem.bind(this);
        this.showText = this.showText.bind(this);
        this.goBack = this.goBack.bind(this);
        this.saveText = this.saveText.bind(this);
        this.getDefaultDom = this.getDefaultDom.bind(this);
        this.getDefaultDoms = this.getDefaultDoms.bind(this);
        this.getTextAreaDom = this.getTextAreaDom.bind(this);
        this.dealTrouble = this.dealTrouble.bind(this);
        this.setStyle = this.setStyle.bind(this);
        this.abandonSaveText = this.abandonSaveText.bind(this);
    }


    componentWillMount(){
        let {headerInfo} = this.props;
        let {taskList={}} = headerInfo;
        this.setState({
            troubleList : taskList
        })
    }

    componentWillUnmount(){
        this.setState({
            btnClock : false
        })
    }

    componentWillReceiveProps(nextProps){
        let {headerInfo} = this.props;
        let {taskList={}} = headerInfo;
        let nextHeaderInfo = nextProps.headerInfo;
        let nextTaskList = nextHeaderInfo ? nextHeaderInfo.taskList : {};

        let troubleErrorCodeList = Array.isArray(taskList.detailList) ? taskList.detailList.map(i=>i.errorCode) : [];
        let nowtroubleErrorCodeList = Array.isArray(nextTaskList.detailList) ? nextTaskList.detailList.map(i=>i.errorCode) : [];

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

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


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

    setItem(errcode,option,info,callback){
        let troubleList = this.state.troubleList;
        let details = troubleList.detailList;
        let index = details.findIndex(d=>d.errorCode === errcode);
        if(index > -1){
            details[index][option] = info;
        }
        this.setState({
            troubleList : troubleList,
        },()=>{
            if(callback && callback instanceof Function){
                callback()
            }else{
                this.abandonSaveText()
            }

        })
    }

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

    abandonSaveText(){
        let {showPopup,hidePopup} = this.props;
        hidePopup();
        this.setState({
            currentErrorCode : 0,
            showStatus : showDom[1],
            tmpText: '',
            tmpUrl : '',
            style:{},
            initialSlide : this.state.tempinitialSlide
        })
    }

    goBack(hasChange){
        let {showPopup,hidePopup} = this.props;
        if(hasChange){
            let btnWidth = UTILPATH.getRemByPx(260);
            let btnMarginLeft = UTILPATH.getRemByPx(30);
            let btnDom1 = <Button btnContainer={"btne5"}  key={"textGoBackTrouble1"} style={{'width':btnWidth,'marginRight':btnMarginLeft}} text={"取消"} option={hidePopup}/>
            let btnDom2 = <Button btnContainer={"btne5"}  key={"textGoBackTrouble2"} style={{'width':btnWidth}} text={"放弃"} option={this.abandonSaveText}/>
            let popDom = <PopModel  popupText={"是否放弃更新编辑的内容?"} popupButtons={[btnDom1,btnDom2]}/>
            showPopup({popupChild:popDom});
        }else{
            this.abandonSaveText();
        }

    }

    dealTrouble(){
        if(!this.state.btnClock){
            this.setState({
                btnClock : true
            },()=>{
                let {showPopup,hidePopup,updateTroubleList} = this.props;
                let troubleList = this.state.troubleList;
                let details = troubleList.detailList;
                let arr = details.filter(d=>{
                    return !d.isExistProblem || ( d.isExistProblem === 1 && ! d.explanation)
                });
                let btnWidth = UTILPATH.getRemByPx(260);
                let btnDom = <Button btnContainer={"btne5"}  key={"dealTrouble1"} style={{'width':btnWidth}} text={"关闭"} option={hidePopup}/>
                if(arr && arr.length > 0){
                    let popDom = <PopModel  popupText={"请完成所有需要处理的故障的必填项"} popupButtons={[btnDom]}/>
                    showPopup({popupChild:popDom});
                    this.setState({
                        btnClock : false
                    })
                }else{
                    this.setState({
                        showTrouble : false
                    },()=>{
                        updateTroubleList(details);
                    })
                }
            })

        }

    }

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

            />;
        });
        let initialSlide = this.state.initialSlide;
        let swiperCount = details.length;
        let swiperOptions = {
            // width : 1396,
            slidesPerView: "auto",
            spaceBetween: 30,
            // freeMode:true,
            // pagination: '.pagination',
            // loop:false,
            mode: 'horizontal',
            touchRatio:0.5,
            longSwipesRatio:0.1,
            threshold:50,
            followFinger:false,
            observer: true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents: true,//修改swiper的父元素时，自动初始化swiper
            lazyLoadingInPrevNextAmount: 1,
            initialSlide : initialSlide
        };
        let swiperContainer = CONFIG.swiperContainers.troubleSwiperContainer;


        return(
            <div className={"toubleContainer " + (showTrouble ? '' : 'hide')}>
                {
                    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}
                                    initialSlide={initialSlide} canMove={true}
                                >
                                    {dom}
                                </SwiperComponent>
                            </div>
                            <div className={"troubleBtnBox"}>
                                <div className={"troubleBtn colfff font32"} onClick={()=>this.dealTrouble.bind(this)()}>
                                    处理完毕
                                </div>
                            </div>

                        </div> : null
                }
            </div>
        )
    }

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

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

    getDefaultDoms(){
        let props = this.props;
        let {headerInfo={}} = props;
        return (
            <div>
                <HeaderComponent
                    showHeader={CONFIG.headerStatus[1]}
                    headerInfo={headerInfo}
                    showLogoutPopup={this.showLogoutPopup}
                />
                <LeftContainer leftInfo={props.headerInfo} />
                <RightContainer style={{background:'transparent'}}>
                    <div className={"troubleContainers"} style={this.state.style}>
                        {
                            this.getDefaultDom()
                        }
                    </div>
                </RightContainer>
            </div>
        )
    }

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


    render(){
        return (
           <div>
               {
                   this.getDom()
               }
           </div>
        )
    }
}
