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

import React from 'react';
import { Tooltip } from 'antd';
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;
  }

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

  initState() {
    return { showJump: false, showMenu: false, currentPage: 0, totalPage: 0 };
  }

  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 Sentence.listArticle().then(result => {
      const articleMap = {};
      let totalPage = 0;
      let maxChapter = 0;
      let introduction = null;
      result.forEach((article) => {
        if (article.chapter === 0) introduction = 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 });
      return introduction;
    }).then((introduction) => {
      return Sentence.getInfo().then(result => {
        const map = {};
        // 添加前言
        if (introduction) {
          result.chapters.unshift({
            title: introduction.title,
            value: 0,
          });
        }

        result.chapters.forEach((row) => {
          map[row.value] = row;
        });
        this.setState({ sentence: result, chapterMap: map });
      });
    }).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 < totalPage) {
      this.jumpPage(currentPage + 1);
    }
  }

  jumpPage(targetPage) {
    // 计算哪篇文章
    const { target, index, allow } = this.computeArticle(targetPage);
    console.log(targetPage, target, index);
    if (!allow) {
      // todo 无法访问：非试用
      return;
    }
    this.page = targetPage;
    this.setState({ inputPage: targetPage });
    const { article = {} } = this.state;
    this.updateProgress(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;
    const allow = true || sentence.code || page <= sentence.trailPages;
    for (let i = 0; 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;
          //   }
          // }
          return { target, index, allow };
        }
      }
    }
    return { allow };
  }

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

  updateProgress(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 progress = index + 1 * 100 / target.pages;
    Sentence.updateProgress(target.chapter, target.part, progress, time, current.chapter, current.page);
    this.timeout = setTimeout(() => {
      // 最长5分钟阅读时间
      Sentence.updateProgress(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, chapterMap = {} } = this.state;
    return article && (
      <div className="layout-body">
        <div className="crumb">千行长难句解析 >> {(chapterMap[article.chapter] || {}).title}</div>
        {article.chapter > 0 && <div className="title">{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 鼠标移上显示需要购买后访问
    const message = '购买后访问';
    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 [<div className={'chapter-item trail'}>
                {chapter.title}
              </div>];
            }
            chapter.startPage = page;
            const list = code ? [<div className={'chapter-item'} onClick={() => {
              this.jumpPage(chapter.startPage);
            }}>
              {chapter.title}<div className="page">{chapter.startPage}</div>
            </div>] : [<Tooltip title={message}><div className={'chapter-item trail'}>
              {chapter.title}<div className="page">{chapter.startPage}</div>
            </div></Tooltip>];
            if (chapter.value) {
              (articleMap[chapter.value] || []).forEach((article) => {
                // 得到下一章节page
                page += article.pages;
                const item = code ? <div className={'part-item'} onClick={() => {
                  if (code) this.jumpPage(article.startPage);
                }}>
                  {article.title}<div className="page">{article.startPage}</div>
                </div> : <Tooltip title={message}><div className={'part-item trail'}>
                  {article.title}<div className="page">{article.startPage}</div>
                </div></Tooltip>;
                list.push(item);
              });
            }
            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">{totalPage ? parseInt(currentPage * 100 / totalPage, 10) : 0}%</span>
        <span className="num">{currentPage}/{totalPage}</span>
        <span className="btn">
          <Assets name={showJump ? 'unfold_icon_down' : 'unfold_icon_up'} onClick={() => {
            this.setState({ showJump: !showJump });
          }} />
          <div hidden={!showJump} className="jump">
            <span className="text">当前页</span>
            <input className="input" value={this.state.inputPage} onChange={(e) => {
              this.page = Number(e.target.value);
              this.setState({ inputPage: e.target.value });
            }} />
            <Assets name="yes_icon" onClick={() => {
              if (this.page < 1 || this.page > totalPage) return;
              this.jumpPage(this.page);
            }} />
          </div>
        </span>
      </div>
    );
  }

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