import React, { Component } from 'react';
import './index.less';
import Page from '@src/containers/Page';
import { formatDate, formatMonth, getMap } from '@src/services/Tools';
import Ratio from '../../../components/Ratio';
import UserAction from '../../../components/UserAction';
import { PrepareStatus, ExperiencePercent } from '../../../../Constant';

const PrepareStatusMap = getMap(PrepareStatus, 'value', 'label');
const ExperiencePercentMap = getMap(ExperiencePercent, 'value', 'label');

export default class extends Page {
  initState() {
    return {
      tab: '1',
      key: '1',
      filterMap: {},
      list: [{}, {}],
    };
  }

  onChangeTab(tab) {
    this.setState({ tab });
  }

  onChangeItem(key) {
    this.setState({ key });
  }

  renderView() {
    return (
      <div>
        <div className="top content t-8">
          千行课堂 > 全部课程 > OG20综合刷题 > 课时3 > <span className="t-1">心经首页</span>
        </div>
        {this.renderDetail()}
      </div>
    );
  }

  renderDetail() {
    const { filterMap, list } = this.state;
    return [
      <div className="center">
        <div className="content">
          <div className="total-list">
            <div className="total-item">
              <div className="title">学员人数</div>
              <div className="label">1231431</div>
            </div>
            <div className="total-item">
              <div className="title">考分分布</div>
              <Ratio
                size="small"
                values={[
                  { color: '#2754E0', label: '750+  36%  3600人', value: 10 },
                  { color: '#41A6F3', label: '750+  36%  3600人', value: 10 },
                  { color: '#9BD4FF', label: '750+  36%  3600人', value: 10 },
                ]}
              />
            </div>
            <div className="total-item">
              <div className="title">出分周期</div>
              <div className="label">35天</div>
            </div>
            <div className="total-item">
              <div className="title">考分分布</div>
              <Ratio
                size="small"
                values={[
                  { color: '#2754E0', label: '750+  36%  3600人', value: 10 },
                  { color: '#41A6F3', label: '750+  36%  3600人', value: 10 },
                  { color: '#9BD4FF', label: '750+  36%  3600人', value: 10 },
                ]}
              />
            </div>
          </div>
          <UserAction
            selectList={[
              {
                children: [
                  {
                    key: 'subject',
                    placeholder: '学科',
                    select: [],
                  },
                  {
                    placeholder: '题型',
                    key: 'questionType',
                    be: 'subject',
                    selectMap: [],
                  },
                ],
              },
              {
                label: '范围',
                children: [
                  {
                    key: 'one',
                    placeholder: '全部',
                    select: [],
                  },
                  {
                    key: 'two',
                    be: 'one',
                    placeholder: '全部',
                    selectMap: [],
                  },
                ],
              },
            ]}
            filterMap={filterMap}
            onFilter={value => this.onFilter(value)}
          />
          {list.map(item => {
            return <Article data={item} onClick={() => {}} onUnCollect={() => this.collectArticle(item, false)} />;
          })}
        </div>
      </div>,
    ];
  }
}

class Article extends Component {
  render() {
    const { data, onClick, onCollect } = this.props;
    return (
      <div className="article-item p-t-2 b-b" onClick={() => onClick && onClick()}>
        <div className="t-1 t-s-14 f-w-b">
          {data.title}
          <div className="f-r t-3 t-s-12 f-w-d">
            <span>{formatDate(data.updateTime, 'YYYY-MM-DD HH:mm:ss')}</span>
            <span className="m-l-2">阅读 {data.viewNumber}</span>
            <span className="m-l-2" onClick={() => onCollect()}>
              收藏
            </span>
          </div>
        </div>
        <div className="t-1 t-s-12 m-b-2">
          <span className="m-r-2">{data.user ? data.user.nickname : data.nickname}</span>
          <span className="m-r-2">{PrepareStatusMap[data.prepareStatus]}</span>
          <span className="m-r-2">备考:{formatMonth(data.experienceDay, false)}</span>
          <span className="m-r-2">
            {data.experienceScore}分 /提分 {ExperiencePercentMap[data.experiencePercent]}
          </span>
        </div>
        <div className="t-2 m-b-2 detail" dangerouslySetInnerHTML={{ __html: data.content }} />
      </div>
    );
  }
}