import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import { formatDate, formatSeconds } 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().then(week => {
      this.setState({ week });
    });
  }

  renderView() {
    const { total } = this.state;
    return (
      <div>
        <div className="block">
          <div className="text">
            自{formatDate(total.createTime, 'YYYY-MM-DD')}，您已在千行学习<span>{total.days}</span>天
          </div>
          <div className="text">
            累积<span dangerouslySetInnerHTML={{ __html: formatSeconds(total.time).replace(/([0-9]+)([msh])/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">
              <span>23</span>Hour
            </div>
          </div>
          <div className="item">
            <div className="text">同比上周</div>
            <div className="value">
              <Icon type="caret-up" theme="filled" color="#6EC64B" />
              <span>15</span>%
            </div>
          </div>
          <div className="item">
            <div className="text">同比全站</div>
            <div className="value">
              <Icon type="caret-down" theme="filled" color="#F36565" />
              <span>15</span>%
            </div>
          </div>
        </div>
      </div>
    );
  }
}