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

export default class extends Page {
  initState() {
    return {
      list: [[{}, {}, {}], [{}, {}, {}], [{}, {}, {}]],
    };
  }

  renderView() {
    const { list } = this.state;
    return (
      <div>
        <div className="top content t-8">
          题库 > <span className="t-1">浏览记录</span>
        </div>
        <div className="center content">
          {list.map(item => {
            return <DayList list={item} />;
          })}
        </div>
      </div>
    );
  }
}

class DayList extends Component {
  render() {
    const { list = [] } = this.props;
    return (
      <div className="day-list">
        <div className="m-b-1">
          <span className="t-1 t-s-18 m-r-1 f-w-b">2019-03-23</span>
          <span className="c-p t-2 t-s-12">
            <Assets name="ico_24_restart" svg /> 清空记录
          </span>
        </div>
        {list.map(item => {
          return <LogItem data={item} />;
        })}
      </div>
    );
  }
}

class LogItem extends Component {
  render() {
    return (
      <div className="log-item">
        <span className="t-6 m-r-1 tag">阅读SC</span>
        <span className="t-1 m-r-2 f-w-b">OG 19 #678</span>
        <span className="p-l-1 t-2">
          GMAT考试由分析写作、推理、数学和语文四部分组成。分别为： a）分析性写作评价（Analytical Writing Assessment）
        </span>
      </div>
    );
  }
}