sourcecode/front/project/www/routes/sentence/read/page.js

import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import Icon from '../../../components/Icon';
import Progress from '../../../components/Progress';
import Assets from '../../../../../src/components/Assets';
import { Sentence } from '../../../stores/sentence';

export default class extends Page {
  constructor(props) {
    super(props);
    this.page = 0;
    this.inited = false;
    this.timeout = null;
    this.articleMap = {};
    this.pageLine = 100;

    this.state = { showJump: true, showMenu: true };
  }

  init() {
    this.lastTime = new Date();
  }

  initData() {
    const { chapter = 0, part = 0 } = this.state.search;
    let { page = 0 } = this.state.search;

    const handler = this.refreshSentence();
    handler.then(() => {
      if (chapter > 0) {
        if (!part) {
          ({ page } = this.searchArticle(chapter, 1));
        } else {
          ({ page } = this.searchArticle(chapter, part));
        }
      }
      this.jumpPage(page);
    });
  }

  refreshSentence() {
    if (this.inited) return Promise.resolve();
    return Promise.all([
      Sentence.getInfo().then(result => {
        this.setState({ sentence: result });
      }),
      Sentence.listArticle().then(result => {
        const articleMap = {};
        let totalPage = 0;
        let maxChapter = 0;
        result.forEach((article) => {
          if (!articleMap[article.chapter]) {
            articleMap[article.chapter] = [];
            if (article.chapter > maxChapter) maxChapter = article.chapter;
          }
          article.startPage = totalPage + 1;
          article.endPage = totalPage + article.pages;
          totalPage += article.pages;
          articleMap[article.chapter].push(article);
        });
        this.setState({ articleMap, totalPage, maxChapter });
      }),
    ]).then(() => {
      this.inited = true;
    });
  }

  refreshArticle(articleId) {
    if (this.articleMap[articleId]) return Promise.resolve(this.articleMap[articleId]);
    return Sentence.detailArticle(articleId).then(result => {
      this.articleMap[articleId] = result;
      return result;
    });
  }

  prevPage() {
    const { currentPage } = this.state;
    if (currentPage >= 1) {
      this.jumpPage(currentPage - 1);
    }
  }

  nextPage() {
    const { currentPage, totalPage } = this.state;
    if (currentPage + 1 >= totalPage) {
      this.jumpPage(currentPage + 1);
    }
  }

  jumpPage(targetPage) {
    // 计算哪篇文章
    const { target, index, allow } = this.computeArticle(targetPage);
    if (!allow) {
      // todo 无法访问：非试用
      return;
    }
    const { article = {} } = this.state;
    this.updateProcess(target, index, article);
    this.refreshArticle(target.id).then((row) => {
      this.setState({ article: row, index, currentPage: targetPage });
    });
  }

  computeArticle(page) {
    const { articleMap, maxChapter, sentence } = this.state;
    let target = null;
    let index = 0;
    let allow = true;
    for (let i = 1; i < maxChapter; i += 1) {
      const list = articleMap[i];
      if (!list || list.length === 0) continue;
      for (let j = 0; j < list.length; j += 1) {
        const article = list[j];
        if (article.endPage > page) {
          target = article;
          index = page - article.startPage;
          if (!sentence.code) {
            if (!article.isTrail) {
              allow = false;
            } else if (index < article.trailStart - 1) {
              allow = false;
            } else if (index > article.trailEnd - 1) {
              allow = false;
            }
          }
          break;
        }
      }
    }
    return { target, index, allow };
  }

  searchArticle(chapter, part) {
    const { articleMap, sentence } = this.state;
    let target = null;
    let page = 0;
    const list = articleMap[chapter];
    for (let j = 0; j < list.length; j += 1) {
      const article = list[j];
      if (article.part === Number(part)) {
        target = article;
        if (sentence.code) {
          page = article.startPage;
        } else {
          // 试用章节页码
          page = article.startPage + article.trailPage - 1;
        }
        break;
      }
    }
    return { target, page };
  }

  updateProcess(target, index, current) {
    if (this.timeout) {
      clearTimeout(this.timeout);
      this.timeout = null;
    }
    const now = new Date();
    const time = (now.getTime() - this.lastTime.getTime()) / 1000;
    this.lastTime = now;
    const process = index + 1 * 100 / target.pages;
    Sentence.updateProcess(target.chapter, target.part, process, time, current.chapter, current.page);
    this.timeout = setTimeout(() => {
      // 最长5分钟阅读时间
      Sentence.updateProcess(0, 0, 0, 5 * 60, target.chapter, target.part);
    }, 5 * 60 * 1000);
  }

  renderView() {
    return (
      <div className="layout">
        {this.renderBody()}
        {this.renderRight()}
        {this.renderBottom()}
        {this.renderProgress()}
      </div>
    );
  }

  renderBody() {
    const { showMenu, article, index } = this.state;
    return (
      <div className="layout-body">
        <div className="crumb">千行长难句解析 >> Chapter{article.chapter}：{}</div>
        <div className="title">Part{article.part}：{article.title}</div>
        <div className="overload" style={{ top: index * -20 * this.pageLine }}>
          <div className="text" dangerouslySetInnerHTML={{ __html: article.content }} />
        </div>
        {showMenu && this.renderMenu()}
      </div>
    );
  }

  renderMenu() {
    const { sentence = {}, articleMap } = this.state;
    const { chapters = [] } = sentence;
    let page = 1;
    const code = !!sentence.code;
    // todo 鼠标移上显示需要购买后访问
    return (
      <div className="layout-menu">
        <div className="title">目录</div>
        <div className="close" onClick={() => {
          this.setState({ showMenu: false });
        }}>x</div>
        <div className="chapter">
          {chapters.map(chapter => {
            if (chapter.exercise) return [];
            chapter.startPage = page;
            const list = [<div className={`chapter-item ${code ? '' : 'trail'}`} onClick={() => {
              if (code) this.jumpPage(chapter.startPage);
            }}>
              Chapter{chapter.value}：{chapter.title}<div className="page">{chapter.startPage}</div>
            </div>];
            (articleMap[chapter.value] || []).map((article) => {
              // 得到下一章节page
              page += article.pages;
              return <div className={`part-item ${code ? '' : 'trail'}`} onClick={() => {
                if (code) this.jumpPage(article.startPage);
              }}>
                Part{article.part}：{article.title}<div className="page">{article.startPage}</div>
              </div>;
            });
            return list;
          })}
        </div>
      </div>
    );
  }

  renderRight() {
    return (
      <div className="layout-right">
        <div className="m-b-1" onClick={() => {
          this.setState({ showMenu: true });
        }}>
          <Icon name="menu" />
        </div>
        <div className="m-b-1" onClick={() => {
          this.prevPage();
        }}>
          <Icon name="down_turn" />
        </div>
        <div className="m-b-1" onClick={() => {
          this.nextPage();
        }}>
          <Icon name="up_turn" />
        </div>
      </div>
    );
  }

  renderBottom() {
    const { showJump, currentPage, totalPage } = this.state;
    return (
      <div className="layout-bottom">
        <span className="per">{parseInt(currentPage * 100 / totalPage, 10)}%</span>
        <span className="num">{currentPage}/{totalPage}</span>
        <span className="btn">
          <Assets name="unfold_icon_up" onClick={() => {
            this.setState({ showJump: !showJump });
          }} />
          <div hidden={!showJump} className="jump">
            <span className="text">当前页</span>
            <input className="input" onChnage={(value) => {
              this.page = value;
            }} />
            <Assets name="yes_icon" onClick={() => {
              this.jumpPage(Number(this.page));
            }} />
          </div>
        </span>
      </div>
    );
  }

  renderProgress() {
    const { currentPage, totalPage } = this.state;
    return (
      <div className="layout-progress">
        <Progress size="small" theme="theme" radius={false} process={parseInt(currentPage * 100 / totalPage, 10)} />
      </div>
    );
  }
}