sourcecode/front/project/www/routes/paper/process/page.js

import React from 'react';
import Fullscreen from 'react-fullscreen-crossbrowser';
import './index.less';
import Page from '@src/containers/Page';
import { randomList, sortListWithOrder, resortListWithOrder } from '@src/services/Tools';
import { Question } from '../../../stores/question';
import Base from './base';
import Sentence from './sentence';
import { Main } from '../../../stores/main';
import { My } from '../../../stores/my';

export default class extends Page {
  init() {
    this.singleTime = null;
    this.singleInterval = null;

    this.stages = {};
    this.stage = '';
    this.stageInterval = null;
    this.stageTime = 0;
    this.stageNumber = 0;
    this.stageProcess = { number: 0, time: 0 };
    this.relaxProcess = { time: 0 };
  }

  initState() {
    return {
      setting: {},
      report: {},
      question: {},
      userQuestion: {},
      paper: {},
      scene: null,
    };
  }

  initData() {
    const { type, id } = this.params;
    // type 是获取基础paper的表信息
    // 等同于PaperOrigin
    Question.getPaper(type, id).then(paper => {
      this.setState({ paper });
      let handler = null;
      if (paper.paperModule === 'examination') {
        // 模考获取配置信息
        handler = Main.getExaminationNumber().then(result => {
          Object.keys(result).forEach(key => {
            result[key].time = Number(result[key].time);
            result[key].number = Number(result[key].number);
          });
          this.stages = result;
          this.relaxProcess = { time: 8 * 60 };
        });
      } else {
        handler = Promise.resolve();
      }
      const { r } = this.state.search;
      if (r) {
        handler.then(() => {
          this.continue(r);
        });
      } else if (paper.paperModule === 'sentence') {
        // 长难句没有设置，直接开始
        handler.then(() => {
          this.start({});
        });
      } else {
        this.setState({ scene: 'start' });
      }
      handler.catch(() => {
        goBack();
      });
    });
  }

  start(setting) {
    const { type, id } = this.params;
    return Question.start(type, id, setting).then(report => {
      if (report.isFinish) {
        return this.finish();
      }
      this.setState({ report, scene: 'question' });
      // 开始统计做题进度
      if (report.paperModule === 'examination') {
        const { order } = setting;
        this.initStage(order[0], 0, 0);
      }
      return this.next();
    });
  }

  continue(reportId) {
    return Question.continue(reportId)
      .then(report => {
        if (report.isFinish) {
          throw new Error('做题结束，请先重置');
        }
        this.setState({ report, scene: 'questionn' });
        // 更新当前做题进度
        if (report.paperModule === 'examination') {
          const { stage, time, number } = report.setting;
          this.initStage(stage, time[stage], number[stage]);
        }
        return this.next();
      })
      .catch(() => {
        Question.reportLink({ report: { id: reportId } });
      });
  }

  next() {
    const { report, scene } = this.state;
    const { setting = {} } = report;
    if (scene === 'relax') {
      this.nextStage();
    }
    return Question.next(report.id)
      .then(userQuestion => {
        const questionSetting = {};
        if (setting.disorder) {
          const { questions } = userQuestion.question.content;
          if (questions) {
            // 乱序显示选项
            questionSetting.questions = [];
            questions.forEach(q => {
              const order = randomList(q.select.length);
              q.select = sortListWithOrder(q.select, order);
              questionSetting.questions.push(order);
            });
          }
        }
        this.setState({
          userQuestion,
          question: userQuestion.question,
          questionSetting,
          scene: 'question',
        });
        this.singleQuestionTime();
        return true;
      })
      .catch(err => {
        if (err.message === 'finish') {
          // 考试结束
          return this.finish();
        }
        return false;
      });
  }

  submit(answer) {
    const { report, userQuestion, questionSetting, singleTime } = this.state;
    const { setting = {} } = report;
    if (setting.disorder) {
      const { questions } = answer;
      if (questions) {
        // 还原乱序选项
        questions.forEach((q, index) => {
          const order = questionSetting.questions[index];
          Object.keys(q).forEach(k => {
            if (q[k]) q[k] = resortListWithOrder(q[k], order);
          });
        });
      }
    }
    return Question.submit(userQuestion.id, answer, singleTime, questionSetting).then(() => {
      this.singleQuestionTime(true);
      // 更新模考做题进度
      if (report.paperModule === 'examination') {
        this.stageNumber += 1;
        if (this.stageNumber >= this.stageProcess.number) {
          // 进入休息
          this.relaxStage();
        }
      }
    });
  }

  stage() {
    const { report } = this.state;
    return Question.stage(report.id)
      .then(() => {
        return this.next();
      })
      .then(() => {
        this.stageQuestionTime();
      });
  }

  finish() {
    const { report } = this.state;
    return Question.finish(report.id)
      .then(() => {
        // 跳转到报告页
        Question.reportLink({ report });
        // this.setState({ scene: 'finish' });
      })
      .catch(() => {
        Question.reportLink({ report });
      });
  }

  singleQuestionTime(stop) {
    if (this.singleInterval) {
      clearInterval(this.singleInterval);
      this.singleInterval = null;
    }
    if (!stop) {
      this.singleTime = 0;
      this.singleInterval = setInterval(() => {
        this.singleTime += 1;
        this.setState({ singleTime: this.singleTime });
      }, 1000);
    }
  }

  stageQuestionTime(initTime) {
    if (this.stageInterval) {
      clearInterval(this.stageInterval);
      this.stageInterval = null;
      this.stageTime = initTime;
    }
    this.stageInterval = setInterval(() => {
      this.stageTime += 1;
      if (this.stageTime >= this.stageProcess.number) {
        this.nextStage();
      }
      this.setState({ stageTime: this.targetProcess.time - this.stageTime });
    }, 1000);
  }

  nextStage() {
    const { report } = this.state;
    // 进入下一阶段
    const { order } = report.setting;
    this.stage = order[order.indexOf(this.stage) + 1];
    this.stageProcess = this.stages[this.stage];
    this.stageNumber = 0;
    this.stageQuestionTime(0);
  }

  relaxStage() {
    this.stageProcess = this.relaxProcess;
    this.stageNumber = 0;
    this.stageQuestionTime(0);
    this.setState({
      scene: 'relax',
    });
  }

  initStage(stage, time, number) {
    this.stage = stage;
    this.stageProcess = this.stages[stage];
    this.stageTime = time;
    this.stageNumber = number;
    this.stageQuestionTime(time);
  }

  toggleFullscreen() {
    const { isFullscreenEnabled } = this.state;
    this.setState({ isFullscreenEnabled: !isFullscreenEnabled });
  }

  toggleCollect() {
    const { userQuestion = {} } = this.state;
    if (!userQuestion.collect) {
      My.addQuestionCollect(userQuestion.questionModule, userQuestion.questionNoId).then(() => {
        userQuestion.collect = true;
        this.setState({ userQuestion });
      });
    } else {
      My.delQuestionCollect(userQuestion.questionModule, userQuestion.questionNoId).then(() => {
        userQuestion.collect = false;
        this.setState({ userQuestion });
      });
    }
  }

  renderView() {
    return (
      <Fullscreen
        enabled={this.state.isFullscreenEnabled}
        onChange={isFullscreenEnabled => this.setState({ isFullscreenEnabled })}
      >
        {this.renderDetail()}
      </Fullscreen>
    );
  }

  renderDetail() {
    const { scene, paper, userQuestion } = this.state;
    if (!paper.id || !scene) return null;
    switch (paper.paperModule) {
      case 'sentence':
        return <Sentence key={userQuestion.id} {...this.state} flow={this} mode='process' />;
      default:
        return <Base key={userQuestion.id} {...this.state} flow={this} mode='process' />;
    }
  }
}