sourcecode/front/project/www/routes/exercise/list/page.js

import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import { asyncConfirm } from '@src/services/AsyncTools';
import Tabs from '../../../components/Tabs';
import Module from '../../../components/Module';
import ProgressText from '../../../components/ProgressText';
import IconButton from '../../../components/IconButton';
import { Main } from '../../../stores/main';
import { Question } from '../../../stores/question';
import { QuestionDifficult } from '../../../../Constant';

const LOGIC_NO = 'no';
const LOGIC_PLACE = 'place';
const LOGIC_DIFFICULT = 'difficult';
const LOGIC_ERROR = 'error';

const 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>
      );
    },
  },
];

export default class extends Page {
  initState() {
    this.columns = columns;
    this.placeList = [];
    return {
      logic: LOGIC_NO,
      logicExtend: '',
      tabs: [{
        key: LOGIC_NO,
        title: '按顺序练习',
      }, {
        key: LOGIC_PLACE,
        title: '按考点练习',
      }, {
        key: LOGIC_DIFFICULT,
        title: '按难度练习',
      }, {
        key: LOGIC_ERROR,
        title: '按易错度练习',
      }],
    };
  }

  init() {
    const { id } = this.params;
    Main.getExerciseParent(id).then(result => {
      const navs = result;
      this.setState({ navs });
    });
  }

  initData() {
    this.refresh();
  }

  refresh() {
    const { logic } = this.state;
    let handler = null;
    switch (logic) {
      case LOGIC_PLACE:
        handler = this.refreshPlace();
        break;
      case LOGIC_DIFFICULT:
        handler = this.refreshDifficult();
        break;
      default:
        handler = Promise.resolve();
    }
    handler.then(() => {
      this.refreshExercise();
    });
  }

  refreshPlace() {
    if (this.placeList.length > 0) {
      this.setState({ logicExtend: this.placeList[0] });
      return Promise.resolve();
    }
    const { id } = this.params;
    return Question.getExercisePlace(id).then(result => {
      this.placeList = result;
      this.setState({ logicExtend: this.placeList[0] });
    });
  }

  refreshDifficult() {
    this.setState({ logicExtend: QuestionDifficult[0].value });
    return Promise.resolve();
  }

  refreshExercise() {
    Question.getExerciseList(this.state.search)
      .then((result) => {
        this.setState({ list: result.list, total: result.total });
      });
  }

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

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

  renderView() {
    const { level1Tab = {}, level2Tab = {}, tabs } = this.state;
    return (
      <div>
        <div className="content">
          <Module className="m-t-2">
            <Tabs type="card" active={level1Tab.key} tabs={tabs} onChange={key => {
              this.onChangeTab(1, key);
            }} />
            {level1Tab.children > 1 && <Tabs active={level2Tab.key} tabs={level1Tab.children} onChange={key => this.onChangeTab(2, key)} />}

          </Module>
        </div>
      </div>
    );
  }
}