import React from 'react';
require('./index.css');
import ImgToolComponent from '../../components/CommonComponent/ImgToolComponent/CommonSmalContainer';
export default class EditProblemItem extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showCategoryElement:false,
            showDetailElement:false,
            currentFatherLiIndex:undefined,
            currentChildLiIndex:undefined,
            currentBigId:undefined,
            currentSmallId:undefined,
            problemList:{},
            currentDetailProblem:[],
            currentDetailTitle:"分类问题",
            currentDetailSonTitle:"具体问题",
            showRemark:""
        }
    }
    componentWillMount(){
        let props = this.props;
        // console.log(state)
        let Problems_format  = {};
        let {baseInfo,problemInfo} = props;
        props.problemInfo.map((item,index)=>{
            Problems_format[item.id] = {};
            Problems_format[item.id].message = item.message;
            Problems_format[item.id].type = item.type;
            Problems_format[item.id].dicDetails = item.dicDetails;
        });
        let currentRemarkLength = baseInfo.remark.length;
        let showRemark = baseInfo.remark;
        if(currentRemarkLength>200){
            showRemark = String(showRemark).substring(0,199)
            console.log(showRemark.length)
        }
        this.setState({
            problemList:Problems_format,
            currentDetailProblem:props.problemInfo[0].dicDetails,
            currentBigId:baseInfo.problemType,
            currentSmallId:baseInfo.detailProblemType,
            currentDetailTitle:baseInfo.message?baseInfo.message:"分类问题",
            currentDetailSonTitle:baseInfo.smallMessage?baseInfo.smallMessage:"具体问题",
            showRemark:showRemark
        });

    }
    componentWillReceiveProps(nextProps){
        let nextImgList = nextProps.imgList;
        let {editProblemItem,trouleId} = this.props
        let imgList = this.props.imgList;
        //修改值
        if(String(nextImgList.files)!=String(imgList.files) || String(imgList.errorId)!= String(nextImgList.errorId)){
            if(trouleId == Number(nextImgList.errorId)){
                let data={};
                data.type = "imgFiles";
                data.files = nextImgList.files;
                data.troubelId = trouleId;
                editProblemItem(data);
            }

        }

    }
    handleShowElement(value){
        let that = this;
        if(value == "showDetailElement"){
            //点击了 小分类  检查如果大分类未选择则进行提示
            if(!this.state.currentBigId){
                console.log("请先选择大分类")
                return;
            }
        }
        if(value == "showCategoryElement"){
            this.setState({"currentDetailTitle":"分类问题"})
        }
        if(value == "showDetailElement"){
            this.setState({"currentDetailSonTitle":"具体问题"})
        }
        this.setState(
                {
                    [value]:!this.state[value]
                },()=>{
                    if(value == "showCategoryElement" && !this.state.showCategoryElement){
                       that.setState({
                           "showDetailElement":false
                       })
                    }

            }
        )
    }
    handleDetailProblem_Father(event){
        let {editProblemItem,trouleId} = this.props;
        let data = {};
        //处理选中样式
        this.setState({
            currentFatherLiIndex: parseInt(event.currentTarget.getAttribute('date-index'))
        });
        //处理数据
        let bigProblemId = event.currentTarget.getAttribute('data-id');
        let title = event.currentTarget.getAttribute('data-value');
        let childProblem = this.state.problemList[String(bigProblemId)].dicDetails;
        this.setState({
            currentDetailProblem:childProblem,
            currentBigId:bigProblemId,
            currentDetailTitle:title,
            showCategoryElement:false,
            currentDetailSonTitle:"具体问题"
        });
        data.type = "problemType";
        data.message = title;
        data.problemId = bigProblemId;
        data.troubelId = trouleId;
        editProblemItem(data)
    }
    handleDetailProblem_Child(event){
        let {editProblemItem,trouleId} = this.props;
        let title = event.currentTarget.getAttribute('data-value');
        let data = {};
        //处理选中样式
        this.setState({
            currentChildLiIndex: parseInt(event.currentTarget.getAttribute('date-index'))
        });
        //处理数据
        let smallProblemId = event.currentTarget.getAttribute('date-id');
        this.setState({
            currentSmallId:smallProblemId,
            currentDetailSonTitle:title,
            showDetailElement:false
        })
        data.type = "detailProblemType";
        data.smallMessage = title;
        data.problemId = smallProblemId;
        data.troubelId = trouleId;
        editProblemItem(data)
    }
    handleClickEditRemark(){
        console.log("点击编辑跳转到文本框")
    }
    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 imgFiles = props.baseInfo.files?props.baseInfo.files:[];
        let troubleId = props.trouleId;
        let taskType = props.taskType;
        // 方法
        // 1. 删除问题
        let deleteProblem = props.deleteProblem;
        // 2. 刷新图片
        let getRefreshImg    = props.getRefreshImg;
        // 3. 添加图片
        let addImg        = props.addImg;
        // 4. 删除图片
        let deleteImg = props.deleteImg;
        //问题分类
        let categoryProblemUi = props.problemInfo.map((item,index)=>{
            return <li key={"bigProblem"+index}
                       date-index={index}
                       data-value={item.message}
                       data-id = {item.id}
                       className={this.state.currentBigId == item.id ? 'active_li':''}
                       onClick={(e)=>(this.handleDetailProblem_Father.bind(this,e))()}>{item.message}</li>
        });
        let detailCategoryProblemUi = this.state.currentDetailProblem.map((item,index)=>{
            return <li key={'detailProblem'+index}
                       date-index={index}
                       data-value={item.message}
                       date-id = {item.messageId}
                       className={this.state.currentSmallId == item.messageId ? 'active_li':''}
                       onClick={(e)=>(this.handleDetailProblem_Child.bind(this,e))()}>{item.message}</li>
        })
        //图片部分
        let imgListUi = imgFiles.map((item,index)=>{
            return <ImgToolComponent
                key={"troubelImg"+index}
                noCloseBtn={false}
                handleClikCloseFunc = {deleteImg(troubleId,taskType,item.id)}
                handleClikImgFunc = {()=>{this.showImg(item.filePath)}}
                type={"custom"}
                imgSrc = {item.filePath}
            ></ImgToolComponent>
        });
        //备注部分
        let remarkText = props.remarkText;
        return (
            <div className={"editUploadItem clearfix"}>
                <span className={"closeBtn"} onClick={deleteProblem()}>×</span>
                <div className={"newTroubleTitle"}>
                    新故障问题：故障 <span>{"OP0000"+troubleId}</span>
                </div>
                <div className={"newTroubleContent clearfix"}>
                    <span className={"startIcon"}>*</span>
                    <div className={"fakeSelect"}>
                        <div className={"problemCategoryTitle"} onClick={this.handleShowElement.bind(this,"showCategoryElement")} >{this.state.currentDetailTitle}</div>
                        {
                            this.state.showCategoryElement?(
                                <ul className={"problemCategory"}   name="" id="">
                                    {
                                        categoryProblemUi
                                    }
                                </ul>
                            ):""
                        }
                    </div>
                    <div className={"fakeSelect"}>
                        <div className={"problemCategoryTitle detailTitle "+(this.state.currentBigId?"":"noActive")} onClick={this.handleShowElement.bind(this,"showDetailElement")}>{this.state.currentDetailSonTitle}</div>
                        {
                            this.state.showDetailElement?(
                                <ul className={"DetailProblem"} name="" id="">
                                    {
                                        detailCategoryProblemUi
                                    }
                                </ul>
                            ):""
                        }
                    </div>
                </div>
                <div className={"newTroubleRemark clearfix"}>
                    <span className={"startIcon"}>*</span>
                    <div className={"remarkContent"}>
                       <div className={"btnContaienr"}>
                           <button
                               className={"editIcon"}
                               onClick={props.clickEdit}
                               disabled={!this.state.currentSmallId || !this.state.currentBigId?true:false}
                           >编辑
                           </button>
                       </div>
                        <div
                            className={"defalutRemarkText "+(this.state.showRemark?"remarkText":"")}>
                            {this.state.showRemark?this.state.showRemark:("编辑检查结果")}
                        </div>
                    </div>
                </div>
                <div className={"damageImgs clearfix"}>

                    <div className={"uploadImgRight"}>
                        {imgListUi}
                    </div>
                    <div className={"operationLeft"}>
                        <ImgToolComponent
                            disabled = {this.state.currentBigId || this.state.currentSmallId?false:true}
                            type={"add"}
                            handleClikImgFunc = {addImg()}
                            noCloseBtn = {true}
                        ></ImgToolComponent>
                        <ImgToolComponent
                            disabled = {this.state.currentBigId || this.state.currentSmallId?false:true}
                            handleClikImgFunc = {getRefreshImg()}
                            type={"refresh"}
                            noCloseBtn = {true}></ImgToolComponent>
                    </div>
                </div>
            </div>
        )
    }
}
/*
EditProblemItem.PropTypes = {
    productItemList : React.PropTypes.array
}
EditProblemItem.defaultProps = {
    productItemList : [
        {
            sku : {
                imagePath : ''
            }
        }
    ]
}*/
