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

import React from 'react';
import './index.less';
import { Modal } from 'antd';
import { Link } from 'react-router-dom';
import Page from '@src/containers/Page';
import { asyncConfirm } from '@src/services/AsyncTools';
import { formatTreeData, formatSeconds, formatDate, formatPercent } from '@src/services/Tools';
import Continue from '../../../components/Continue';
import Step from '../../../components/Step';
import Panel from '../../../components/Panel';
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 AnswerButton from '../../../components/AnswerButton';
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 ? 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>
      );
    },
  },
];

export default class extends Page {
  constructor(props) {
    super(props);
    this.sentenceColums = [
      {
        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) => {
          const time = record.report ? record.report.updateTime : record.paper ? record.paper.latestTime : null;
          if (!time) return null;
          return (
            <div className="table-row">
              <div>{formatDate(time, 'YYYY-MM-DD')}</div>
              <div>{formatDate(time, '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('sentence', record);
              }} />}
              {(record.report && !record.report.isFinish) && <IconButton className="m-r-2" type="continue" tip="Continue" onClick={() => {
                Question.continueLink('sentence', record);
              }} />}
              {(record.report && !!record.report.isFinish) && <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>
          );
        },
      },
    ];
  }

  initState() {
    this.code = null;
    this.columns = exerciseColumns;
    this.exerciseProgress = {};
    this.inited = false;
    return {
      tab1: SENTENCE,
      tab2: '',
      pt: 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: '预习作业' });
      this.setState({ tabs });
      this.inited = true;
      this.refreshData();
    });
  }

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

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

  refreshSentence() {
    const { sentence } = this.state;
    if (!sentence) {
      User.clearSentenceTrail();
      Sentence.getInfo().then(result => {
        // result.code = '123123';
        // result.trailPages = 20;
        this.setState({ sentence: result });
        return result;
      })
        .then(({ code, trailPages, chapters }) => {
          return Sentence.listArticle().then(result => {
            const chapterSteps = [];
            const chapterMap = {};
            const map = {};
            const trailArticles = [];
            let totalPage = 0;
            let introduction = null;
            let exerciseChapter = null;
            let index = 0;
            let lastChapter = -1;

            chapters.forEach(row => {
              chapterMap[row.value] = row;
              if (row.exercise) exerciseChapter = row;
            });

            result.forEach((article) => {
              if (article.chapter === 0) introduction = article;
              if (!map[article.chapter]) {
                map[article.chapter] = [];
              }
              article.startPage = totalPage + 1;
              article.endPage = totalPage + article.pages;
              if (article.chapter) {
                article.position = `Part ${article.part}`;
              } else {
                // 设置list中的样式
                article.style = 'introduction';
              }
              totalPage += article.pages;
              if (article.startPage < trailPages) {
                if (lastChapter !== article.chapter) {
                  lastChapter = article.chapter;
                  trailArticles.push(Object.assign({ articles: [] }, chapterMap[article.chapter] || {}));
                }
                trailArticles[trailArticles.length - 1].articles.push(article);
              }
              map[article.chapter].push(article);
            });

            if (!code) {
              chapterSteps.push('试用');
            }
            // 添加前言
            if (introduction) {
              chapterSteps.push(`${introduction.title}`);
              chapterMap[0] = {
                title: introduction.title,
                value: 0,
              };
            }
            index += 1;
            chapters.forEach(row => {
              chapterSteps.push(`「${index}」${row.short}`);
              index += 1;
            });
            this.setState({ articleMap: map, trailArticles, chapterSteps, introduction, chapterMap, exerciseChapter });
          });
        })
        .then(() => {
          return Sentence.listPaper().then(result => {
            this.setState({ paperList: result, paperFilterList: result });
          });
        });
    }
  }

  refreshPreview() {
    const { pt } = this.state;
    switch (pt) {
      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(tab) {
    const { tabs, tab1 } = this.state;
    let { tab2 } = this.state;
    if (!tabs) {
      // 等待数据加载
      return;
    }
    const [subject] = tabs.filter(row => row.key === tab);
    // 切换tab1的情况
    if (tab2 === '' || tab1 !== tab) {
      tab2 = subject.children[0].key;
      this.setState({ tab2 });
    }
    const [type] = subject.children.filter(row => row.key === tab2);
    Question.getExerciseProgress(type.id).then((result => {
      // const exerciseProgress = getMap(r, 'id');
      result = result.map(row => {
        row.info = [{
          title: '已做',
          number: row.userNumber || 0,
          unit: '题',
        }, {
          title: '剩余',
          number: row.questionNumber - row.userNumber || 0,
          unit: '题',
        }, {
          title: '总计',
          number: row.questionNumber || 0,
          unit: '题',
        }];
        if (row.userStat) {
          row.correct = formatPercent(row.userStat.userCorrect, row.userStat.userNumber, false);
        } else {
          row.correct = '--';
        }
        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;
        });
        return row;
      });
      this.setState({ exerciseProgress: result });
    }));
  }

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

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

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

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

  exerciseList(item) {
    linkTo(`/exercise/list/${item.id}`);
  }

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

  trailSentence() {
    User.sentenceTrail();
    this.setState({ sentenceError: null });
  }

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

  sentenceFilter(value) {
    const { paperList } = this.state;
    const list = paperList.filter(row => {
      const finish = row.paper ? row.paper.times > 0 : false;
      if (value === 0) {
        return !finish;
      }
      return finish;
    });
    this.setState({ paperFilterList: list, paperChecked: value });
  }

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

  renderView() {
    const { tab1, tab2, tabs, latest, sentenceModel } = this.state;
    const [subject] = tabs.filter(row => row.key === tab1);
    const children = subject ? subject.children : [];
    return (
      <div>
        {latest && <Continue
          data={latest}
          onClose={() => {
            this.clearExercise();
          }}
          onContinue={() => {
            Question.continueLink('exercise', latest);
          }}
          onRestart={() => {
            this.restart(latest);
          }}
          onNext={() => {
            Question.continueLink('exercise', latest);
          }} />}
        <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>
        {sentenceModel && this.renderInputCodeModel()}
      </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: '全部' }] },
          ]}
          data={previews}
          columns={this.columns}
        />
      </div>
    );
  }

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

  renderSentenceArticle() {
    const { sentence = {}, introduction, chapterSteps, chapterStep = 1, exerciseChapter = {}, chapterMap = {}, articleMap = {}, trailArticles = [], paperFilterList = [], paperList = [], paperChecked } = this.state;
    const { sentenceTrail } = this.props.user;
    let maxStep = 0;
    if (sentenceTrail) {
      // 试用只能访问第一step
      maxStep = 1;
      // 查找练习章节
    }
    // 减去前言计算chapter
    const chapter = introduction ? chapterStep - 1 : chapterStep;
    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({ sentenceModel: true });
      }}>输入</a></div>}
      <Module>
        <Step
          list={chapterSteps}
          step={chapterStep}
          onClick={(step) => {
            this.setState({ chapterStep: step });
          }}
          message='请购买后访问'
          maxStep={maxStep}
        />
      </Module>
      {/* 正常前言 */}
      {sentence.code && chapter === 0 && <List
        // title={chapterInfo.title}
        list={[introduction]}
        onClick={() => {
          this.sentenceRead();
        }}
      />}
      {/* 正常文章 */}
      {sentence.code && chapter > 0 && !isExercise && <List
        position={`Chapter${chapter}`}
        title={chapterInfo.title}
        list={articleMap[chapter]}
        onClick={(part) => {
          this.sentenceRead(part);
        }}
      />}
      {/* 正常练习 */}
      {sentence.code && isExercise && <ListTable
        position={`Chapter${chapter}`}
        title={chapterInfo.title}
        filters={[{
          type: 'radio',
          checked: paperChecked,
          list: [{ key: 0, title: '未完成' }, { key: 1, title: '已完成' }],
          onChange: (item) => {
            this.sentenceFilter(item.key);
          },
        }]}
        data={paperFilterList}
        columns={this.sentenceColums}
      />}
      {/* 试读文章 */}
      {sentenceTrail && trailArticles.map((info) => {
        return <List
          position={info.value ? `Chapter${info.value}` : null}
          title={info.title}
          list={info.articles}
          onClick={(part) => {
            this.sentenceRead(part);
          }}
        />;
      })}
      {/* 试练 */}
      {sentenceTrail && <ListTable
        position={`Chapter${exerciseChapter.value}`}
        title={exerciseChapter.title}
        data={paperList}
        columns={this.sentenceColums}
      />}
    </div>;
  }

  renderInputCode() {
    const { sentenceError } = this.state;
    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>
          {sentenceError && <div className='error'>{sentenceError}</div>}
        </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>
    );
  }

  renderInputCodeModel() {
    const { sentenceError } = this.state;
    return <Modal visible closable={false} footer={false} title={false}>
      <div className="code-module-modal">
        <div className="title">请输入CODE</div>
        <div className="desc">
          <Input onChange={(value) => {
            this.code = value;
          }} />
          {sentenceError && <div className='error'>{sentenceError}</div>}
          <div className='tip'>
            <Link to="/" className="right link">
              什么是CODE？
          </Link>
          </div>
        </div>
        <div className="btn-list">
          <AnswerButton size="lager" theme="confirm" width={150} onClick={() => this.activeSentence()}>确认</AnswerButton>
          <AnswerButton size="lager" theme="cancel" width={150} onClick={() => this.setState({ sentenceModel: false })}>取消</AnswerButton>
        </div>
      </div>
    </Modal>;
  }

  renderExercise() {
    const { exerciseProgress = [] } = this.state;
    return <div >
      <Division col="2">
        {(exerciseProgress || []).map((struct) => {
          const [first] = struct.children;
          let col = 3;
          if (first && first.type === 'paper') {
            col = 5;
          }
          return <Panel
            title={struct.titleEn}
            message={struct.description}
            data={struct}
            col={col}
            onClick={(item) => {
              if (item.type === 'paper') {
                if (item.progress === 0) {
                  Question.startLink('exercise', item);
                } else if (item.progress === 100) {
                  Question.startLink('exercise', item);
                } else {
                  Question.continueLink('exercise', item);
                }
              } else {
                this.exerciseList(item);
              }
            }}
          />;
        })}
      </Division>
    </div>;
  }
}