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

export default class extends Page {
  renderView() {
    const { modal } = this.state;
    return (
      <div className="layout">
        <div className="layout-header">
          <div className="no">No.36</div>
          <div className="title">OG18 - Easy (21-40) </div>
          <div className="right">
            <span className="b">
              用时:<span className="s">1</span>m<span className="s">39</span>s
            </span>
            <span className="b">
              全站:<span className="s">1</span>m<span className="s">39</span>s
            </span>
            <span className="b">
              <span className="s">80</span>%
            </span>
            <Assets name="" />
            <Assets name="" />
          </div>
        </div>
        <div className="layout-body">{this.renderContent()}</div>
        <div className="layout-footer">
          <div className="left">1</div>
          <div className="center">
            <div className="item">笔记</div>
            <div className="item">提问</div>
            <div className="item">纠错</div>
          </div>
          <div className="right">1</div>
        </div>
        {modal ? this.renderModal() : ''}
      </div>
    );
  }

  renderContent() {
    return (
      <div className="layout-content">
        {this.renderLeft()}
        {this.renderRight()}
      </div>
    );
  }

  renderRight() {
    return (
      <div className="content-right">
        <Tabs
          type="card"
          active="1"
          tabs={[
            { key: '1', name: '官方解析', path: '/' },
            { key: '2', name: '千行解析', path: '/' },
            { key: '3', name: '题源联想', path: '/' },
            { key: '4', name: '相关回答', path: '/' },
          ]}
        />
        <div className="detail">
          “Offering support services to spouses caring for their other halves may reduce martial stress and prevent
          divorce at older ages,” she said. “But it’s also important to recognize that the pressure to divorce may be
          health-related and that sick ex-wives may need additional care and services to prevent worsening health and
          increased health costs.”
        </div>
      </div>
    );
  }

  renderLeft() {
    return <div className="content-left">1</div>;
  }

  renderModal() {
    const { modal } = this.state;
    return (
      <div className="modal">
        <div className="mask" />
        <div className="body">
          <div className="title">{modal.title}</div>
          <div className="desc">{modal.desc}</div>
          {modal.type === 'confirm' ? (
            <div className="btn-list">
              <div className="btn" onClick={() => this.hideModal(true)}>
                <span className="t-d-l">Y</span>es
              </div>
              <div className="btn" onClick={() => this.hideModal(false)}>
                <span className="t-d-l">N</span>o
              </div>
            </div>
          ) : (
            <div className="btn-list">
              <div className="btn" onClick={() => this.hideModal(true)}>
                <span className="t-d-l">O</span>k
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }
}