import React from 'react';
function format(content) {
    if(content) {
        if(content.includes("<img")) {
            content = content.replace(/<img/g, "<img style='width: 100%'");
        }
        content = content.replace(/&lt;/g , '<');
        content = content.replace(/&gt;/g , '>');
        content = content.replace(/&amp;gt;/g , '');
        content = content.replace(/&quot;/g , '"');
        content = content.replace(/&amp;nbsp;/g , '');
    }
    return content;
}

function Header(props) {
    return (
        <div className='camp-test-header layout-flex-between'>
            <div><i onClick={props.close} className={'iconfont iconiconfront-77 icon-close'} /></div>
            <div className='layout-flex-center camp-test-time'>
                <i className='icon icon-clock' />
                <span>{props.time}</span>
            </div>
            <div onClick={props.showCardEve} className={`icon icon-order ${props.showCard ? 'no_height' : ''}`} />
        </div>
    );
}

function CampTitle(props) {
    return (
        <div className='layout-flex-between camp-test-title'>
            <div className='qtitle'>{`课后练习：${props.qtitle}`}</div>
            <div className='qnumber'>{`${props.questionIndex}/${props.examList.length}`}</div>
        </div>
    );
}

function TestItem(props) {
    let {questionIndex, currentExam, currentQuestionOption} = props;
    return (
        <div className='test-item-container'>
            <div className='ques item-title' dangerouslySetInnerHTML={{__html: `${questionIndex}.${format(currentExam.ques)}`}} />
            <ul>
                {
                    currentExam.options && currentExam.options.map((item,index)=>{
                        return (<li key={index}
                                    onClick={()=>props.checkOption(item)}
                                    className={`
                                        ${currentQuestionOption === item.opt_id ? 'option_checked' : ''}
                                        ${((currentExam.user_answer===0 || currentExam.user_answer) && currentExam.user_answer === item.opt_id) ? 'user_check' : ''}
                                        ${((currentExam.user_answer===0 || currentExam.user_answer) && currentExam.answer_id === item.opt_id) ? 'right_check' : ''}
                                    `}
                        >
                            <span className='letter'>{String.fromCharCode(Number(index) + 65)}</span>
                            <span className='des' dangerouslySetInnerHTML={{__html: format(item.des)}} />
                        </li>)
                    })
                }
            </ul>
            {
                props.children
            }
        </div>
    );
}

function ChangeQuestion(props) {
    return (
        <div className={'layout-flex-around change_question_container'}>
            <div onClick={props.preQuestion} className={`change_button pre_question ${props.questionIndex === 1 ? 'first_question' : ''}`}>上一题</div>
            <div onClick={props.nextQuestion} className={`change_button next_question`}>下一题</div>
        </div>
    )
}

function Resolve(props) {
    let {currentExam} = props;
    let Test = currentExam.compare === 0 ? '错误' : '正确';
    let UserIndex, rightIndex;
    currentExam.options.map((item, index)=>{
        if(currentExam.answer_id === item.opt_id) {
            rightIndex = index;
        }
        if(currentExam.user_answer !== 0 && currentExam.user_answer === item.opt_id) {
            UserIndex = <span>{`您的答案是${String.fromCharCode(Number(index) + 65)}，`}</span>;
        }
    });
    if(currentExam.user_answer === 0) {
        UserIndex = <span>{`您的答案是空，`}</span>;
    }
    return (
        <div className={'test-resolve'}>
            <div className={'isRight'}>
                <span>{`正确答案是${String.fromCharCode(Number(rightIndex) + 65)}，`}</span>
                {UserIndex}
                <span>{`回答${Test}。`}</span>
            </div>
            <p>解析</p>
            <div className={'resolve-content'} dangerouslySetInnerHTML={{__html: `${format(currentExam.analysis)}`}} />
        </div>
    )
}

export {
    Header,
    CampTitle,
    TestItem,
    ChangeQuestion,
    Resolve,
};