import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import { formatDate, formatSeconds, formatPercent } from '@src/services/Tools';
import Icon from '../../../components/Icon';
import { My } from '../../../stores/my';

export default class extends Page {
  init() { }

  initData() {
    My.getStudyTotal().then(total => {
      this.setState({ total });
    });
    My.getStudyWeek(0).then(latest => {
      const diff = latest.time - latest.avgTime;
      const diffPercent = diff > 0 ? formatPercent(latest.time - latest.avgTime, latest.avgTime, true) : formatPercent(latest.avgTime - latest.time, latest.avgTime, true);
      this.setState({ latest, diff, diffPercent });
      My.getStudyWeek(1).then(last => {
        const diffLast = latest.time - last.time;
        const diffLastPercent = diffLast > 0 ? formatPercent(latest.time - last.time, last.time, true) : formatPercent(last.time - latest.time, last.time, true);
        this.setState({ last, diffLast, diffLastPercent });
      });
    });
  }

  renderView() {
    const { total = {}, latest = {}, diff = 0, diffPercent = 0, diffLast = 0, diffLastPercent = 0 } = this.state;
    return (
      <div>
        <div className="block">
          <div className="text">
            自{total.createTime && formatDate(total.createTime, 'YYYY-MM-DD')}，您已在千行学习<span>{total.days}</span>天
          </div>
          <div className="text">
            累积<span dangerouslySetInnerHTML={{ __html: formatSeconds(total.time).replace(/([0-9]+)(min|m|hour|h|s)/g, '<span class="s">$1</span>$2') }} />
          </div>
        </div>
        <div className="title">本周数据</div>
        <div className="t-c">
          <div className="item">
            <div className="text">学习时间</div>
            <div className="value" dangerouslySetInnerHTML={{ __html: formatSeconds(latest.time).replace(/([0-9]+)(min|m|hour|h|s)/g, '<span>$1</span>$2') }} />
          </div>
          <div className="item">
            <div className="text">同比上周</div>
            <div className="value">
              {diffLast > 0 ? <Icon type="caret-up" theme="filled" color="#6EC64B" /> : <Icon type="caret-down" theme="filled" color="#F36565" />}
              <span>{diffLastPercent}</span>%
            </div>
          </div>
          <div className="item">
            <div className="text">同比全站</div>
            <div className="value">
              {diff > 0 ? <Icon type="caret-up" theme="filled" color="#6EC64B" /> : <Icon type="caret-down" theme="filled" color="#F36565" />}
              <span>{diffPercent}</span>%
            </div>
          </div>
        </div>
      </div>
    );
  }
}