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 { ExaminationOrder } from '../../../../Constant';
import { Main } from '../../../stores/main';
import { My } from '../../../stores/my';

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

    this.totalTime = null;
    this.totalInterval = null;

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

    this.startInterval = null;
    this.startTime = 0;

    this.baseRef = null;
    this.sentenceRef = null;
  }

  outPage() {
    if (this.stageInterval) {
      clearInterval(this.stageInterval);
      this.stageInterval = null;
    }
    if (this.totalInterval) {
      clearInterval(this.totalInterval);
      this.totalInterval = null;
    }
    if (this.singleInterval) {
      clearInterval(this.singleInterval);
      this.singleInterval = null;
    }
  }

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

  switchTime() {
    this.setState({ showTime: !this.state.showTime });
  }

  switchNo() {
    this.setState({ showNo: !this.state.showNo });
  }

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

  setSetting(newSetting) {
    const { setting } = this.state;
    this.setState({ setting: Object.assign(setting, newSetting) });
  }

  start(setting) {
    const { type, id } = this.params;
    return Question.start(type, id, setting).then(report => {
      if (report.isFinish) {
        return this.finish();
      }
      this.changeQuery({ r: report.id });
      this.setState({ report, scene: 'question' });
      // 开始统计做题进度
      if (report.paperModule === 'examination') {
        const { order } = setting;
        this.initStage(order[0], 0);
      }
      this.totalQuestionTime();
      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 } = report.setting;
          this.initStage(stage, time[stage]);
        }
        this.totalQuestionTime(report.userTime || 0);
        return this.next();
      })
      .catch(() => {
        Question.reportLink({ report: { id: reportId } }, false);
      });
  }

  next() {
    const { report } = this.state;
    const { setting = {} } = report;
    return Question.next(report.id)
      .then(userQuestion => {
        const questionSetting = {};
        if (setting.disorder && userQuestion.questionType !== 'ds' && userQuestion.questionType !== 'sentence') {
          const { questions } = userQuestion.question.content;
          if (questions) {
            // 乱序显示选项
            questionSetting.questions = [];
            questions.forEach(q => {
              // sc从1开始随机
              const order = randomList(q.select.length, userQuestion.questionType === 'sc' ? 1 : 0);
              q.select = sortListWithOrder(q.select, order);
              questionSetting.questions.push(order);
            });
          }
        }
        if (report.paperModule === 'examination') {
          this.updateStage(userQuestion.stage);
        }
        this.setState({
          userQuestion,
          question: userQuestion.question,
          questionNo: userQuestion.questionNo,
          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 && userQuestion.questionType !== 'ds') {
      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 = userQuestion.stageNo;
        if (this.stageNumber >= this.stageProcess.number) {
          const { order } = report.setting;
          // 进入休息
          if (order.indexOf(this.stage) < order.length - 1) {
            this.stageToRelax();
            return Promise.reject();
          }
        }
      }
      return Promise.resolve();
    });
  }

  // 主动进入下一阶段
  nextStage() {
    const { report } = this.state;
    return Question.stage(report.id)
      .then(() => {
        this.baseRef.timeOut(() => {
          this.stageToRelax();
        });
      })
      .catch(err => {
        if (err.message === 'finish') {
          // 考试结束
          return this.finish();
        }
        return false;
      });
  }

  relaxToNextStage() {
    this.stageQuestionTime(0, true);
    // 进入下一阶段
    this.initNextStage();
    this.next();
  }

  stageToRelax() {
    const { report } = this.state;
    // 进入下一阶段
    const { order } = report.setting;
    if (this.stage === 'awa') {
      this.relaxToNextStage();
    } else if (this.stage === 'ir') {
      if (order.indexOf(this.stage) === 1) {
        this.relaxStage();
      } else {
        this.relaxToNextStage();
      }
    } else {
      this.relaxStage();
    }
  }

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

  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);
    }
  }

  totalQuestionTime(initTime, stop) {
    if (initTime) {
      this.totalTime = initTime;
    }
    if (this.totalInterval) {
      clearInterval(this.totalInterval);
      this.totalInterval = null;
    }
    if (!stop) {
      this.totalInterval = setInterval(() => {
        this.totalTime += 1;
        this.setState({ totalTime: this.totalTime });
      }, 1000);
    }
  }

  stageQuestionTime(initTime, stop) {
    if (this.stageInterval) {
      clearInterval(this.stageInterval);
      this.stageInterval = null;
      this.stageTime = initTime;
    }
    if (!stop) {
      this.stageInterval = setInterval(() => {
        this.stageTime += 1;
        if (this.stageTime >= this.stageProcess.time) {
          clearInterval(this.stageInterval);
          const { scene } = this.state;
          if (scene === 'relax') {
            // 进入下一阶段，获取下一题
            this.relaxToNextStage();
          } else {
            // 提交当前阶段
            this.nextStage();
          }
          return;
        }
        this.setState({ stageTime: this.stageProcess.time - this.stageTime });
      }, 1000);
      this.setState({ stageTime: this.stageProcess.time - this.stageTime });
    }
  }

  startWaitTime() {
    if (this.startInterval) {
      clearInterval(this.startInterval);
      this.startInterval = null;
    }
    this.startInterval = setInterval(() => {
      this.startTime += 1;
      // 1分钟等待: 自动提交第一选择
      const { scene } = this.state;
      const { paper, setting } = this.state;
      const { disorder = true, order = [] } = setting;
      if (scene !== 'start') {
        clearInterval(this.startInterval);
        this.startInterval = null;
      } else if (this.startTime >= 60) {
        clearInterval(this.startInterval);
        this.startInterval = null;
        this.start({
          disorder: paper.finishTimes > 0 ? disorder : false,
          order: order.length > 0 ? order.filter(row => row) : ExaminationOrder[0].value,
        });
      }
      this.setState({ startTime: 60 - this.startTime });
    }, 1000);
  }

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

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

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

  updateStage(stage) {
    this.stage = stage;
    this.stageProcess = this.stages[stage];
    this.setState({ totalNumber: this.stageProcess.number });
  }

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

  toggleCollect() {
    const { userQuestion = {} } = this.state;
    if (!userQuestion.collect) {
      My.addQuestionCollect(userQuestion.questionNoId).then(() => {
        userQuestion.collect = true;
        this.setState({ userQuestion });
      });
    } else {
      My.delQuestionCollect(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, questionNo = {} } = this.state;
    if (!paper.id || !scene) return null;
    if (paper.paperModule === 'sentence' || questionNo.module === 'sentence') {
      return <Sentence ref={(ref) => { this.sentenceRef = ref; }} key={userQuestion.id} {...this.state} flow={this} mode='process' />;
    }
    return <Base ref={(ref) => { this.baseRef = ref; }} key={userQuestion.id} {...this.state} flow={this} mode='process' />;
  }
}