sourcecode/front/project/www/routes/page/practise/page.js

import React from 'react';
import './index.less';
import { Link } from 'react-router-dom';
import Page from '@src/containers/Page';
import { asyncConfirm } from '@src/services/AsyncTools';
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 { Question } from '../../../stores/question';

const HARD = 'HARD';
const PREVIEW = 'PREVIEW';
const PREVIEW_CLASS = 'PREVIEW_CLASS';
const PREVIEW_TASK = 'PREVIEW_TASK';

export default class extends Page {
  initState() {
    return {
      level1Tab: PREVIEW,
      level2Tab: '',
      previewType: PREVIEW_CLASS,
      tabs: [],
      allClass: [],
      classProcess: {},
    };
  }

  initData() {
    Main.getExercise().then(result => {
      const list = result;
      const map = {};
      for (let i = 0; i < result.length; i += 1) {
        const item = result[i];
        if (!map[item.parentId]) map[item.parentId] = [];
        map[item.parentId].push(item);
      }
      const tabs = [];
      let allClass = [];
      tabs.push({ key: HARD, name: '长难句' });
      if (map[0]) {
        for (let i = 0; i < map[0].length; i += 1) {
          const item = map[0][i];
          tabs.push({ key: item.id, name: `${item.titleZh} ${item.titleEn}` });
          if (map[item.id]) {
            allClass = allClass.concat(map[item.id]);
          }
        }
      }
      tabs.push({ key: PREVIEW, name: '预习作业' });
      this.setState({ tabs, allClass, list, map });
    });
    this.refreshClassProcess();
  }

  refreshPreview() {
    const { previewType } = this.state;
    if (previewType === PREVIEW_CLASS) {
      this.refreshClassProcess();
    }
    if (previewType === PREVIEW_TASK) {
      this.refreshPreview();
    }
  }

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

  refreshClassProcess() {
    Question.getClassProcess().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 });
    });
  }

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

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

  startPreview(item) {
    linkTo(`/start/${item.id}?type=preview`);
  }

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

  continuePreview(item) {
    linkTo(`/start/${item.id}?type=preview&r=${item.report.id}`);
  }

  renderView() {
    const { level1Tab, level2Tab, tabs, map } = this.state;
    return (
      <div>
        <div className="content">
          <Module className="m-t-2">
            <Tabs type="card" active={level1Tab} tabs={tabs} onChange={key => this.onChangeTab(1, key)} />
            {(level1Tab !== HARD || level1Tab !== PREVIEW) && (
              <Tabs active={level2Tab} tabs={map[level2Tab]} onChange={key => this.onChangeTab(2, key)} />
            )}
          </Module>
          {(level1Tab !== HARD || level1Tab !== PREVIEW) && this.renderType()}
          {level1Tab === HARD && this.renderHard()}
          {level1Tab === PREVIEW && this.renderWork()}
        </div>
      </div>
    );
  }

  renderWork() {
    const { previewType } = this.state;
    switch (previewType) {
      case PREVIEW_CLASS:
        return this.renderAllClass();
      case PREVIEW_TASK:
        return this.renderAllTask();
      default:
        return <div />;
    }
  }

  renderAllClass() {
    const { allClass, classProcess } = this.props;
    return (
      <Division col="3">
        {allClass.map(item => {
          return <Card data={item} process={classProcess[item.id]} previewAction={this.previewAction} />;
        })}
      </Division>
    );
  }

  renderAllTask() {
    const { previews } = this.props;
    return (
      <ListTable
        filters={[
          { type: 'radio', checked: 'first', list: [{ key: 'first', title: 123 }, { key: 'two', title: 321 }] },
          { type: 'select', checked: 'first', list: [{ key: 'first', title: 123 }, { key: 'two', title: 321 }] },
        ]}
        data={previews}
        columns={[
          {
            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>
              );
            },
          },
        ]}
      />
    );
  }

  renderHard() {
    return this.renderInputCode();
  }

  renderType() {
    return <div />;
  }

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