import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import Button from '../../../components/Button';
import Progress from '../../../components/Progress';
import HardInput from '../../../components/HardInput';

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

  renderView() {
    return (
      <div className="layout">
        <div className="layout-header">
          <div className="left">
            <div className="title">长难句练习 · Part2</div>
          </div>
          <div className="right">
            <div className="text">Time cost 00:02</div>
            <div className="text">收藏</div>
          </div>
        </div>
        {this.renderBody()}
        <div className="layout-footer">
          <div className="left">
            <Assets name="fullscreen_icon" />
            全屏
          </div>
          <div className="center">
            <div className="p">
              <Progress progress={20} />
            </div>
            <div className="t">5/20</div>
          </div>
          <div className="right">
            <Button size="lager" radius>
              Next <Assets name="next_icon" />
            </Button>
          </div>
        </div>
      </div>
    );
  }

  renderBody() {
    return (
      <div className="layout-body">
        <div className="title">请分别找出句子中的主语，谓语和，并做出逻辑关系判断。</div>
        <div className="desc">
          of so—called cybersquatters, people who register the Internet domain names of high—profile companies in hopes
          of reselling the rights to those names for a profit,
        </div>
        <div className="label">主语</div>
        <div className="input">
          <HardInput />
        </div>
        <div className="label">谓语</div>
        <div className="input">
          <HardInput />
        </div>
        <div className="label">宾语</div>
        <div className="input">
          <HardInput />
        </div>
        <div className="select">
          <div className="select-title">本句存在以下哪种逻辑关系？（可多选）</div>
        </div>
      </div>
    );
  }
}