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

import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import { asyncConfirm } from '@src/services/AsyncTools';
import { formatPercent, formatSeconds, formatDate } from '@src/services/Tools';
import Tabs from '../../../components/Tabs';
import Module from '../../../components/Module';
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';
import { QuestionDifficult } from '../../../../Constant';

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

export default class extends Page {
  initState() {
    this.columns = [
      {
        title: '练习册',
        width: 250,
        align: 'left',
        render: (record) => {
          let progress = 0;
          if (record.report) {
            progress = formatPercent(record.report.userNumber, record.report.questionNumber);
          }
          return (
            <div className="table-row">
              <div className="night f-s-16">{record.title}</div>
              <div>
                <ProgressText progress={progress} size="small" />
              </div>
            </div>
          );
        },
      },
      {
        title: '正确率',
        width: 150,
        align: 'left',
        render: (record) => {
          let correct = '--';
          if (record.report) {
            correct = formatPercent(record.report.userCorrect, record.report.userNumber, false);
          }
          return (
            <div className="table-row">
              <div className="night f-s-16 f-w-b">{correct}</div>
              <div className="f-s-12">全站{formatPercent(record.stat.totalCorrect, record.stat.totalNumber, false)}</div>
            </div>
          );
        },
      },
      {
        title: '全站用时',
        width: 150,
        align: 'left',
        render: (record) => {
          let time = '--';
          if (record.report) {
            time = formatSeconds(record.report.userTime / record.report.userNumber);
          }
          return (
            <div className="table-row">
              <div className="night f-s-16 f-w-b">{time}</div>
              <div className="f-s-12">全站{formatSeconds(record.stat.totalTime / record.stat.totalNumber)}</div>
            </div>
          );
        },
      },
      {
        title: '最近做题',
        width: 150,
        align: 'left',
        render: (record) => {
          if (!record.report) return null;
          return (
            <div className="table-row">
              <div>{formatDate(record.report.updateTime, 'YYYY-MM-DD')}</div>
              <div>{formatDate(record.report.updateTime, 'HH:mm')}</div>
            </div>
          );
        },
      },
      {
        title: '操作',
        width: 180,
        align: 'left',
        render: (record) => {
          return (
            <div className="table-row p-t-1">
              {!record.report && <IconButton type="start" tip="Start" onClick={() => {
                Question.startLink('exercise', record);
              }} />}
              {(record.report && !record.report.isFinish) && <IconButton className="m-r-2" type="continue" tip="Continue" onClick={() => {
                Question.continueLink('exercise', record);
              }} />}
              {(record.report) && <IconButton type="restart" tip="Restart" onClick={() => {
                this.restart(record);
              }} />}
            </div>
          );
        },
      },
      {
        title: '报告',
        width: 30,
        align: 'right',
        render: (record) => {
          if (!record.report || !record.report.isFinish) return null;
          return (
            <div className="table-row p-t-1">
              <IconButton type="report" tip="Report" onClick={() => {
                Question.reportLink(record);
              }} />
            </div>
          );
        },
      },
    ];
    this.placeList = [];
    this.inited = false;
    return {
      logic: LOGIC_NO,
      logicExtend: '',
      logics: [{
        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.inited = true;
      this.setState({ navs });
    });
  }

  initData() {
    const data = Object.assign(this.state, this.state.search);
    this.setState(data);
    this.refreshData();
  }

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

  refreshPlace() {
    const { id } = this.params;
    let handler;
    if (this.placeList.length > 0) {
      this.setState({ logicExtends: this.placeList });
      handler = Promise.resolve();
    } else {
      handler = Question.getExercisePlace(id).then(result => {
        this.placeList = result.map(row => {
          return {
            name: row,
            key: row,
          };
        });
        this.setState({ logicExtends: this.placeList });
      });
    }
    return handler.then(() => {
      let { logicExtend } = this.state;
      if (logicExtend === '') {
        logicExtend = this.placeList[0].key;
        this.setState({ logicExtend });
      }
    });
  }

  refreshDifficult() {
    let { logicExtend } = this.state;
    this.setState({
      logicExtends: QuestionDifficult.map(difficult => {
        difficult.name = difficult.label;
        difficult.key = difficult.value;
        return difficult;
      }),
    });
    return Promise.resolve().then(() => {
      if (logicExtend === '') {
        logicExtend = QuestionDifficult[0].key;
        this.setState({ logicExtend });
      }
    });
  }

  refreshExercise() {
    const { logic, logicExtend } = this.state;
    Question.getExerciseList(Object.assign({ structId: this.params.id, logic, logicExtend }, this.state.search))
      .then((result) => {
        this.setState({ list: result.list, total: result.total });
      });
  }

  onChangeTab(key, value) {
    const { logic } = this.state;
    const data = {};
    if (key === 'logicExtend') {
      data.logic = logic;
      data.logicExtend = value;
    } else {
      data.logic = value;
    }
    // this.refreshData(tab);
    this.refreshQuery(data);
  }

  restart(item) {
    asyncConfirm('提示', '你打算重做本套练习，过往做题记录可至「个人中心-报告」查看。', () => {
      Question.restart(item.paper.id).then(() => {
        this.refresh();
      });
    });
  }

  renderView() {
    const { logic, logicExtend, logics = [], logicExtends = [], list } = this.state;
    return (
      <div>
        <div className="content">
          <Module className="m-t-2">
            <Tabs
              active={logic}
              border
              width="180px"
              space="0"
              tabs={logics}
              onChange={(key) => {
                this.onChangeTab('logic', key);
              }}
            />
            {logicExtends.length > 0 && <Tabs
              active={logicExtend}
              type="text"
              tabs={logicExtends}
              onChange={(key) => {
                this.onChangeTab('logicExtend', key);
              }}
            />}
          </Module>

          <ListTable
            data={list}
            columns={this.columns}
          />
        </div>
      </div>
    );
  }
}