import React from 'react';
import { Link } from 'react-router-dom';
import './index.less';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import { CommentFalls, AnswerCarousel, Consultation, Contact } from '../../../components/Other';
import Footer from '../../../components/Footer';
import Button from '../../../components/Button';
import UserTable from '../../../components/UserTable';
import Tabs from '../../../components/Tabs';
import { TextbookItem } from '../../../components/Item';
import { TwoDate } from '../../../components/Date';

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

  renderView() {
    return (
      <div>
        {this.renderDate()}
        {this.renderLog()}
        {this.renderCompare()}
        {this.renderList()}
        <AnswerCarousel
          hideBtn
          tabActive={'1'}
          tabs={[{ title: '换库知识', key: '1' }, { title: '机经知识', key: '2' }, { title: '千行机经', key: '3' }]}
        />
        <CommentFalls />
        <Consultation />
        <Contact />
        <Footer />
      </div>
    );
  }

  renderDate() {
    return (
      <div className="date-layout">
        <div className="content">
          <div style={{ width: 845 }} className="b f-l">
            <div className="date-info">
              <span className="today">今日</span>
              <span className="type-1">换库</span>
              <span className="type-2">考试日</span>
              <Button size="small" radius>
                我已报考
              </Button>
              <Link to="" className="f-r">
                按年份查看 >
              </Link>
            </div>
            <TwoDate
              getType={date => (date.date() === 1 ? 'type-1' : 'type-2')}
              extendInfo={date => `${date.month()}人`}
              onChange={() => {}}
            />
          </div>
          <div style={{ width: 275 }} className="b f-r p-20">
            <div className="t-13 t-s-16">最近换库</div>
            <Assets name="" />
            <div className="t-13 t-s-32 t-c">2019-07-22</div>
            <div className="t-13 t-c t-s-16">
              已换库 <span className="t-4">10</span> 天
            </div>
            <div className="m-t-2 t-c">
              <Button width={100} radius size="lager">
                我的机经
              </Button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  renderList() {
    const { list } = this.state;
    return (
      <div className="list-layout">
        <div className="content">
          {list.map(item => {
            return <TextbookItem data={item} />;
          })}
        </div>
      </div>
    );
  }

  renderLog() {
    return (
      <div className="table-layout">
        <div className="content">
          <div className="t">
            <span className="d-i-b t-1 t-s-18">更新日志</span>
            <Tabs
              type="text"
              tabs={[{ title: '数学', key: '1' }, { title: '阅读RC', key: '2' }, { title: '逻辑RC', key: '3' }]}
              active="1"
            />
          </div>
          <UserTable
            size="small"
            columns={[
              { title: '更新时间', key: 'date' },
              { title: '版本', key: 'version' },
              { title: '更新内容', key: 'content' },
            ]}
            data={[
              {
                date: '2019-07-12 \n 11:38:51',
                version: '数学机经-版本 7',
                content: '新增 7 道数学机经；补充第 23 题条件；\n 更新第 54题解析和答案',
              },
            ]}
          />
          <Assets name="textbook_banner" />
        </div>
      </div>
    );
  }

  renderCompare() {
    return (
      <div className="compare-layout">
        <div className="t-14 t-c t-s-32 m-b-2">让机经帮上忙，而不是帮倒忙！</div>
        <div className="t-c m-b-2">
          <Button width={100} size="lager" radius className="m-r-2">
            立刻购买
          </Button>
          <Button width={100} size="lager" radius className="m-l-2">
            试用往期
          </Button>
        </div>
        <div className="table">
          <table>
            <thead>
              <tr>
                <th>千行机经</th>
                <th>其他机经</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>整理内容+梳理逻辑结构</td>
                <td>只关注内容</td>
              </tr>
              <tr>
                <td>最新版本自动更新至邮箱</td>
                <td>手动领取</td>
              </tr>
              <tr>
                <td>重视考场一手信息，越准越好</td>
                <td>越多越好</td>
              </tr>
              <tr>
                <td>独家资源，严格把关</td>
                <td>市面资源</td>
              </tr>
              <tr>
                <td>一键反馈，随时沟通</td>
                <td>无售后系统</td>
              </tr>
              <tr>
                <td>下载至本地、在线浏览、在线做题，多种查阅方式</td>
                <td>下载至本地</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}