import React, { Component } from 'react';
import './index.scss'
import { Toast } from "antd-mobile";
import classnames from 'classnames'
import { http } from "@/utils"

class Question extends Component {

  state = {
    question: {},
    selectedIndex: 0,
    correctIndex: 2,
    wrongIndex: 3,
  }

  componentDidMount() {
    this.getQuestion()
  }

  getQuestion = () => {
    const assistId = this.props.match.params.assistId
    http.get(`${API.home}/activity/anniversary/get_question/${assistId ? 2 : 1}/${assistId ? assistId : 0}`)
      .then(res => {
        const {code, msg, data} = res.data
        if (code === 200) {
          this.setState({
            question: data,
          });
        } else {
          Toast.info(msg)
        }
      })
  }

  render() {
    const {question, selectedIndex, correctIndex, wrongIndex} = this.state
    return (
      <div id={'question'}>
        <div className="banner"></div>
        <div className={'question'}>
          {question.ques && <div className="topic" dangerouslySetInnerHTML={{__html: question.ques}}></div>}
          <ul>
            {
              question.options && !!question.options.length && question.options.map((item, index) => {
                return <li key={item.id} className={classnames({
                  selected: selectedIndex === index,
                  correct: correctIndex === index,
                  wrong: wrongIndex === index,
                })}>
                  <span>{String.fromCharCode(65 + index)}</span>
                  {item.des}
                </li>
              })
            }
          </ul>
        </div>
        <div className="answered">
          <div className="analysis">
            <div className="estimate">
              您选择的是C，正确答案是D 回答错误
            </div>
            <div className="analysis-content">
              <div className="title">
                <i className={'icon'}></i>
                解析
              </div>
              <div className="content">
                解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容
              </div>
            </div>
          </div>
          <div className="recommends">
            <div className="title">相关课程</div>
            <ul>
              <li>

              </li>
            </ul>
          </div>
        </div>
        <div className="submit-bar">
          <button className={'submit'}>提交</button>
          {/*<button className={'lottery-related'}>去抽奖</button>*/}
        </div>
      </div>
    );
  }
}

export default Question;