import React from 'react';
import './index.less';
import { Tabs } from 'antd-mobile';
import Page from '@src/containers/Page';
import { formatDate } from '@src/services/Tools';
import Button from '../../../components/Button';
import { Textbook } from '../../../stores/textbook';
import { TextbookSubject } from '../../../../Constant';

const TextbookSubjectTabs = TextbookSubject.map(row => {
  return {
    title: row.label,
    key: row.value,
  };
});
export default class extends Page {
  initState() {
    return {
      tab: TextbookSubjectTabs[0],
      day: 0,
    };
  }

  initData() {
    Textbook.getInfo()
      .then(result => {
        result.day = parseInt((new Date().getTime() - new Date(result.latest.startDate).getTime()) / 86400000, 10);
        this.setState(result);
      });
    this.refreshTab(this.state.tab);
  }

  refreshTab(tab) {
    this.setState({ tab });
    Textbook.allHistory(tab.key).then(result => {
      result = result.map(row => {
        row.version = row[`${tab.key}Version`];
        row.content = row[`${tab.key}Content`];
        row.createTime = formatDate(row.createTime, 'YYYY-MM-DD HH:mm:ss');
        return row;
      });
      this.setState({ list: result });
    });
  }

  renderView() {
    const { latest = {}, hasService, tab, day } = this.state;
    return (
      <div>
        <div className="tip">最近换库时间：{latest.startDate ? formatDate(latest.startDate, 'YYYY-MM-DD') : ''}，已换库{day}天。</div>
        <Tabs page={tab.key} tabs={TextbookSubjectTabs} onChange={(v) => {
          this.refreshTab(v);
        }} />
        <div>{hasService ? this.renderList() : this.renderEmpty()}</div>
        <div className="fixed">
          <Button block disabled={!hasService} size="lager" onClick={() => {
            linkTo(`/textbook/detail/${tab.key}`);
          }}>
            查阅机经
          </Button>
        </div>
      </div>
    );
  }

  renderList() {
    const { list = [] } = this.state;
    return (
      <div className="list">
        <div className="log-title">更新日志</div>
        {list.map(row => {
          return <div className="item">
            <div className="title">
              版本{row.version}<span className="date">{row.createTime}</span>
            </div>
            <div className="desc" >{row.content}</div>
          </div>;
        })}

      </div>
    );
  }

  renderEmpty() {
    const { unUseRecord } = this.state;
    if (unUseRecord) {
      return <div className="empty">
        <div className="text">
          还未开通本月机经。 <br />
          您可至千行网站「我的-工具」查看往期机经。
      </div>
        <Button block width={120} radius onClick={() => {
          linkTo(`/open/${unUseRecord.id}`);
        }}>
          去开通
      </Button>
      </div>;
    }
    return (
      <div className="empty">
        <div className="text">
          还未购买本月机经。 <br />
          您可至千行网站「我的-工具」查看往期机经。
        </div>
        <Button block width={120} radius onClick={() => {
          linkTo('/product/service/textbook');
        }}>
          去购买
        </Button>
      </div>
    );
  }
}