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';

export default class extends Page {
  constructor(props) {
    super(props);
    this.state = { showJump: true, showMenu: true };
  }

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

  renderBody() {
    const { showMenu } = this.state;
    return (
      <div className="layout-body">
        <div className="crumb">千行长难句解析 >> Chapter4：简单句变长难句</div>
        <div className="title">Part1：什么样的句子叫做长难句，长难句基本特征</div>
        <div className="text">
          1文章初读：《各段首句） 第一段首句： In the seventeenth-century Florentine textile industry, women were
          employed primarily in low- paying, low-skill jobs. To explain this segregation of labor by gender, economists
          have relied on the useful theory of human capital
          翻译：在17世纪的佛罗伦萨纺织业中，女性主要受雇于低报酬、低技能的工作。经济学家依靠人力资本的有用理论
          来解释这种有性别造成的劳动歧视
          评：陈述了一种现象；在17世纪的佛罗伦萨纺织业中，女性主要受雇于低报酬、低技能的工作。可以推测本文是现
          象解释型文章，果然紧接看介绍了一种理论theory of human capital。推断文章就是围绕这个现象和这个理论展开． There
          were, however, differences in pay scales that cannot be explained by the human capital theory
          翻译：然而．支付规模上存在的差异不能用这种人力资本理论解释。
          评：以转折开头，提出人力资本理论存在的问题，把握文章整体结构二第一段用该理论解释了开头陈述的现象，本段
          则指出该理论的问题作者对该理论的态度比较全面和笋辛证。
        </div>
        {showMenu && this.renderMenu()}
      </div>
    );
  }

  renderMenu() {
    return (
      <div className="layout-menu">
        <div className="title">目录</div>
        <div className="close">x</div>
        <div className="chapter">
          <div className="chapter-item">
            Chapter1：简单句变长难句<div className="page">1</div>
          </div>
          <div className="part-item">
            Part1：什么样的句子叫做长难句，长难句基本特征<div className="page">1</div>
          </div>
        </div>
      </div>
    );
  }

  renderRight() {
    return (
      <div className="layout-right">
        <div className="m-b-1">
          <Icon name="menu" />
        </div>
        <div className="m-b-1">
          <Icon name="down_turn" />
        </div>
        <div className="m-b-1">
          <Icon name="up_turn" />
        </div>
      </div>
    );
  }

  renderBottom() {
    const { showJump } = this.state;
    return (
      <div className="layout-bottom">
        <span className="per">50%</span>
        <span className="num">9/18</span>
        <span className="btn">
          <Assets name="unfold_icon_up" />
          <div hidden={!showJump} className="jump">
            <span className="text">当前页</span>
            <input className="input" />
            <Assets name="yes_icon" />
          </div>
        </span>
      </div>
    );
  }

  renderProgress() {
    return (
      <div className="layout-progress">
        <Progress size="small" theme="theme" radius={false} />
      </div>
    );
  }
}