import React, { Component } from 'react';
import './index.scss'
import { HeaderBar } from "@common/index"
import Question from "@components/ai-test/common/question"
import Navigation from "@components/ai-test/common/navigation"
import { html, http } from "@/utils"
import { Toast } from "antd-mobile";
import Recommends from '@/components/ai-test/common/recommends'


class Analysis extends Component {

  state = {
    questions: [],
    activeIndex: 0,
    userSelect: '',
    rightAnswer: '',
    userUnselect: false,
  }

  componentDidMount() {
    this.getAnalysis()
  }

  getAnalysis = () => {
    http.post(`${API.home}/sys/get_analysis`, {
      record_id: this.props.match.params.recordId,
    }).then(res => {
      const {code, msg, data} = res.data
      if (code === 200) {
        this.setState({
          questions: data,
        }, () => {
          this.getAnswerInfo()
        });
      } else {
        Toast.fail(msg, 2, null, false)
      }
    })
  }

  getAnswerInfo = () => {
    const {questions, activeIndex} = this.state
    const question = questions[activeIndex]
    const userAnswerIndex = question.options.findIndex(item => item.user_select)
    const rightAnswerIndex = question.options.findIndex(item => item.is_ans)
    this.setState({
      userSelect: String.fromCharCode(65 + userAnswerIndex),
      rightAnswer: String.fromCharCode(65 + rightAnswerIndex),
      userUnselect: userAnswerIndex < 0,
    });
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.activeIndex !== this.state.activeIndex) {
      this.getAnswerInfo()
    }
  }

  render() {
    const {questions, activeIndex, userSelect, rightAnswer, userUnselect} = this.state
    return (
      <div className={'analysis-container'}>
        <HeaderBar title={'AI水平测试'} arrow={true}/>
        {
          !!questions.length && <Question activeIndex={activeIndex} question={questions[activeIndex]}/>
        }
        <div style={{height: '8px', backgroundColor: '#f5f5f5'}}></div>
        <div className="analysis">
          {
            userUnselect
              ? <div className={'info'}>您未作答</div>
              : <div className="info">
                您选择的是{userSelect}，正确答案是{rightAnswer} 回答{userSelect === rightAnswer ? '正确' : '错误'}
              </div>
          }
          <div className="content">
            <div className="head">
              <i className="icon"></i>
              <span>解析</span>
            </div>
            {
              !!questions.length &&
              <div className="analysis-content" dangerouslySetInnerHTML={html(questions[activeIndex].analysis)}></div>
            }
          </div>
        </div>
        {
          !!questions.length && questions[activeIndex] && questions[activeIndex].commend_course && !!questions[activeIndex].commend_course.length &&
          <Recommends recommends={questions[activeIndex].commend_course}/>
        }
        <Navigation questions={questions} isAnalysis={true} handleClick={(index) => {
          this.setState({
            activeIndex: index,
          });
        }}/>
      </div>
    );
  }
}

export default Analysis;