sourcecode/front/project/www/routes/paper/process/sentence/index.js

import React, { Component } from 'react';
import './index.less';
import Assets from '@src/components/Assets';
import { formatSecond, formatPercent, formatSeconds } from '@src/services/Tools';
import Icon from '../../../../components/Icon';
import Button from '../../../../components/Button';
import Switch from '../../../../components/Switch';
import Tabs from '../../../../components/Tabs';
import Progress from '../../../../components/Progress';
import HardInput from '../../../../components/HardInput';
import AnswerCheckbox from '../../../../components/AnswerCheckbox';
import { SentenceOption } from '../../../../../Constant';
import { Question } from '../../../../stores/question';

export default class extends Component {
  constructor(props) {
    super(props);
    // 确保可以自身进行答案显示，外部也可以直接显示答案
    // 将props转入state
    this.state = {
      analysisTab: 'qx',
      focusKey: 'subject',
      scene: this.props.scene || 'answer',
      userQuestion: this.props.userQuestion,
      question: this.props.question,
    };
    const { question, userQuestion } = this.props;
    if (this.state.scene === 'answer') {
      this.state.stem = this.formatStem(question.stem, userQuestion.userAnswer, question.answer);
    } else {
      this.state.stem = question.stem;
    }
  }

  showAnswer() {
    const { userQuestion } = this.state;
    Question.getDetailById(userQuestion.id).then(result => {
      const { question } = result;
      this.setState({
        userQuestion: result,
        question: result.question,
        scene: 'answer',
        stem: this.formatStem(question.stem, result.userAnswer, question.answer),
      });
    });
  }

  addTarget(target) {
    const uuid = target.getAttribute('uuid');
    if (!uuid) return;
    const text = target.innerText;
    const { focusKey, answer = {}, question } = this.state;
    if (!answer[focusKey]) answer[focusKey] = [];
    if (answer[focusKey].filter(row => row.uuid === uuid).length > 0) return;
    answer[focusKey].push({
      text,
      uuid,
    });
    this.setState({
      answer,
      stem: this.formatStem(question.stem, answer),
    });
  }

  removeTarget(key, target) {
    const { answer = {}, question } = this.state;
    if (!answer[key]) return;
    answer[key] = answer[key].filter(row => row.uuid !== target.uuid);
    this.setState({
      answer,
      stem: this.formatStem(question.stem, answer),
    });
  }

  next() {
    const { flow } = this.props;
    const { scene } = this.state;
    if (scene === 'question') {
      const { answer } = this.state;
      flow.submit(answer).then(() => {
        this.showAnswer();
      });
    } else if (scene === 'answer') {
      flow.next();
    }
  }

  formatStem(stem, userAnswer, answer) {
    // userAnswer 添加蓝色字， 错误的添加红色背景
    // answer 添加绿色背景
    const uuidMap = {};
    const show = !!answer;
    answer = answer || {};
    userAnswer = userAnswer || {};
    Object.keys(userAnswer).forEach(key => {
      if (key === 'options') return;
      const u = userAnswer[key];
      const a = answer[key] && answer[key].length > 0 ? answer[key][0] : [];
      const map = {};
      a.forEach(row => {
        if (!uuidMap[row.uuid]) uuidMap[row.uuid] = [];
        uuidMap[row.uuid].push('true');
        map[row.uuid] = row;
      });
      u.forEach(row => {
        if (!uuidMap[row.uuid]) uuidMap[row.uuid] = [];
        uuidMap[row.uuid].push('user');
        if (show && !map[row.uuid]) uuidMap[row.uuid].push('false');
      });
    });
    Object.keys(uuidMap).forEach(uuid => {
      stem = stem.replace(`uuid='${uuid}'`, `uuid='${uuid}' class='${uuidMap[uuid].join(' ')}'`);
    });
    return stem;
  }

  renderHeader() {
    const { mode } = this.props;
    switch (mode) {
      case 'process':
        return this.renderProcessHeader();
      default:
        return this.renderQuestionHeader();
    }
  }

  renderProcessHeader() {
    const { userQuestion, singleTime, paper, flow } = this.props;
    return (
      <div className="layout-header">
        <div className="left">
          <div className="title">{paper.title}</div>
        </div>
        <div className="right">
          <div className="text">
            <Assets name="timecost_icon" />
            Time cost {formatSecond(userQuestion.userTime || singleTime)}
          </div>
          <Icon name="star" active={userQuestion.collect} onClick={() => flow.toggleCollect()} />
        </div>
      </div>
    );
  }

  renderQuestionHeader() {
    const { userQuestion, questionNo, paper, flow } = this.props;
    return (
      <div className="layout-header">
        <div className="left">
          <div className="title">{paper.title}</div>
        </div>
        <div className="right">
          <span className="b">
            用时：
            <span
              dangerouslySetInnerHTML={{
                __html: formatSeconds(userQuestion.userTime).replace(/([0-9]+)(min|m|hour|h|s)/g, '<span class="s">$1</span>$2'),
              }}
            />
            {/* 用时:<span className="s">1</span>m<span className="s">39</span>s */}
          </span>
          <span className="b">
            全站：
            <span
              dangerouslySetInnerHTML={{
                __html: formatSeconds(questionNo.totalTime / questionNo.totalNumber).replace(
                  /([0-9]+)(min|m|hour|h|s)/g,
                  '<span class="s">$1</span>$2',
                ),
              }}
            />
            {/* 全站:<span className="s">1</span>m<span className="s">39</span>s */}
          </span>
          <span className="b">
            <span className="s">{formatPercent(questionNo.totalCorrect, questionNo.totalNumber)}</span>%
          </span>
          <Icon name="star" active={userQuestion.collect} onClick={() => flow.toggleCollect()} />
        </div>
      </div>
    );
  }

  render() {
    const { flow, paper, userQuestion } = this.props;
    return (
      <div id="paper-process-sentence">
        <div className="layout">
          {this.renderHeader()}
          {this.renderBody()}
          <div className="layout-footer">
            <div className="left">
              <Icon
                name={this.props.isFullscreenEnabled ? 'sceen-restore' : 'sceen-full'}
                onClick={() => flow.toggleFullscreen()}
              />
            </div>
            <div className="center">
              <div className="p">
                <Progress theme="theme" progress={formatPercent(userQuestion.no, paper.questionNumber)} />
              </div>
              <div className="t">
                {userQuestion.no}/{paper.questionNumber}
              </div>
            </div>
            <div className="right">
              <Button
                size="lager"
                radius
                onClick={() => {
                  this.next();
                }}
              >
                Next <Assets name="next_icon" />
              </Button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  renderBody() {
    const { scene } = this.state;
    switch (scene) {
      case 'question':
        return this.renderQuestion();
      case 'answer':
        return this.renderAnswer();
      default:
        return null;
    }
  }

  renderQuestion() {
    const { question } = this.props;
    const { focusKey, answer = {} } = this.state;
    const { stem } = question;
    return (
      <div className="layout-body">
        <div className="title">
          <Icon name="question" />
          请分别找出句子中的主语，谓语和宾语，并做出逻辑关系判断。
        </div>
        <div
          className="desc"
          dangerouslySetInnerHTML={{ __html: stem }}
          onClick={e => {
            this.addTarget(e.target);
          }}
        />
        <div className="label">主语</div>
        <div className="input">
          <HardInput
            focus={focusKey === 'subject'}
            list={answer.subject || []}
            onClick={() => {
              this.setState({ focusKey: 'subject' });
            }}
            onDelete={item => {
              this.removeTarget('subject', item);
            }}
          />
        </div>
        <div className="label">谓语</div>
        <div className="input">
          <HardInput
            focus={focusKey === 'predicate'}
            list={answer.predicate || []}
            onClick={() => {
              this.setState({ focusKey: 'predicate' });
            }}
            onDelete={item => {
              this.removeTarget('predicate', item);
            }}
          />
        </div>
        <div className="label">宾语</div>
        <div className="input">
          <HardInput
            focus={focusKey === 'object'}
            list={answer.object || []}
            onClick={() => {
              this.setState({ focusKey: 'object' });
            }}
            onDelete={item => {
              this.removeTarget('object', item);
            }}
          />
        </div>
        <div className="select">
          <div className="select-title">本句存在以下哪种逻辑关系？（可多选）</div>
          <AnswerCheckbox
            list={SentenceOption}
            selected={answer.options}
            onChange={values => {
              answer.options = values;
              this.setState({ answer });
            }}
          />
        </div>
      </div>
    );
  }

  renderAnswer() {
    const { mode } = this.props;
    const { analysisTab, userQuestion, question, showAnswer, stem } = this.state;
    const { userAnswer = {} } = userQuestion;
    const { answer } = question;
    return (
      <div className="layout-body">
        {mode === 'question' ? (
          <Switch
            checked={showAnswer}
            onChange={value => {
              this.setState({ showAnswer: value });
            }}
          >
            {showAnswer ? '显示答案' : '关闭答案'}
          </Switch>
        ) : (<div className="title">
          <Icon name="question" />
          请分别找出句子中的主语，谓语和宾语，并做出逻辑关系判断。
        </div>)}

        <div className="desc" dangerouslySetInnerHTML={{ __html: stem }} />
        <div className="label">主语</div>
        <div className="input">
          <HardInput show={showAnswer} list={userAnswer.subject || []} answer={answer.subject} />
        </div>
        <div className="label">谓语</div>
        <div className="input">
          <HardInput show={showAnswer} list={userAnswer.predicate || []} answer={answer.predicate} />
        </div>
        <div className="label">宾语</div>
        <div className="input">
          <HardInput show={showAnswer} list={userAnswer.object || []} answer={answer.object} />
        </div>
        <div className="select">
          <div className="select-title">本句存在以下哪种逻辑关系？（可多选）</div>
          <AnswerCheckbox
            show={showAnswer}
            list={SentenceOption}
            selected={userAnswer.options}
            answer={answer.options}
          />
        </div>
        {showAnswer && (
          <div className="analysis">
            <Tabs
              type="division"
              active={analysisTab}
              tabs={[{ key: 'qx', name: '解析详情' }, { key: 'chinese', name: '中文语意' }]}
              onChange={key => {
                this.setState({ analysisTab: key });
              }}
            />
            {this.renderText()}
          </div>
        )}
      </div>
    );
  }

  renderText() {
    const { analysisTab, question = {} } = this.state;
    let content;
    switch (analysisTab) {
      case 'chinese':
        content = (
          <div className="detail-block text-block" dangerouslySetInnerHTML={{ __html: question.chineseContent }} />
        );
        break;
      case 'qx':
        content = <div className="detail-block text-block u-s-n" dangerouslySetInnerHTML={{ __html: question.qxContent }} />;
        break;
      default:
        break;
    }
    return content;
  }
}