import React from 'react';
import ImageComponent from '../../CommonComponent/ImgToolComponent/CommonSmalContainer';
import Button from '../../CommonComponent/ButtonComponent/ButtonComponent'
require('./index.css')
export default class TroubleItemComponent extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            text: '',
            imgStyle:{
                'height':'100%',
            }
        }
        this.reRreshImg = this.reRreshImg.bind(this)
        this.deleteImgById = this.deleteImgById.bind(this)
        this.confirmDeleteImg = this.confirmDeleteImg.bind(this)
        this.addImg = this.addImg.bind(this)
        this.showImg = this.showImg.bind(this)
    }

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

    reRreshImg(){
        let props = this.props;
        let item = props.item;
        props.getRefreshImg(item.id,item.type)
    }

    addImg(){
        let props = this.props;
        let item = props.item;
        props.showQrcode(item.errorCode)
    }

    deleteImgById(fileId){
        console.log("deleteImgById :",fileId);
        let props = this.props;
        let {deleteImg,hidePopup} = props;
        let item = props.item;
        let errorId = item.id;
        let type = item.type;
        hidePopup();
        deleteImg(errorId,type,fileId)
    }

    confirmDeleteImg(fileId){
        let {showPopup,hidePopup} = this.props;
        let btnWidth = UTILPATH.getRemByPx(260);
        let btnMarginLeft = UTILPATH.getRemByPx(30);
        let btnDom1 = <Button key={"confirmDeleteTroubleImg1"} style={{'width':btnWidth}} text={"取消"} option={hidePopup}/>
        let btnDom2 = <Button key={"confirmDeleteTroubleImg2"} style={{'width':btnWidth,'marginLeft':btnMarginLeft}} text={"确定"} option={()=>this.deleteImgById(fileId)}/>
        showPopup({
            popupText:'确定删除此照片吗',
            popupButtons:[btnDom1,btnDom2]
        })
    }

    showImg(imgSrc){
        let {showPopup,hidePopup} = this.props;
        let showImgDom = <div onClick={()=>hidePopup()} className={"showBigImg"}>
            <img src={imgSrc} alt=""/>
        </div>;
        console.log("showimg")
        showPopup({
            popupChild : showImgDom,
            showPopup : true
        });
    }


    render(){
        let props = this.props;
        let item = props.item ? props.item : {};
        let description = this.getDes(item);
        let imgFiles = Array.isArray(item.files) ? item.files.map((f,k)=>{
            return <ImageComponent key={"troubleItemImg"+k}
                                   noCloseBtn={false}
                                   handleClikCloseFunc = {()=>this.confirmDeleteImg(f.id)}
                                   handleClikImgFunc = {()=>{this.showImg(f.filePath)}}
                                   type={"custom"}
                                   imgSrc = {f.filePath}/>

        }) : [];
        let imgLength = imgFiles.length;
        if(imgLength < 9){
            imgFiles.push(<ImageComponent showSrc={true} key={"troubleItemImgadd"+imgLength} disabled={!(item.isExistProblem && parseInt(item.isExistProblem) === 1)} type={"add"} handleClikImgFunc = {this.addImg} noCloseBtn = {true} />);
            imgLength++;
        }
        imgFiles.push(<ImageComponent key={"troubleItemImgrefresh"+imgLength} handleClikImgFunc = {this.reRreshImg} type={"refresh"} noCloseBtn = {true} />);

        let swiperOptions = {
            width : 90,
            spaceBetween: 20,
            // freeMode:true,
            // pagination: '.pagination',
            // loop:false,
            mode: 'horizontal',
            touchRatio:0.5,
            longSwipesRatio:0.1,
            threshold:50,
            lazyLoadingInPrevNext:true,
            lazyLoading : true,
            followFinger:false,
            observer: true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents: true,//修改swiper的父元素时，自动初始化swiper
            lazyLoadingInPrevNextAmount: 11,
        };
        let swiperContainer = CONFIG.swiperContainers.troubleSwiperImgContainer + item.errorCode;
        let swiperCount = imgLength+1;

        let 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 className={"itemControl rel"}>
                    {imgFiles}
                </div>
            </div>
        )
    }
}