sourcecode/front/project/www/routes/page/ready/page.js

import React from 'react';
import './index.less';
// import { Link } from 'react-router-dom';
import { Anchor, Icon } from 'antd';
import Assets from '@src/components/Assets';
import Page from '@src/containers/Page';
import Select from '../../../components/Select';
import Button from '../../../components/Button';
import QAList from '../../../components/QAList';
import Tabs from '../../../components/Tabs';
import { SuppleModal, SuppleFinishModal, FaqModal, FinishModal } from '../../../components/OtherModal';
import { Main } from '../../../stores/main';
import { User } from '../../../stores/user';
import { getMap, formatTreeData } from '../../../../../src/services/Tools';

export default class extends Page {
  initState() {
    this.areaMap = {};
    this.categoryMap = {};
    this.loadArticleMap = {};
    this.readPlateMap = {};
    this.loadReadMap = {};
    this.dataList = null;
    return {
      readTab: '1',
      bottom: 600,
      // load: false,
      // list: [
      //   {
      //     key: '1',
      //     title: '了解GMAT',
      //     children: true,
      //   },
      //   { key: '2', title: '推荐阅读' },
      //   { key: '3', title: '考场查询' },
      //   { key: '4', title: '熟悉备考资料', children: true },
      // ],
      // current: '1',
      // scrollCurrent: '1-1',
      // result: [{}, {}, {}],
      // data: [
      //   { key: '1', id: 'data1', title: '官方', children: [{}, {}, {}] },
      //   { key: '2', id: 'data2', title: '非官方', children: [{}, {}, {}] },
      // ],
      // page: [
      //   {
      //     key: '1-1',
      //     title: '考试功能',
      //     id: '#test1',
      //     content:
      //       '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
      //   },
      //   {
      //     key: '1-2',
      //     title: '出题原理',
      //     id: '#test2',
      //     content:
      //       '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
      //   },
      //   {
      //     key: '1-3',
      //     title: '出题原理',
      //     id: '#test3',
      //     content:
      //       '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
      //   },
      //   {
      //     key: '1-4',
      //     title: '出题原理',
      //     id: '#test4',
      //     content:
      //       '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
      //   },
      //   {
      //     key: '1-5',
      //     title: '出题原理',
      //     id: '#test5',
      //     content:
      //       '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
      //   },
      //   {
      //     key: '1-6',
      //     title: '出题原理',
      //     id: '#test6',
      //     content:
      //       '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
      //   },
      //   {
      //     key: '1-7',
      //     title: '出题原理',
      //     id: '#test7',
      //     content:
      //       '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
      //   },
      //   {
      //     key: '1-8',
      //     title: '出题原理',
      //     id: '#test8',
      //     content:
      //       '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
      //   },
      //   {
      //     key: '1-9',
      //     title: '出题原理',
      //     id: '#test9',
      //     content:
      //       '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
      //   },
      //   {
      //     key: '1-10',
      //     title: '出题原理',
      //     id: '#test10',
      //     content:
      //       '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
      //   },
      //   {
      //     key: '1-11',
      //     title: '出题原理',
      //     id: '#test11',
      //     content:
      //       '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
      //   },
      // ],
    };
  }

  init() {
    this.bottom = 600;
    Main.readyInfo()
      .then(result => {
        // read, category, area
        this.areaMap = getMap(result.area, 'id', 'title');
        result.category = result.category.map(row => {
          row.key = row.id;
          return row;
        });
        result.category.push({
          id: 'read',
          key: 'read',
          title: '推荐阅读',
          isRead: true,
        });
        result.category.push({
          id: 'faq',
          key: 'faq',
          title: 'FAQs',
          isFaq: true,
        });
        this.categoryMap = getMap(result.category, 'id');
        result.category = result.category.filter(row => {
          if (!row.parentId) return true;
          const parent = this.categoryMap[row.parentId];
          if (row.parentId > 0 && parent) return true;
          return false;
        });
        const list = formatTreeData(result.category, 'id', 'title', 'parentId').map((row) => {
          if (row.isRoom) row.children = [];
          return row;
        });
        const readPlates = ((result.read || {}).plates || []).map((row, index) => {
          row.title = row.plate;
          row.key = `${index + 1}`;
          return row;
        });
        this.readPlateMap = getMap(readPlates, 'key');
        this.setState({ list, readPlates });
        this.changePage(list[0].id);
      });
  }

  initData() {

  }

  refreshRoom() {
    const { isOverseas, keyword } = this.state;
    if (!keyword) {
      return;
    }
    Main.listRoom({ page: 1, size: 10, keyword, isOverseas })
      .then(result => {
        result.list = result.list.map(row => {
          if (row.isOverseas) return row;
          row.area = this.areaMap[row.areaId];
          return row;
        });
        this.setState({ rooms: result.list });
      });
  }

  refreshData(item) {
    if (!this.dataList) {
      Main.allData()
        .then(result => {
          const official = result.filter(row => row.isOfficial);
          const unofficial = result.filter(row => !row.isOfficial);
          item.children.forEach(row => {
            if (row.isOfficial) {
              row.children = official;
            } else {
              row.children = unofficial;
            }
          });
          this.dataList = result;
          this.setState({ datas: item.children });
          this.readyScroll(item.children);
        });
    } else {
      this.setState({ datas: item.children });
      this.readyScroll(item.children);
    }
  }

  refreshList(item) {
    const { key } = item;
    if (!this.loadArticleMap[key]) {
      Main.listArticle(key)
        .then(result => {
          this.loadArticleMap[key] = result;
          this.setState({ articles: result });
          this.readyScroll(item.children);
        });
    } else {
      const list = this.loadArticleMap[key];
      this.setState({ articles: list });
      this.readyScroll(item.children);
    }
  }

  refreshFaq() {
    if (!this.faqList) {
      Main.listFaq({ page: 1, size: 1000, channel: 'getready' })
        .then(result => {
          this.faqList = result.list;
          this.setState({ faqs: this.faqList });
        });
    } else {
      this.setState({ faqs: this.faqList });
    }
  }

  readyScroll(list) {
    if (this.scrollIntervalKey) clearInterval(this.scrollIntervalKey);
    this.initScroll(list);
  }

  initScroll(list) {
    this.load = false;
    this.scrollIntervalKey = setInterval(() => {
      try {
        list.forEach(item => {
          item.top = document.getElementById(item.id).offsetTop - 35;
          return item;
        });
        const bottom = document.body.clientHeight - list[list.length - 1] - 35 - 44;
        if (bottom === this.bottom) {
          if (this.scrollIntervalKey) clearInterval(this.scrollIntervalKey);
        }
        this.load = true;
        this.setState({ bottom });
        this.bottom = bottom;
      } catch (e) {
        this.load = false;
      }
    }, 1000);
  }

  scrollListener(e) {
    if (!this.load) return;
    this.onScroll(e);
  }

  inPage() {
    document.getElementById('root').addEventListener('scroll', this.scrollListener.bind(this));
  }

  outPage() {
    document.getElementById('root').removeEventListener('scroll', this.scrollListener.bind(this));
  }

  onScroll(e) {
    const t = e.target.scrollTop;
    const { current, scrollCurrent } = this.state;
    const _list = this.categoryMap[current].children;
    let _current = null;
    for (let i = 0; i < _list.length; i += 1) {
      if (!_current) _current = _list[i].key;
      if (t < _list[i].top) break;
      _current = _list[i].key;
    }
    if (_current !== scrollCurrent) {
      this.setState({ scrollCurrent: _current });
    }
  }

  scrollTo(top) {
    document.getElementById('root').scrollTo({ top, behavior: 'smooth' });
  }

  changePage(key) {
    const item = this.categoryMap[key];
    if (item.isRoom) {
      this.refreshRoom();
    } else if (item.isData) {
      this.refreshData(item);
    } else if (item.isRead) {
      this.refreshRead();
    } else if (item.isFaq) {
      this.refreshFaq();
    } else {
      this.refreshList(item);
    }
    this.setState({ current: key, open: true });
  }

  refreshRead() {
    // init
    const { readPlates } = this.state;
    this.onChangeReadTab(readPlates[0].key);
  }

  onChangeReadTab(key) {
    const plate = this.readPlateMap[key];
    this.setState({ readTab: key, plate, reads: [] });
    if (!this.loadReadMap[key]) {
      Main.listRead({ page: 1, size: 100, plate: key })
        .then(result => {
          this.loadReadMap[key] = result.list;
          this.setState({ reads: result.list });
        });
    } else {
      const list = this.loadReadMap[key];
      this.setState({ reads: list });
    }
  }

  renderView() {
    const { list, current, scrollCurrent, open, bottom } = this.state;
    let detail = {};
    return (
      <div>
        <div className="content">
          <div className="left">
            <Anchor offsetTop={90} getContainer={() => document.getElementById('root')}>
              {list.map(item => {
                if (item.key === current) detail = item;
                return (
                  <div
                    className={`page-item ${item.key === current && open ? 'active' : ''}`}
                    onClick={() => {
                      if (item.key === current) {
                        this.setState({ open: !open });
                      } else {
                        this.changePage(item.key);
                      }
                    }}
                  >
                    {item.children && item.children.length > 0 && <Assets name="dropdown_hover" className="up" />}
                    {<Assets name="dropdown_normal" className="down" />}
                    {(!item.children || item.children.length === 0) && <Assets name="dropdown_hover" className="change" />}
                    <div className="page-item-title">{item.title}</div>
                    {current === item.key && open &&
                      item.children &&
                      item.children.map(child => {
                        return (
                          <div
                            style={{ margin: 3 }}
                            className={`t-s-12 t-2 c-p ${child.key === scrollCurrent ? 't-4' : ''}`}
                            onClick={(e) => {
                              e.stopPropagation();
                              this.scrollTo(child.top);
                            }}
                            title={child.title}
                          >
                            {child.title}
                          </div>
                        );
                      })}
                  </div>
                );
              })}
            </Anchor>
          </div>
          <div className="center" style={{ paddingBottom: `${bottom}px` }}>
            <div className="t-1 t-s-24 m-b-2">{detail.title}</div>
            {!detail.isData && !detail.isRoom && !detail.isRead && !detail.isFaq && this.renderList()}
            {!!detail.isRoom && this.renderRoom()}
            {!!detail.isData && this.renderData()}
            {!!detail.isRead && this.renderRead()}
            {!!detail.isFaq && this.renderFaq()}
          </div>
        </div>
      </div>
    );
  }

  renderRoom() {
    const { rooms = [], isOverseas, keyword, showFinish, showSupple, supple, room } = this.state;
    return (
      <div className="query-layout">
        <div className="search-wrapper">
          <Select theme="white" value={isOverseas} list={[{ title: '中国', key: false }, { title: '海外', key: true }]} onChange={({ key }) => this.setState({ isOverseas: key })} />
          <input value={keyword} placeholder='请输入城市名称' onChange={(e) => this.setState({ keyword: e.target.value })} onKeyUp={(e) => {
            if (e.keyCode === 13) {
              this.refreshRoom();
            }
          }} />
          <Button width={150} onClick={() => this.refreshRoom()}>
            <Icon className="m-r-5" type="search" />
            搜索考场
          </Button>
        </div>
        {rooms.map((item) => {
          return (
            <div className="m-b-2">
              <div className="t-1 t-s-18">{item.title}</div>
              <div className="t-1">{item.address}</div>
              <div className="t-1">
                温馨提示: {item.description} <span className="t-4 c-p" onClick={() => User.needLogin().then(() => this.setState({ showSupple: true, supple: { roomId: item.id }, room: item }))}>我要补充</span>
              </div>
            </div>
          );
        })}
        <SuppleModal show={showSupple} defaultData={supple} info={room} onConfirm={() => this.setState({ showSupple: false, showFinish: true })} onCancel={() => this.setState({ showSupple: false })} />
        <SuppleFinishModal show={showFinish} onConfirm={() => this.setState({ showFinish: false })} onCancel={() => this.setState({ showFinish: false })} />
      </div>
    );
  }

  renderData() {
    const { datas = [], dataId } = this.state;
    return datas.map(item => {
      return (
        <div className="p-t-1 m-b-2" id={item.id}>
          <div className="t-1 t-s-18 m-b-1">{item.title}</div>
          <div className="data-list">
            {item.children.map(child => {
              return <div style={{ width: 240, height: 310, overflowY: 'auto', display: 'inline-block', border: '1px solid #ccc', padding: '5px' }} className="ws-pl data-item" onClick={() => this.setState({ dataId: child.id === dataId ? null : child.id })}>
                {child.id === dataId ? child.content : <Assets width={240} height={310} src={child.cover} />}
              </div>;
            })}
          </div>
        </div>
      );
    });
  }

  renderList() {
    const { articles = [], scrollCurrent } = this.state;
    return articles.map(item => {
      return (
        <div className="p-t-1 m-b-2" style={{ whiteSpace: 'pre-wrap' }} id={item.categoryId}>
          <div className="t-1 t-s-18 m-b-1">{scrollCurrent === item.categoryId ? <span className="t-4">{item.title}</span> : item.title}</div>
          <div className="t-2" dangerouslySetInnerHTML={{ __html: item.content }} />
        </div>
      );
    });
  }

  renderRead() {
    const { readTab, reads = [], readPlates, plate = {} } = this.state;
    return <div className='read-layout'>
      <Tabs
        className='m-b-2'
        type="division"
        theme="gray"
        space={2.5}
        active={readTab}
        tabs={readPlates}
        onChange={key => this.onChangeReadTab(key)}
      />
      {!!plate.jump && <div className='m-b-2'>
        <Button className='m-r-1' onClick={() => openLink(plate.link)}>{plate.text}</Button>
      </div>}
      {reads.map((item) => {
        return <div className='m-b-5'>
          <a href={item.link || ''} target="_blank">{item.title}</a>
        </div>;
      })}
    </div>;
  }

  renderFaq() {
    const { faqs = [], showFaq, showFinish, faq = {} } = this.state;
    return <div className='faq-layout'>
      <Button onClick={() => User.needLogin().then(() => this.setState({ showFaq: true, faq: { channel: 'getready' } }))}>我要提问 ></Button>
      <QAList data={faqs} />

      <FaqModal show={showFaq} defaultData={faq} onCancel={() => this.setState({ showFaq: false, faq: {} })} onConfirm={() => this.setState({ showFaq: false, faq: {}, showFinish: true })} />
      <FinishModal
        show={showFinish}
        onConfirm={() => this.setState({ showFinish: false })}
      />
    </div>;
  }
}