import React, { Component } from 'react';
import './index.less';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import { getMap, formatDate } from '@src/services/Tools';

import { QuestionType } from '../../../../Constant';
import { My } from '../../../stores/my';

const QuestionTypeMap = getMap(QuestionType, 'value', 'label');

export default class extends Page {
  initState() {
    this.today = formatDate(new Date(), 'YYYY-MM-DD');
    return {
      list: [],
    };
  }

  initData() {
    My.listSearchHistory()
      .then(result => {
        const map = {};
        const dateList = [];
        result.forEach((row) => {
          const date = formatDate(row.createTime, 'YYYY-MM-DD');
          if (!map[date]) {
            map[date] = { date, list: [] };
            dateList.push(date);
          }
          const item = map[date];
          item.list.push(row);
        });
        const list = dateList.map(row => {
          return map[row];
        });

        this.setState({ list });
      });
  }

  clearHistory(date) {
    My.clearSearchHistory(date)
      .then(() => {
        this.refresh();
      });
  }

  renderView() {
    const { list = [] } = this.state;
    return (
      <div>
        <div className="top content t-8">
          题库 > <span className="t-1">浏览记录</span>
        </div>
        <div className="center content">
          {list.map(item => {
            if (item.date === this.today) item.today = true;
            return <DayList data={item} onClear={() => this.clearHistory(item.date)} />;
          })}
        </div>
      </div>
    );
  }
}

class DayList extends Component {
  render() {
    const { data = {}, onClear } = this.props;
    return (
      <div className="day-list">
        <div className="m-b-1">
          <span className="t-1 t-s-18 m-r-1 f-w-b">{data.today ? '今天' : data.date}</span>
          <span className="c-p t-2 t-s-12" onClick={() => onClear()}>
            <Assets name="ico_24_restart" svg /> 清空记录
          </span>
        </div>
        {data.list.map(item => {
          return <LogItem data={item} onClick={() => { }} />;
        })}
      </div>
    );
  }
}

class LogItem extends Component {
  render() {
    const { data, onClick } = this.props;
    return (
      <div className="log-item">
        <span className="t-6 m-r-1 tag">{QuestionTypeMap[data.question.questionType]}</span>
        <a className="t-1 m-r-2 f-w-b" href={`/question/detail/${data.questionNo.id}`} target="_blank" onClick={() => onClick()}>{data.questionNo.title}</a>
        <span className="p-l-1 t-2">{data.question.description}</span>
      </div>
    );
  }
}