import React,{ Component } from "react";
import {Checkbox,Radio, Input} from "antd";
import {markdownToHTML, MarkdownToHtml} from 'educoder'
import QuillForEditor from "../../../../common/quillForEditor";

import axios from 'axios'
const tagArray = [
  'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
  'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
  'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
]
class Multiple extends Component{
  constructor(props){
      super(props);
  }
  saveId=(value)=>{
    let question_id=this.props.questionType.question_id;
    let url=`/exercise_questions/${question_id}/exercise_answers.json`;
    let {index}=this.props;
    axios.post((url),{
      exercise_choice_id:value
    }).then((result)=>{
      if(result.status==200){
        let k=0;
        if(value.length > 0 ){
          k=1;
        }else{
          k=0;
        }
        this.props.changeOption && this.props.changeOption(index,value);
        this.props.changeQuestionStatus && this.props.changeQuestionStatus(parseInt(this.props.questionType.q_position)-1,k);
      }
    }).catch((error)=>{
      console.log(error);
    })
  }

  render(){
    let {
      questionType ,
      exercise,
      user_exercise_status,
			is_md
    }=this.props
    let isStudent =this.props.isStudent();
    console.log(questionType);
    return(
      <div className="pl30 pr30 singleDisplay">
				<style>
					{
						`
						.multiple .ql-editor p{
							line-height: 25px !important;
							overflow: unset !important;

							}
						`
					}
				</style>
        <Checkbox.Group className="with100" disabled={ user_exercise_status == 1 ? true : false } onChange={this.saveId} value={questionType.user_answer}>
          {
            questionType.question_choices && questionType.question_choices.map((item,key)=>{
              let prefix = `${tagArray[key]}.`
							let titename="";
							if(is_md===true){
								titename=item.choice_text;
							}else{
								try {
									titename =  JSON.parse(item.choice_text);
								}catch (e) {
									titename={"ops":[{"insert":item.choice_text}]};
								}
								// JSON.parse 有些异常数据是undefined
								if(titename===undefined){
									titename={"ops":[{"insert":item.choice_text}]};
								}
								try {
									// JSON.parse 转换的时候如果是数字字符串就转成整数了
									if(titename>=0){
										titename={"ops":[{"insert":item.choice_text}]};
									}
								}catch (e) {

								}
							}
              return(
                <p className="clearfix mb15 df">
                  <Checkbox className="lineh-15 df mr8 setRadioStyle multiple" value={item.choice_id}>
                    <span className="fl mr3 lineh-25">{prefix}</span>
										{
										is_md?
												<MarkdownToHtml content={titename} selector={'multiple_' + (this.props.index + 1) + (key + 1)}
																				className="flex1" style={{display:"inline-block"}}
												></MarkdownToHtml>
												:
												<QuillForEditor
													readOnly={true}
													value={titename}
													showUploadImage={this.props.handleShowUploadImage}
												/>

										}
                  </Checkbox>
                </p>
              )
            })
          }
        </Checkbox.Group>
        {
          // 答案公开，且试卷已经截止
          isStudent && exercise && exercise.answer_open==true && exercise.exercise_status == 3 &&
          <p className="bor-top-greyE pt20 mt10 font-16">参考答案：
            {questionType.standard_answer.map((i,k)=>{
                return(
                  <span value={k}>{tagArray[parseInt(i)-1]}</span>
                )
              })
            }
          </p>
        }
      </div>
    )
  }
}
export default Multiple