sourcecode/front/project/www/routes/examination/main/page.js

import React from 'react';
import './index.less';
import { Link } from 'react-router-dom';
import { Tooltip } from 'antd';
import Page from '@src/containers/Page';
import { asyncConfirm } from '@src/services/AsyncTools';
import { formatTreeData, getMap } from '@src/services/Tools';
import Continue from '../../../components/Continue';
import Step from '../../../components/Step';
import List from '../../../components/List';
import Tabs from '../../../components/Tabs';
import Module from '../../../components/Module';
import Input from '../../../components/Input';
import Button from '../../../components/Button';
import Division from '../../../components/Division';
import Card from '../../../components/Card';
import ListTable from '../../../components/ListTable';
import ProgressText from '../../../components/ProgressText';
import IconButton from '../../../components/IconButton';
import { Main } from '../../../stores/main';
import { My } from '../../../stores/my';
import { Sentence } from '../../../stores/sentence';
import { Question } from '../../../stores/question';
import { Course } from '../../../stores/course';
import { User } from '../../../stores/user';

const SENTENCE = 'sentence';
const PREVIEW = 'preview';
const PREVIEW_CLASS = 'PREVIEW_CLASS';
const PREVIEW_LIST = 'PREVIEW_LIST';

const exerciseColumns = [
  {
    title: '练习册',
    width: 250,
    align: 'left',
    render: item => {
      return (
        <div className="table-row">
          <div className="night f-s-16">{item.title}</div>
          <div>
            <ProgressText
              progress={item.report.id ? item.repport.userNumber / item.report.questionNumber : 0}
              size="small"
            />
          </div>
        </div>
      );
    },
  },
  {
    title: '正确率',
    width: 150,
    align: 'left',
    render: item => {
      return (
        <div className="table-row">
          <div className="night f-s-16 f-w-b">--</div>
          <div className="f-s-12">{item.stat.totalCorrect / item.stat.totalNumber}</div>
        </div>
      );
    },
  },
  {
    title: '全站用时',
    width: 150,
    align: 'left',
    render: item => {
      return (
        <div className="table-row">
          <div className="night f-s-16 f-w-b">--</div>
          <div className="f-s-12">全站{item.stat.totalTime / item.stat.totalNumber}s</div>
        </div>
      );
    },
  },
  {
    title: '最近做题',
    width: 150,
    align: 'left',
    render: () => {
      return (
        <div className="table-row">
          <div>2019-04-28</div>
          <div>07:30</div>
        </div>
      );
    },
  },
  {
    title: '操作',
    width: 180,
    align: 'left',
    render: item => {
      return (
        <div className="table-row p-t-1">
          {!item.repport.id && (
            <IconButton type="start" tip="Start" onClick={() => this.previewAction('start', item)} />
          )}
          {item.repport.id && (
            <IconButton
              className="m-r-2"
              type="continue"
              tip="Continue"
              onClick={() => this.previewAction('continue', item)}
            />
          )}
          {item.repport.id && (
            <IconButton type="restart" tip="Restart" onClick={() => this.previewAction('restart', item)} />
          )}
        </div>
      );
    },
  },
  {
    title: '报告',
    width: 30,
    align: 'right',
    render: item => {
      return (
        <div className="table-row p-t-1">
          {item.report.userNumber === item.report.questionNumber && <IconButton type="report" tip="Report" />}
        </div>
      );
    },
  },
];

export default class extends Page {
  constructor(props) {
    super(props);
    this.sentenceColums = [
      {
        title: '练习册',
        width: 250,
        align: 'left',
        render: row => {
          return (
            <div className="table-row">
              <div className="night f-s-16">{row.title}</div>
              <div>
                <ProgressText progress={row.process} size="small" />
              </div>
            </div>
          );
        },
      },
      {
        title: '正确率',
        width: 150,
        align: 'left',
        render: () => {
          return (
            <div className="table-row">
              <div className="night f-s-16 f-w-b">--</div>
              <div className="f-s-12">全站55%</div>
            </div>
          );
        },
      },
      {
        title: '全站用时',
        width: 150,
        align: 'left',
        render: () => {
          return (
            <div className="table-row">
              <div className="night f-s-16 f-w-b">55%</div>
              <div className="f-s-12">全站56s</div>
            </div>
          );
        },
      },
      {
        title: '最近做题',
        width: 150,
        align: 'left',
        render: () => {
          return (
            <div className="table-row">
              <div>2019-04-28</div>
              <div>07:30</div>
            </div>
          );
        },
      },
      {
        title: '操作',
        width: 180,
        align: 'left',
        render: () => {
          return (
            <div className="table-row p-t-1">
              <IconButton className="m-r-2" type="continue" tip="Continue" />
              <IconButton type="restart" tip="Restart" />
            </div>
          );
        },
      },
      {
        title: '报告',
        width: 30,
        align: 'right',
        render: () => {
          return (
            <div className="table-row p-t-1">
              <IconButton type="report" tip="Report" />
            </div>
          );
        },
      },
    ];
  }

  initState() {
    this.code = null;
    this.columns = exerciseColumns;
    this.exerciseProcess = {};
    this.inited = false;
    return {
      tab1: SENTENCE,
      tab2: '',
      previewType: PREVIEW_CLASS,
      tabs: [],
      allClass: [],
      classProcess: {},
    };
  }

  init() {
    Main.getExercise().then(result => {
      const list = result.map(row => {
        row.title = `${row.titleZh}${row.titleEn}`;
        row.key = row.extend;
        return row;
      });
      const tabs = formatTreeData(list, 'id', 'title', 'parentId');
      tabs.push({ key: PREVIEW, name: '预习作业' });
      const map = getMap(tabs, 'key');
      this.setState({ tabs, map });
      this.inited = true;
      this.refreshData();
    });
  }

  initData() {
    const { info = {} } = this.props.user;
    if (info.latestExercise) {
      // 获取最后一次做题记录
      Question.baseReport(info.latestExercise).then(result => {
        this.setState({ latest: result });
      });
    }
    if (this.inited) this.refreshData();
  }

  refreshData() {
    const { tab1 } = this.state;
    switch (tab1) {
      case SENTENCE:
        this.refreshSentence();
        break;
      case PREVIEW:
        this.refreshPreview();
        break;
      default:
        this.refreshExercise();
    }
  }

  refreshSentence() {
    const { sentence, articleMap, paperList } = this.state;
    if (!sentence) {
      Sentence.getInfo().then(result => {
        const chapters = [];
        const map = {};
        let index = 0;
        let exerciseChapter = null;
        if (!result.code) {
          chapters.push(`${index}」试用`);
        }
        index += 1;
        result.chapters.forEach(row => {
          map[row.value] = row;
          chapters.push(`「${index}」${row.short}`);
          index += 1;
          if (row.exercise) exerciseChapter = row;
        });
        this.setState({ sentence: result, chapters, chapterMap: map, exerciseChapter });
      });
    }

    if (!articleMap) {
      Sentence.listArticle().then(result => {
        const map = {};
        result.forEach(article => {
          if (!map[article.chapter]) {
            map[article.chapter] = [];
          }
          map[article.chapter].push(article);
        });
        this.setState({ articleMap: map });
      });
    }

    if (!paperList) {
      Sentence.listPaper().then(result => {
        this.setState({ paperList: result, paperFilterList: result });
      });
    }
  }

  refreshPreview() {
    const { previewType } = this.state;
    switch (previewType) {
      case PREVIEW_LIST:
        this.refreshListPreview();
        break;
      case PREVIEW_CLASS:
      default:
        this.refreshClassProcess();
        break;
    }
  }

  refreshClassProcess() {
    Course.classProcess().then(result => {
      const classProcess = {};
      for (let i = 0; i < result.length; i += 1) {
        const item = result[i];
        classProcess[item.category].push(item);
      }
      this.setState({ classProcess });
    });
  }

  refreshListPreview() {
    Question.listPreview().then(result => {
      this.setState({ previews: result });
    });
  }

  refreshExercise() {
    const { map, tab1 } = this.state;
    let { tab2 } = this.state;
    if (!map) {
      // 等待数据加载
      return;
    }
    if (tab1 === '') {
      return;
    }
    const subject = map[tab1];
    if (tab2 === '') {
      tab2 = subject.children[0].key;
      this.onChangeTab(2, tab2);
      return;
    }
    const type = map[tab2];
    Main.getExerciseChildren(type.id, true).then(result => {
      const exerciseChild = result;
      this.setState({ exerciseChild });
    });
    Question.getExerciseProcess(type.id).then(r => {
      const exerciseProcess = getMap(r, 'id');
      this.setState({ exerciseProcess });
    });
  }

  onChangePreviewType(type) {
    this.setState({ previewType: type });
    this.refreshPreview();
  }

  onChangeTab(level, tab) {
    const state = {};
    state[`tab${level}`] = tab;
    this.setState(state);
    this.refresh();
  }

  previewAction(type, item) {
    switch (type) {
      case 'start':
        this.start('preview', item);
        break;
      case 'restart':
        this.restart(item);
        break;
      case 'continue':
        this.continue('preview', item);
        break;
      default:
        break;
    }
  }

  restart(item) {
    asyncConfirm('提示', '是否重置', () => {
      Question.restart(item.report.id).then(() => {
        this.refresh();
      });
    });
  }

  start(type, item) {
    linkTo(`/paper/process/${type}/${item.id}`);
  }

  continue(type, item) {
    linkTo(`/paper/process/${type}/${item.id}?r=${item.report.id}`);
  }

  activeSentence() {
    Sentence.active(this.code).then(() => {
      // 重新获取长难句信息
      this.clearSentenceTrail();
      this.setState({ sentence: null, articleMap: null, paperList: null });
      this.refresh();
    });
  }

  trailSentence() {
    this.setState({ sentenceInput: false });
    User.sentenceTrail();
  }

  sentenceRead(article) {
    linkTo(`/sentence/read?chapter=${article.chapter}&part=${article.part}`);
  }

  sentenceFilter() {
    const { paperList } = this.state;
    const list = paperList.filter(row => {
      return !!row;
    });
    this.setState({ paperFilterList: list });
  }

  clearExercise() {
    My.clearLatestExercise();
    this.setState({ latest: null });
  }

  renderView() {
    const { tab1 = {}, tab2 = {}, tabs, map = {}, latest } = this.state;
    const children = (map[tab1] || {}).children || [];
    return (
      <div>
        {latest && (
          <Continue
            data={latest}
            onClose={() => {
              this.clearExercise();
            }}
            onContinue={() => { }}
            onRestart={() => { }}
            onNext={() => { }}
          />
        )}
        <div className="content">
          <Module className="m-t-2">
            <Tabs
              type="card"
              active={tab1}
              tabs={tabs}
              onChange={key => {
                this.onChangeTab(1, key);
              }}
            />
            {children.length > 1 && <Tabs active={tab2} tabs={children} onChange={key => this.onChangeTab(2, key)} />}
          </Module>
          {tab1 !== SENTENCE && tab1 !== PREVIEW && this.renderExercise()}
          {tab1 === SENTENCE && this.renderSentence()}
          {tab1 === PREVIEW && this.renderPreview()}
        </div>
      </div>
    );
  }

  renderPreview() {
    const { previewType } = this.state;
    switch (previewType) {
      case PREVIEW_CLASS:
        return this.renderPreviewClass();
      case PREVIEW_LIST:
        return this.renderPreviewList();
      default:
        return <div />;
    }
  }

  renderPreviewClass() {
    const { allClass, classProcess } = this.state;
    return (
      <div className="work-body">
        <div className="work-nav">
          <div className="left">完成情况</div>
          <div className="right theme c-p" onClick={() => this.onChangePreviewType(PREVIEW_LIST)}>
            全部作业 >
          </div>
        </div>
        <Division col="3">
          {allClass.map(item => {
            return <Card data={item} process={classProcess[item.id]} previewAction={this.previewAction} />;
          })}
        </Division>
      </div>
    );
  }

  renderPreviewList() {
    const { previews } = this.state;
    return (
      <div className="work-body">
        <div className="work-nav">
          <div className="left">全部作业</div>
          <div className="right theme c-p" onClick={() => this.onChangePreviewType(PREVIEW_CLASS)}>
            我的课程 >
          </div>
        </div>
        <ListTable
          filters={[
            {
              type: 'radio',
              checked: 'today',
              list: [{ key: 'today', title: '今日需完成' }, { key: 'tomorrow', title: '明日需完成' }],
            },
            {
              type: 'radio',
              checked: 'unfinish',
              list: [{ key: 'unfinish', title: '未完成' }, { key: 'finish', title: '已完成' }],
            },
            { type: 'select', checked: 'all', list: [{ key: 'all', title: '全部' }] },
          ]}
          rightAction={
            <div>
              有效期至:2019-11-13{' '}
              <Tooltip overlayClassName="gray" placement="top" title="全部模考做完才可重置">
                <a>
                  <Button size="small" disabled radius>
                    Reset
                  </Button>
                </a>
              </Tooltip>
            </div>
          }
          data={previews}
          columns={this.columns}
        />
      </div>
    );
  }

  renderSentence() {
    const { sentence = {}, sentenceInput } = this.state;
    const { sentenceTrail } = this.props.user;
    if (sentenceInput !== true && (sentence.code || sentenceTrail)) {
      return this.renderSentenceArticle();
    }
    return this.renderInputCode();
  }

  renderSentenceArticle() {
    const {
      sentence = {},
      chapters,
      chapter,
      exerciseChapter = {},
      chapterMap = {},
      articleMap = {},
      paperFilterList = [],
      paperList = [],
      paperChecked,
    } = this.state;
    const { sentenceTrail } = this.props.user;
    let maxStep = 0;
    if (sentenceTrail) {
      // 试用只能访问第一step
      maxStep = 1;
      // 查找练习章节
    }
    const chapterInfo = chapterMap[chapter] || {};
    let isExercise = false;
    if (chapterInfo && chapterInfo.exercise) {
      isExercise = true;
    }
    return (
      <div>
        {sentence.code && <div className="sentence-code">CODE: {sentence.code}</div>}
        {sentenceTrail && (
          <div className="sentence-code">
            CODE: <Link to="">去获取</Link>
            <a
              onClick={() => {
                this.setState({ sentenceInput: true });
              }}
            >
              输入
            </a>
          </div>
        )}
        <Module>
          <Step
            list={chapters}
            step={chapter}
            onClick={step => {
              this.setState({ chapter: step });
            }}
            message="请购买后访问"
            maxStep={maxStep}
          />
        </Module>
        {/* 正常文章 */}
        {sentence.code && !isExercise && (
          <List
            title={`Chapter${chapter}`}
            subTitle={chapterInfo.title}
            list={articleMap[chapter]}
            onClick={part => {
              this.sentenceRead(part);
            }}
          />
        )}
        {/* 正常练习 */}
        {sentence.code && isExercise && (
          <ListTable
            title={`Chapter${chapter}`}
            subTitle={chapterInfo.title}
            filters={[
              {
                type: 'radio',
                checked: paperChecked,
                list: [{ key: 0, title: '未完成' }, { key: 1, title: '已完成' }],
                onChange: item => {
                  console.log(item);
                  this.sentenceFilter(item);
                },
              },
            ]}
            data={paperFilterList}
            columns={this.sentenceColums}
          />
        )}
        {/* 试读文章 */}
        {sentenceTrail && (
          <List
            list={[]}
            onClick={part => {
              this.sentenceRead(part);
            }}
          />
        )}
        {/* 试练 */}
        {sentenceTrail && (
          <ListTable
            title={`Chapter${exerciseChapter.value}`}
            subTitle={exerciseChapter.title}
            data={paperList}
            columns={this.sentenceColums}
          />
        )}
      </div>
    );
  }

  renderInputCode() {
    return (
      <Module className="code-module">
        <div className="title">输入《千行GMAT长难句》专属 Code，解锁在线练习功能。</div>
        <div className="input-block">
          <Input
            size="lager"
            placeholder="请输入CODE"
            onChange={value => {
              this.code = value;
            }}
          />
          <Button
            size="lager"
            onClick={() => {
              this.activeSentence();
            }}
          >
            解锁
          </Button>
        </div>
        <div className="tip">
          <Link to="/" className="left link">
            什么是CODE？
          </Link>
          <span>没有 CODE？</span>
          <Link to="/" className="link">
            去获取 >>
          </Link>
          <a
            onClick={() => {
              this.trailSentence();
            }}
            className="right link"
          >
            试用 >>
          </a>
        </div>
      </Module>
    );
  }

  renderExercise() {
    return <div />;
  }
}