'use strict';
import React from 'react';
import SwiperComponent from '../../components/CommonComponent/SwiperComponent/SwiperComponent'
import EditProblemItem from '../../components/OtherQuestionComponent/EditProblemComponent'
import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
import PopupComponent from '../../components/CommonComponent/PopupComponent/PopupComponent'
import ButtonComponent from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
import TextArea from "../../components/CommonComponent/TextAreaContainer/TextAreaContainer";
import PopupModel from '../../components/CommonComponent/PopupComponent/PopupMiddleComponent'
let overPassIcon = UTILPATH.localImg.overPassIcon;
import Qrcode from '../../components/CommonComponent/Qrcode/Qrcode'
require('./index.css');
export default class OtherQuestionContainer extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            showTextArea:false,
            tmpText:"",
            currentProblemId:'',
            showQr:false,
            qrUrl:"",
            taskTy:"OP",
            showPop:false,
            popupInfo:{},
            bigProblemTitle:"",
            detailProblemTitle:""
        }
    }
    componentWillMount() {
        let {initStart,state} = this.props;
        let {commonInfo={}} = state;
        let {userInfo={},storeInfo={}} = commonInfo;
        // 请求 初始数据接口
        let postData = {
            employeeId:userInfo.employeeId?userInfo.employeeId:"",
            storeId:storeInfo.id?storeInfo.id:""
        };
        initStart(postData);

    }
    componentDidMount(){
    }
    componentDidUpdate() {
    }
    componentWillReceiveProps(nextProps){
        let {state,changePages} = nextProps;
        let {otherQuestion} = state;
        if(otherQuestion.submitOtherProblem){
            changePages(CONFIG.showPage[8])
        }

    }
    componentWillUnmount(){
    }
    /*
    * 输入故障备注信息部分
    * */
    // 1. 显示编辑备注组件
    handleShowRemark(troubleId){
        let {state} = this.props;
        let {otherQuestion} = state;
        let problemList = otherQuestion.data_allProblemList;
        let currentProblem = problemList[troubleId];
        let tmpText = currentProblem.remark;
        this.setState({
            showTextArea : true,
            tmpText: tmpText,
            currentProblemId:troubleId
        })
    }
    handleRealExitEditRemarkOpeation(type){
        if(type == "exit"){
            this.setState({
                showTextArea:false,
                showPop:false
            })
        }
        if(type == "cancel"){
            this.setState({
                showPop:false})
        }
    }
    // 2. 在编辑备注页面组件 点击返回
    handleEditGoBack(hasChange){
        if(!hasChange){
            this.handleRealExitEditRemarkOpeation("exit");
        }else{
            this.setState({
                showPop:true,
                popupInfo:{
                    popupText:"是否放弃更新编辑的内容",
                    showPopup:true,
                    popupButtons: [<ButtonComponent key={"backBtn"} btnContainer={"btne5"} option={this.handleRealExitEditRemarkOpeation.bind(this,"cancel")} text={"取消"}/>,<ButtonComponent key={"btn"} btnContainer={"btne5"} option={this.handleRealExitEditRemarkOpeation.bind(this,"exit")} text={"确定"}/>]
                }
            })
        }
    }
    // 3. 在编辑备注组件页面 点击保存
    handleSaveRemarkText(text){
        let {editProblemItem} = this.props;
        let data = {};
        data.type = "remark";
        data.troubelId = this.state.currentProblemId;
        data.remarkText = text;
        editProblemItem(data);
        this.setState({
            showTextArea:false
        })
    }
    /*
    * 点击录入更多 添加新故障
    * */

    handleAddNewTroble(){
        let postData = {};
        let {addNewProblem,state} = this.props;
        let {commonInfo={}} = state;
        let {userInfo={},storeInfo={}} = commonInfo;
        postData.employeeId = userInfo.employeeId?userInfo.employeeId:"";
        postData.storeId = storeInfo.id?storeInfo.id:"";

        addNewProblem(postData);
    }
    /*
    * 删除已经编辑的的问题
    * */
    handleDeleteProblem(troubleId,type){
        let {deleteProblem,state} = this.props;
        let {commonInfo={}} = state;
        let {userInfo={},storeInfo={}} = commonInfo;
        let postData = {};
        postData.feedIds =String(troubleId);
        postData.employeeId = userInfo.employeeId?userInfo.employeeId:"";
        postData.storeId = storeInfo.id?storeInfo.id:"";
        postData.type = type;
        deleteProblem(postData);

    }
    handleSubmitProblemList(){
        let {submitProblemList,state}=this.props;
        let {commonInfo={}} = state;
        let {userInfo={},storeInfo={}} = commonInfo;
        let that = this;
        let problemList = state.otherQuestion.data_allProblemList;
        //编辑成想要的格式
        let postData = {};
        postData.problems = [];
        for(let key in problemList){
            let currentObj = problemList[key];
            let tempObj = {};
            tempObj.id = currentObj.id;
            tempObj.problemType = currentObj.problemType;
            tempObj.detailProblemType = currentObj.detailProblemType;
            tempObj.remark = currentObj.remark;
            let newImgIds = []
            if(currentObj.files&&currentObj.files.length>0){
                newImgIds = currentObj.files.map((item,index)=>{
                    return item.id
                })
            }

            tempObj.imagesFileId = newImgIds.join(',');
            postData.problems.push(tempObj);
        }
        postData.employeeId = userInfo.employeeId?userInfo.employeeId:"";
        postData.storeId = storeInfo.id?storeInfo.id:"";
        //检查 postData.problems
        let problemsLength = postData.problems.length;
        let needEdit = [];
        postData.problems.map((item,index)=>{
            if(item.problemType == undefined || item.remark == ""){
                needEdit.push(item.id)
            }
            if(index+1 == postData.problems.length && needEdit.length==0){
                submitProblemList(postData)
            }
            if(index+1 == postData.problems.length && needEdit.length>0){
                that.setState({
                    showPop:true,
                    popupInfo:{
                        popupText:"提交前请输入相关信息，如果不想提交可以直接跳过(右上角)",
                        showPopup:true,
                        classNames : 'popupExtClass',
                        popupButtons: [<ButtonComponent btnContainer={"btne5"}  key={"btn"} option={this.handleShowPopo.bind(this)} text={"确定"}/>]
                    }
                })
            }
        })

        /*changePages(CONFIG.showPage[8])*/

    }
    /*处理提示框*/;

    handleShowPopo(){
        this.setState({
            showPop:false
        })
    }

    /*
    *添加照片
    * */
    handleAddImg(troubleId){
        let tmpUrl = "";
        tmpUrl =  `${ENV.uploadImg}/${troubleId}/${this.state.taskTy}`
        this.setState({
            "showQr":true,
            "qrUrl":tmpUrl
        },()=>{
            console.log("=======================设置的二维码===========")
            console.log(this.state.qrUrl)
        })
        console.log("添加照片")
    }


    /*
    *刷新当前图片
    * */
    handleRefreshProbelmImg(troubleId,troubleType){
        let {getRefreshImg} = this.props;
        getRefreshImg(troubleId,troubleType)
    }
    /*
    * 删除图片
    * */
    handleDeleteImg(errorId,taskType,fileId){
        let {deleteImg} = this.props;
        deleteImg(errorId,taskType,fileId)
    }



    handleOverPass(){
        let {deleteProblem,state} = this.props;
        let {commonInfo={}} = state;
        let {userInfo={},storeInfo={}} = commonInfo;
        let postData = {};
        postData.feedIds ="";
        postData.employeeId = userInfo.employeeId?userInfo.employeeId:"";
        postData.storeId = storeInfo.id?storeInfo.id:"";
        postData.type="deleteProblemAll";
        deleteProblem(postData);
    }
    //二维码返回
    handleQrBack(){
        this.setState({
            showQr:false
        })
    }


    render(){
        //let 难道初始化的数据：
        let {state,addNewProblem,editProblemItem,deleteProblem,getRefreshImg,hidePopup} = this.props;
        let {otherQuestion,refreshImg,commonInfo} = state;
        let {problems} = otherQuestion;
        let feeds = otherQuestion.feeds;
        let problemList = otherQuestion.data_allProblemList;
        let problemListLength = 0;
        let editProblemItemUI = [];

        let {popupText="",popupButtons=[],popupChild=null,showPopup=false} = this.state.popupInfo;

        //生成基本Ui
        for (let key in problemList){
            problemListLength++;
            let item = problemList[key];
            let troubleId = item.id;
            let currentRemark = item.remark;
            let currentItemUi = <EditProblemItem
                editProblemItem = {editProblemItem}
                trouleId = {troubleId}
                imgList = {refreshImg}
                clickEdit = {this.handleShowRemark.bind(this,troubleId)}
                problemInfo = {problems}
                baseInfo = {item}
                remarkText = {currentRemark}
                getRefreshImg = {()=>(this.handleRefreshProbelmImg.bind(this,troubleId,this.state.taskTy))}
                deleteProblem = {()=>(this.handleDeleteProblem.bind(this,troubleId,"deleteProblemOne"))}
                addImg = {()=>(this.handleAddImg.bind(this,troubleId))}
                deleteImg = {(errorId,type,fileId)=>(this.handleDeleteImg.bind(this,errorId,type,fileId))}
                taskType = {this.state.taskTy}
                showPopup={showPopup}
                hidePopup={hidePopup}
                key={key}/>
            editProblemItemUI.push(currentItemUi);
        }

        let swiperCount = problemListLength;
        let swiperOptions = {
            // width : 1396,
            spaceBetween: 30,
            slidesPerView: "auto",
            freeMode:true,
            // slidesPerView: 2.6,
        };
        let swiperContainer = CONFIG.swiperContainers.editProblemSwiperContainer;
        //控制Ui显示
        let elementUI = '';
        console.log("render ",this.state.showTextArea , this.state.showPop)

        if(this.state.showTextArea){
            elementUI = <div>
                <TextArea
                    text={this.state.tmpText}
                    goBack={this.handleEditGoBack.bind(this)}
                    saveText={this.handleSaveRemarkText.bind(this)}
                />
                {this.state.showPop?(
                    <PopupComponent popupInfo={this.state.popupInfo}>
                        {
                            popupChild ? popupChild: <PopupModel popupText={popupText} popupButtons={popupButtons}/>
                        }

                    </PopupComponent>
                ):""}

            </div>
        }else if(this.state.showQr){
            elementUI =  <Qrcode goBack={this.handleQrBack.bind(this)}  url={this.state.qrUrl}></Qrcode>
        }else{
            elementUI = <div className={"OtherQuestionContainer"}>
                {this.state.showPop?(
                    <PopupComponent popupInfo={this.state.popupInfo}>
                        {
                            popupChild ? popupChild : <PopupModel popupText={popupText} popupButtons={popupButtons}/>
                        }

                    </PopupComponent>
                ):""}
                <HeaderComponent
                    showHeader={CONFIG.headerStatus[1]}
                    headerInfo={commonInfo}
                />
                <div className={"otherQuestionTitleContainer"}>你是否有其他问题希望反馈(<i>*</i>必填项)</div>
                <div className={"editOtherQuestionContainer clearfix"}>
                    <SwiperComponent
                        swiperContainer={swiperContainer} swiperOptions={swiperOptions} swiperCount={swiperCount}
                    >
                        {editProblemItemUI}
                    </SwiperComponent>
                </div>
                <div className={"opeationContainer clearfix"}>
                    <button className={"addMoreBtn"} onClick={this.handleAddNewTroble.bind(this)}><span>+</span>录入更多</button>
                    <button className={"noMoreBtn"} onClick={this.handleSubmitProblemList.bind(this)}>提交</button>
                </div>
                <div className={"overPass"} onClick={this.handleOverPass.bind(this)}>跳过 &nbsp;&nbsp;<img src={overPassIcon} alt=""/></div>

            </div>
        }

        return (
            <div>{elementUI}</div>

        )
    }
}