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

import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import { asyncConfirm, asyncSMessage } from '@src/services/AsyncTools';
import { formatTreeData, formatSeconds, formatPercent, formatDate } from '@src/services/Tools';
import Panel, { WaitPanel, BuyPanel, SmallPanel, SmallWaitPanel, SmallBuyPanel } from '../../../components/Panel';
import Tabs from '../../../components/Tabs';
import Module from '../../../components/Module';
import Division from '../../../components/Division';
import ProgressText from '../../../components/ProgressText';
import IconButton from '../../../components/IconButton';
import { Main } from '../../../stores/main';
// import { My } from '../../../stores/my';
import { Question } from '../../../stores/question';
import { Textbook } from '../../../stores/textbook';
// import { User } from '../../../stores/user';
// import { CourseModuleShow, CourseModule } from '../../../../Constant';
import { Order } from '../../../stores/order';

const TEXTBOOK = 'textbook';

export default class extends Page {
  constructor(props) {
    super(props);
    this.examinationColumns = [{
      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 ? formatPercent(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">{formatPercent(item.stat.totalCorrect, item.stat.totalNumber, false)}</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">全站{formatSeconds(item.stat.totalTime / item.stat.totalNumber)}</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.report && <IconButton type="start" tip="Start" onClick={() => Question.startLink('preview', item)} />}
            {item.report.id && !item.report.isFinish && (
              <IconButton
                className="m-r-2"
                type="continue"
                tip="Continue"
                onClick={() => Question.continueLink('preview', item)}
              />
            )}
            {item.report.id && <IconButton type="restart" tip="Restart" onClick={() => this.restart('preview', item)} />}
          </div>
        );
      },
    },
    {
      title: '报告',
      width: 30,
      align: 'right',
      render: item => {
        return (
          <div className="table-row p-t-1">
            {item.report.isFinish && <IconButton type="report" tip="Report" onClick={() => Question.reportLink(item)} />}
          </div>
        );
      },
    }];
  }

  initState() {
    this.examinationProgress = {};
    this.textbookProgress = {};
    this.inited = false;
    return {
      tab1: '',
      tab2: '',
      tabs: [],
    };
  }

  init() {
    Main.getExamination().then(result => {
      const list = result.filter(row => row.level === 1).map(row => {
        row.title = `${row.titleZh}${row.titleEn}`;
        row.key = row.extend;
        return row;
      });
      const tabs = formatTreeData(list, 'id', 'title', 'parentId');
      tabs.push({ key: TEXTBOOK, name: '数学机经' });
      this.setState({
        tabs,
      });
      this.inited = true;
      this.refreshData();
    });
  }

  initData() {
    const data = Object.assign(this.state, this.state.search);
    if (!data.tab1) {
      data.tab1 = TEXTBOOK;
    }
    this.setState(data);
    if (this.inited) this.refreshData();
  }

  refreshData(tab) {
    const { tab1 } = this.state;
    switch (tab || tab1) {
      case TEXTBOOK:
        this.refreshTextbook();
        break;
      default:
        this.refreshExamination(tab || tab1);
    }
  }

  refreshTextbook() {
    Textbook.progress().then(result => {
      // const exerciseProgress = getMap(r, 'id');
      result = result.map(row => {
        row.info = [
          {
            title: '已做',
            number: row.userNumber || '-',
            unit: '题',
          },
          {
            title: '剩余',
            number: row.userNumber ? row.questionNumber - row.userNumber : '-',
            unit: '题',
          },
          {
            title: '正确率',
            number: row.userNumber ? formatPercent(row.userStat.userCorrect, row.userStat.userNumber, false) : '-%',
            unit: '',
          },
          {
            title: '全站',
            number: row.userNumber ? formatPercent(row.stat.totalCorrect, row.stat.totalNumber, false) : '-%',
            unit: '题',
          },
        ];

        row.progress = formatPercent(row.questionNumber - row.userNumber || 0, row.questionNumber);
        row.totalCorrect = formatPercent(row.stat.totalCorrect, row.stat.totalNumber, false);

        row.children = row.children.map(r => {
          r.title = r.title || r.titleZh;
          r.progress = formatPercent(r.userNumber, r.questionNumber);
          return r;
        });

        if (row.isLatest) {
          const day = parseInt((new Date().getTime() - new Date(row.startDate).getTime()) / 86400000, 10);
          row.desc = [`最近换库：${formatDate(row.startDate, 'YYYY-MM-DD')} ，已换库${day}天`, `最后更新：${formatDate(row.updateTime)}`];
        }
        return row;
      });
      this.setState({ textbookProgress: result });
    });
  }

  refreshExamination(tab) {
    const { tabs, tab1 } = this.state;
    if (!tabs) {
      // 等待数据加载
      return;
    }
    const [subject] = tabs.filter(row => row.key === tab || row.key === tab1);
    Question.getExaminationProgress(subject.id).then(result => {
      // const exerciseProgress = getMap(r, 'id');
      result = result.map(row => {
        row.title = `${row.titleZh}${row.titleEn}`;
        row.info = [
          {
            title: '已做',
            number: row.userNumber || '-',
            unit: '套',
          },
          {
            title: '剩余',
            number: row.userNumber ? row.questionNumber - row.userNumber : '-',
            unit: '套',
          },
        ];
        return row;
      });
      this.setState({ examinationProgress: result });
    });
  }

  onChangeTab(level, tab) {
    const { tab1 } = this.state;
    const data = {};
    if (level > 1) {
      data.tab1 = tab1;
      data.tab2 = tab;
    } else {
      data.tab1 = tab;
    }
    // this.refreshData(tab);
    this.refreshQuery(data);
  }

  onTextbook() {
    const { tab1, tab2, struct } = this.state;
    const data = {
      tab1, tab2, struct,
    };
    this.refreshQuery(data);
  }

  // 开通模考或者机经
  open(recordId) {
    Order.useRecord(recordId).then(() => {
      asyncSMessage('开通成功');
      this.refresh();
    });
  }

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

  examinationList(item) {
    linkTo(`/examination/list/${item.id}`);
  }

  textbookList(item) {
    linkTo(`/textbook/list/${item.id}`);
  }

  renderView() {
    const { tab1, tab2, tabs } = this.state;
    const [subject] = tabs.filter(row => row.key === tab1);
    const children = (subject && subject.children) ? subject.children : [];
    return (
      <div>
        <div className="content">
          <Module className="m-t-2">
            <Tabs
              type="card"
              active={tab1}
              tabs={tabs}
              onChange={key => {
                this.onChangeTab(1, key);
              }}
            />
            {children && children.length > 1 && (
              <Tabs active={tab2} tabs={children} onChange={key => this.onChangeTab(2, key)} />
            )}
          </Module>
          {tab1 !== TEXTBOOK && this.renderExamination()}
          {tab1 === TEXTBOOK && this.renderTextbook()}
        </div>
      </div>
    );
  }

  renderTextbook() {
    const { textbookProgress = [] } = this.state;
    return (
      <div>
        <Division col={2}>
          {(textbookProgress || []).map(struct => {
            if (struct.needService && !struct.hasService) {
              if (struct.unUseRecord) {
                return <WaitPanel
                  title={struct.isLatest ? '最新' : '往期'}
                  col="3"
                  data={struct}
                />;
              }
              return <BuyPanel
                title={struct.isLatest ? '最新' : '往期'}
                onBuy={() => {
                  this.buyTextbook();
                }}
              />;
            }
            return <Panel
              title={struct.isLatest ? '最新' : '往期'}
              col="3"
              data={struct}
              onClick={(item) => {
                this.textbookList(item);
              }}
            />;
          })}
        </Division>
      </div>
    );
  }

  renderExamination() {
    const { examinationProgress = [] } = this.state;
    return (
      <div>
        <Division col={3} type="compact">
          {(examinationProgress || []).map(struct => {
            if (struct.hasService) {
              return <SmallPanel
                title={struct.title}
                data={struct}
                onClick={() => {
                  this.examinationList(struct);
                }}
              />;
            } if (struct.unUseRecord) {
              return <SmallWaitPanel
                title={struct.title}
                data={struct}
                onOpen={() => {
                  this.open(struct.unUseRecord);
                }}
              />;
            }
            return <SmallBuyPanel
              title={struct.title}
              data={struct}
              onBuy={() => {
                this.buyQxCat();
              }}
            />;
          })}
        </Division>
      </div>
    );
  }
}