import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import { timeRange } from '@src/services/Tools';
import UserLayout from '../../../layouts/User';
import UserAction from '../../../components/UserAction';
import UserTable from '../../../components/UserTable';
import IconButton from '../../../components/IconButton';
import menu, { refreshQuestionType, refreshStruct } from '../index';
import Tabs from '../../../components/Tabs';
import { TimeRange } from '../../../../Constant';
import { My } from '../../../stores/my';

const columns = [
  { key: 'title', title: '练习册名称', fixSort: true },
  { key: 'create_time', title: '做题时间', fixSort: true },
  { key: 'correct', title: '正确率', sort: true },
  { key: 'time', title: '平均耗时', sort: true },
  { key: 'progress', title: '完成度' },
  {
    key: 'report',
    title: '报告',
    render() {
      return <IconButton type="report" tip="report" />;
    },
  },
];

export default class extends Page {
  constructor(props) {
    props.size = 10;
    super(props);
  }

  initState() {
    return {
      tab: 'exercise',
      timerange: 'today',
      filterMap: {},
      sortMap: {},
      data: [{}, {}],
      selectList: [],
      allChecked: false,
    };
  }

  initData() {
    const data = Object.assign(this.state, this.state.search);
    data.filterMap = this.state.search;
    if (data.order) {
      data.sortMap = { [data.order]: data.direction };
    }
    if (data.timerange) {
      data.filterMap.timerange = data.timerange;
    }
    const [startTime, endTime] = timeRange(data.timerange);
    switch (data.tab) {
      case 'error':
      case 'collect':
        My.listReport(Object.assign({ origin: data.tab, startTime, endTime }, this.state.search, {
          order: Object.keys(data.sortMap).map(key => {
            return `${key} ${data.sortMap[key]}`;
          }).join(','),
        })).then(result => {
          this.setState({ list: result.list, total: result.total, page: data.page });
        });
        break;
      case 'exercise':
      case 'examination':
      default:
        refreshQuestionType(this, data.subject, data.questionType, { all: true, needSentence: true, allSubject: true })
          .then(({ questionTypes, courseModules }) => {
            return refreshStruct(this, data.tab, data.one, data.two, {
              all: true, needPreview: true, needTextbook: true,
            })
              .then(({ structIds, latest, year }) => {
                My.listReport(Object.assign({ module: data.tab, questionTypes, structIds, latest, year, courseModules, startTime, endTime }, this.state.search, {
                  order: Object.keys(data.sortMap).map(key => {
                    return `${key} ${data.sortMap[key]}`;
                  }).join(','),
                })).then(result => {
                  this.setState({ list: result.list, total: result.total, page: data.page });
                });
              });
          });
    }
  }

  onTabChange(tab) {
    const data = { tab };
    this.refreshQuery(data);
  }

  onFilter(value) {
    this.search(value);
  }

  onSort(value) {
    const keys = Object.keys(value);
    // this.search({ order: keys.length ? keys.join('|') : null, direction: keys.length ? Object.values(value).join('|') : null });
    const { sortMap } = this.state;
    const index = keys.length > 1 && sortMap[keys[0]] ? 1 : 0;
    this.search({ order: keys.length ? keys[index] : null, direction: keys.length ? value[keys[index]] : null });
  }

  onChangePage(page) {
    this.search({ page });
  }

  renderView() {
    const { config } = this.props;
    return <UserLayout active={config.key} menu={menu} center={this.renderTable()} />;
  }

  renderTable() {
    const { tab, questionSubjectSelect, questionSubjectMap = {}, oneSelect, twoSelectMap = {}, filterMap = {}, sortMap = {}, list = [] } = this.state;
    const { selectList = [], page, total } = this.state;
    return (
      <div className="table-layout">
        <Tabs
          border
          type="division"
          theme="theme"
          size="small"
          space={2.5}
          width={100}
          active={tab}
          tabs={[{ key: 'exercise', title: '练习' }, { key: 'examination', title: '模考' }, { key: 'error', title: '错误组卷' }, { key: 'collect', title: '收藏组卷' }]}
          onChange={key => this.onTabChange(key)}
        />
        <UserAction
          search
          selectList={[{
            children: [{
              key: 'subject',
              placeholder: '学科',
              select: questionSubjectSelect,
            }, {
              placeholder: '题型',
              key: 'questionType',
              be: 'subject',
              selectMap: questionSubjectMap,
            }],
          }, {
            label: '范围',
            children: [{
              key: 'one',
              placeholder: '全部',
              select: oneSelect,
            }, {
              key: 'two',
              be: 'one',
              placeholder: '全部',
              selectMap: twoSelectMap,
            }],
          }, {
            right: true,
            key: 'timerange',
            select: TimeRange,
          }]}
          filterMap={filterMap}
          onFilter={value => this.onFilter(value)}
          onChange={key => this.onChangeTab(key)}
        />
        <UserTable
          columns={columns}
          sortMap={sortMap}
          data={list}
          current={page}
          total={total}
          selectList={selectList}
          onSelect={l => this.onSelect(l)}
          onSort={v => this.onSort(v)}
          onChange={p => this.onChangePage(p)}
        />
      </div>
    );
  }
}