import React, { Component } from 'react';
import './index.less';
import Page from '@src/containers/Page';
import HardInput from '../../../components/HardInput';
import AnswerCheckbox from '../../../components/AnswerCheckbox';

export default class extends Page {
  renderView() {
    return (
      <div>
        {this.renderHead()}
        {this.renderNormal()}
      </div>
    );
  }

  renderHead() {
    return (
      <div className="head-layout">
        <div className="content p-r">
          <div className="t-1 t-s-30">千行GMAR</div>
          <div className="t-1 t-s-18">
            <span>周月言</span> <span>ID 23432542546476</span>
          </div>
          <div className="t-2 t-s-12">* 请勿外传或商用！</div>
          <div style={{ right: 0, top: 20 }} className="p-a t-r">
            <div className="t-2">第8次导出错题</div>
            <div className="t-2">本次导出 35 道 </div>
            <div className="t-2">2019-04-23 14:40:39</div>
          </div>
        </div>
      </div>
    );
  }

  renderNormal() {
    return (
      <div className="detail-layout">
        <div className="content">
          {this.renderTotal()}
          <NormalDetail />
        </div>
      </div>
    );
  }

  renderHard() {
    return (
      <div className="detail-layout">
        <div className="content">
          {this.renderTotal()}
          <HeadDetail />
        </div>
      </div>
    );
  }

  renderTotal() {
    return (
      <div className="total-block p-l-2">
        <span className="m-l-1 t-1 t-s-20 f-w-b m-r-2"> PREP07#124</span>
        <span className="t-1 t-s-20 f-w-b m-r-2">OG18 - Easy (21-40) </span>
        <span className="t-1">ID:PREP 07-124</span>
        <div className="f-r m-r-1">
          <span className="t-1 m-r-2">
            用时: <span className="t-4">1</span>m <span className="t-4">39</span>s
          </span>
          <span className="t-1 m-r-2">
            全站: <span className="t-4">1</span>m <span className="t-4">39</span>s
          </span>
          <span className="t-1">
            <span className="t-4">80</span>%
          </span>
        </div>
      </div>
    );
  }

  renderNote() {
    return (
      <div className="detail-layout">
        <div className="content">
          <NoteDetail />
        </div>
      </div>
    );
  }
}

class NormalDetail extends Component {
  render() {
    return (
      <div className="detail-item">
        {this.renderQuestion()}
        {this.renderAnswer()}
        {this.renderOfficial()}
        {this.renderConnect()}
        {this.renderAsk()}
      </div>
    );
  }

  renderQuestion() {
    return (
      <div className="detail-item-block">
        <div className="t-1 t-s-16 m-b-2">
          “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>
        {this.renderSelect([{}, {}, {}])}
      </div>
    );
  }

  renderAnswer() {
    return (
      <div className="detail-item-block">
        <div className="title-item">答案</div>
        <div className="t-1 t-s-16 m-b-2">
          <span className="m-r-2">我的答案 B</span>
          <span>正确答案 C</span>
        </div>
        {this.renderNote(
          '题目',
          '从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？',
        )}
      </div>
    );
  }

  renderOfficial() {
    return (
      <div className="detail-item-block">
        <div className="title-item">官方解析</div>
        <div className="t-1 t-s-16 m-b-2">
          A.By whom they were supposedly named is a passive construction that is unnecessarily indirect and wordy,
          especially immediately following another passive construction; the singular its does not agree with the plural
          antecedent the Glass House Mountains. B.This version of the sentence loses the causal connection, failing to
          explain why James Cook gave the mountains their particular name. C.As the object of a preposition and not the
          subject of the clause, James Cook does not work as the noun that the verbal phrase beginning with naming can
          describe; the preposition since loses the important causal logic of the sentence. D.Correct. This concise
          sentence uses active- voice construction in the relative clause and maintains agreement between the pronoun
          their and its antecedent. E The pronoun it does not agree with the plural Mountains and the following pronoun
          their.
        </div>
        {this.renderNote(
          '官方解析',
          '从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？',
        )}
      </div>
    );
  }

  renderConnect() {
    const list = [{}, {}, {}];
    return (
      <div className="detail-item-block">
        <div className="title-item">题源联想</div>
        {list.map(() => {
          return (
            <div className="m-b-2">
              <div className="t-1 t-s-16  m-b-1">
                <span className="t-4 t-s-14 m-r-5">例题 1</span> “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>
              {this.renderSelect([{}, {}, {}])}
            </div>
          );
        })}
        {this.renderNote(
          '题源联想',
          '从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？',
        )}
      </div>
    );
  }

  renderAsk() {
    const list = [{}, {}, {}];
    return (
      <div className="detail-item-block">
        <div className="title-item">相关问答</div>
        {list.map(() => {
          return (
            <div className="m-b-1 b-b p-b-1">
              <div className="ask-tag">提问</div>
              <div className="t-1 t-s-16 m-b-1">
                从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is
                of a kind ….is…结构出现了重大问题？
              </div>
              <div className="ask-tag">回答</div>
              <div className="t-1 t-s-16 m-b-1">
                从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is
                of a kind
                ….is…结构出现了重大问题？从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and
                后面的句子太凌乱is of a kind
                ….is…结构出现了重大问题？从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and
                后面的句子太凌乱is of a kind ….is…结构出现了重大问题？
              </div>
            </div>
          );
        })}
        {this.renderNote(
          '相关问答',
          '从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题？',
        )}
      </div>
    );
  }

  renderSelect(list) {
    return (
      <div className="select-item">
        {list.map(() => {
          return (
            <div className="p-r m-b-2">
              <div className="select-icon p-a" />
              <div className="p-l-2 t-1 t-s-16">
                They are generally not good at taking care of themselves.and services to prevent worsening health and
                increased health costs.
              </div>
            </div>
          );
        })}
      </div>
    );
  }

  renderNote(title, content) {
    return (
      <div className="note-item">
        <div className="t t-1 m-b-1">我的笔记-{title}</div>
        <div className="t-1 t-s-16">{content}</div>
      </div>
    );
  }
}

class HeadDetail extends Component {
  render() {
    return (
      <div className="detail-item">
        {this.renderQuestion()}
        {this.renderDetail()}
        {this.renderChinese()}
      </div>
    );
  }

  renderQuestion() {
    return (
      <div className="detail-item-block">
        <div className="t-1 t-s-16 m-b-2">
          “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 className="hard-body m-b-2">
          <div className="hard-row">
            <div className="label">主语</div>
            <div className="input">
              <HardInput show list={[{ uuid: '1', text: 'The man' }]} answer={[[{ uuid: '1', text: 'The man' }]]} />
            </div>
          </div>
          <div className="hard-row">
            <div className="label">谓语</div>
            <div className="input">
              <HardInput show list={[{ uuid: '1', text: 'led' }]} answer={[[{ uuid: '2', text: 'math' }]]} />
            </div>
          </div>
          <div className="hard-row">
            <div className="label">宾语</div>
            <div className="input">
              <HardInput show list={[{ uuid: '1', text: 'led' }]} answer={[]} />
            </div>
          </div>
        </div>
        <div className="hard-select">
          <div className="t-2 t-s-12 m-b-2">本句存在以下哪种逻辑关系？（可多选）</div>
          <AnswerCheckbox
            show
            list={[
              { value: '1', label: '平行' },
              { value: '2', label: '修饰' },
              { value: '3', label: '转折' },
              { value: '4', label: '比较' },
              { value: '5', label: '因果' },
              { value: '6', label: '递进' },
            ]}
            selected={['4', '6']}
            answer={['4']}
          />
        </div>
      </div>
    );
  }

  renderDetail() {
    return (
      <div className="detail-item-block">
        <div className="title-item">解析详情</div>
        <div className="t-1 t-s-16">
          A.By whom they were supposedly named is a passive construction that is unnecessarily indirect and wordy,
          especially immediately following another passive construction; the singular its does not agree with the plural
          antecedent the Glass House Mountains. B.This version of the sentence loses the causal connection, failing to
          explain why James Cook gave the mountains their particular name. C.As the object of a preposition and not the
          subject of the clause, James Cook does not work as the noun that the verbal phrase beginning with naming can
          describe; the preposition since loses the important causal logic of the sentence. D.Correct. This concise
          sentence uses active- voice construction in the relative clause and maintains agreement between the pronoun
          their and its antecedent. E The pronoun it does not agree with the plural Mountains and the following pronoun
          their.
        </div>
      </div>
    );
  }

  renderChinese() {
    return (
      <div className="detail-item-block">
        <div className="title-item">中文语意</div>
        <div className="t-1 t-s-16">
          A.By whom they were supposedly named is a passive construction that is unnecessarily indirect and wordy,
          especially immediately following another passive construction; the singular its does not agree with the plural
          antecedent the Glass House Mountains. B.This version of the sentence loses the causal connection, failing to
          explain why James Cook gave the mountains their particular name. C.As the object of a preposition and not the
          subject of the clause, James Cook does not work as the noun that the verbal phrase beginning with naming can
          describe; the preposition since loses the important causal logic of the sentence. D.Correct. This concise
          sentence uses active- voice construction in the relative clause and maintains agreement between the pronoun
          their and its antecedent. E The pronoun it does not agree with the plural Mountains and the following pronoun
          their.
        </div>
      </div>
    );
  }
}

class NoteDetail extends Component {
  render() {
    return (
      <div className="detail-item">
        <div className="title-item">
          课时3 短语的用法<div className="f-r t-6 t-s-12 t-r f-w-d">2019-09-02 16:22:56</div>
        </div>

        <div className="t-1 t-s-16">
          GMAT阅读难不一定是长度问题，主要是内容比较晦涩，结构不好把握的文章，千万不要慌张，不要害怕，此时的恐慌会让你整个昏头，不知道自己在读什么，做GMAT阅读题的时候，也许会重读好几遍，不仅慢，正确率也不好。
          遇到这种类型的文章，读第一遍的时候，不要纠结于细节，甚至于不要看细节，挑出主题句和总结句，以及文章中起承转合的词或者句，然后忽略一切变态词汇。读完GMAT阅读之后，保证让自己知道这个文章讲的是个什么事，有可能你并不知道这个事情是什么，即使知道它叫什么也不要紧。然后看题，根据题目，问到什么就回去找什么，找到的东西你可能也不明白是什么。但一般情况下，较难的GMAT阅读文章的题目会相对于简单，甚至有类似送分的白痴题。因此，只要你能找对地方，静下心来，淡定应考，不要害怕，就能做对较难的GMAT阅读。
          遇到这种类型的文章，读第一遍的时候，不要纠结于细节，甚至于不要看细节，挑出主题句和总结句，以及文章中起承转合的词或者句，然后忽略一切变态词汇。读完GMAT阅读之后，保证让自己知道这个文章讲的是个什么事，有可能你并不知道这个事情是什么，即使知道它叫什么也不要紧。然后看题，根据题目，问到什么就回去找什么，找到的东西你可能也不明白是什么。但一般情况下，较难的GMAT阅读文章的题目会相对于简单，甚至有类似送分的白痴题。因此，只要你能找对地方，静下心来，淡定应考，不要害怕，就能做对较难的GMAT阅读。
          遇到这种类型的文章，读第一遍的时候，不要纠结于细节，甚至于不要看细节，挑出主题句和总结句，以及文章中起承转合的词或者句，然后忽略一切变态词汇。读完GMAT阅读之后，保证让自己知道这个文章讲的是个什么事，有可能你并
          遇到这种类型的文章，读第一遍的时候，不要纠结于细节，甚至于不要看细节，挑出主题句和总结句，以及文章中起承转合的词或者句，然后忽略一切变态词汇。读完GMAT阅读之后，保证让自己知道这个文章讲的是个什么事，有可能你并
        </div>
      </div>
    );
  }
}