import React, { Component } from 'react';
import './index.scss'
import Question from '../common/question'
import { HeaderBar } from "@common/index"
import { browser, getParam, http } from "@/utils"
import { Toast } from 'antd-mobile'
import { withRouter } from 'react-router-dom'
import storage from 'store2'

class Exam extends Component {

  store = storage.namespace('aiTestExam')

  state = {
    questions: [],
    activeQuestion: 0,
    time: {
      h: 0,
      m: 0,
      s: 0,
    },
  }

  componentDidMount() {
    this.getQuestions()
    this.setCounter()
  }

  setCounter = () => {
    setInterval(() => {

      this.setState(state => {
        const time = state.time
        if (time.s + 1 >= 60) {
          time.s = 0
          if (time.m + 1 >= 60) {
            time.h = time.h + 1
            time.m = 0
          } else {
            time.m = time.m + 1
          }
        } else {
          time.s = time.s + 1
        }
        return {
          time,
        }
      })
    }, 1000)
  }

  goBack = () => {
    const {state} = this.props.location
    if (browser.isWeixin && getParam('code') && getParam('state')) {
      window.history.go(-2)
    }
    if (state.records && state.records.length > 1) {
      window.history.go(-1);
    } else if (state.from && state.from.pathname) {
      location.replace(`${state.from.pathname}${state.from.search}`)
    } else {
      window.location.href = window.location.origin
    }
  }

  getQuestions = () => {
    http.get(`${API.home}/sys/get_question`)
      .then(res => {
        const {code, msg, data} = res.data
        if (code === 200) {
          this.setState({
            questions: data,
          })
        } else {
          Toast.fail(msg, 2, null, false)
        }
      })
  }

  selectAnswer = (question, optionId) => {
    this.setState(state => {
      const questions = state.questions.slice()
      return {
        questions: questions.map(item => {
          if (item.id === question.id) {
            item.selected = optionId
          }
          return item
        }),
      }
    })
  }

  render() {
    const {questions, activeQuestion, time} = this.state
    return (
      <div className={'exam'}>
        <header>
          <div className="go-back">
            <i className='iconfont iconiconfront-68' onClick={this.goBack}></i>
          </div>
          <div className="time">
            <i className={'iconfont iconzhong'}></i>
            <span>
              {
                !!time.h && <>{time.h && time.h.toString().padStart(2, '0')}:</>
              }
              {time.m.toString().padStart(2, '0')}:
              {time.s.toString().padStart(2, '0')}
            </span>
          </div>
          <div className="count">{questions.filter(item => item.selected).length}/{questions.length}</div>
        </header>
        <div className="banner">
          <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/ai-test/m/scores/exam-banner.png" alt=""/>
        </div>
        <div className="question-section">
          {
            !!questions.length &&
            <Question question={questions[activeQuestion]} selectAnswer={this.selectAnswer}></Question>
          }
        </div>
        <div className="navigation">
          <ul>
            {
              !!questions.length && questions.map((item, index) => {
                return <li key={index} onClick={() => {
                  this.setState({
                    activeQuestion: index,
                  })
                }} className={item.selected ? 'active' : ''}>{index + 1}</li>
              })
            }
          </ul>
        </div>
      </div>
    );
  }
}

export default withRouter(Exam);