import React from 'react';
import ImageComponent from '../../CommonComponent/ImgToolComponent/CommonSmalContainer';
import Button from '../../CommonComponent/ButtonComponent/ButtonComponent'
import PopModel from '../../CommonComponent/PopupComponent/PopupChildComponent'

require('./index.css')
export default class TroubleItemComponent extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            text: '',
        }
    }

    getDes(item){
        let des = "";
        switch (item.type){
            case 'KN':
                des = item.description || '';
                break;
            case 'OP':
                des = `${item.parentProblemName || ''} ${item.subProblemName || ''}`;
                break;
        }
        return item.description;
    }

    render(){
        let props = this.props;
        let item = props.item ? props.item : {};
        let description = this.getDes(item);
        let text = "";
        if(item.explanation){
            text = item.explanation.length > 200 ? item.explanation.substring(0,200) + '...' : item.explanation
        }
        return (
            <div className={"troubleItemComponent "+((item.isExistProblem === 1 && item.explanation) || item.isExistProblem === 2 ? 'finish':'')}>
                <div className={"finishBox"}>
                    <div className={"finishText colfff font24"}>已处理</div>
                </div>
                <div className={"itemText font32"}>故障问题{props.num || 0}：故障ID-{item.errorCode || ''}</div>
                <div className={"itemWrongInfo font24 col999"}>
                    <p>{description}</p>
                </div>
                <div className={"jugdeQuestion font32 rel"}>
                    <span className={"colff7860 font32 star"}>*</span>
                    <span>是否有此问题</span>
                    <div className={"questionBox border_e5 "+(item.isExistProblem && parseInt(item.isExistProblem) === 1 ? 'active':'')}
                         onClick={()=>props.setItem(item.errorCode,"isExistProblem",1)}
                    >是</div>
                    <div className={"questionBox border_e5 "+(item.isExistProblem && parseInt(item.isExistProblem) === 2 ? 'active':'')}
                         onClick={()=>props.setItem(item.errorCode,"isExistProblem",2)}
                    >否</div>
                </div>
                <div className={"itemTextArea rel font24"}>
                    <div className={"itemTextEdit font24 colff7860"} onClick={()=>props.showText(item.errorCode)}>
                        <span className={"iconfont font24 icon icon-editor-line colff7860"} />
                        <span> 编辑</span>
                    </div>
                    <span className={"colff7860 font32 star"}>*</span>
                    <div className={"itemTextAreaBox col999 border_e5"} onClick={()=>props.showText(item.errorCode)}>
                        {
                            item.explanation ? <textarea maxLength="200" readOnly className={"itemTextAreaBoxs col999"} value={text} /> :
                                <span className={"itemPlayceHolder"}>编辑检查结果</span>
                        }

                    </div>
                </div>
            </div>
        )
    }
}