import React from 'react';
import './index.less';
import { Tooltip, Popover, Checkbox } from 'antd';
import Page from '@src/containers/Page';
import { timeRange } from '@src/services/Tools';
import Assets from '@src/components/Assets';
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';

export default class extends Page {
  constructor(props) {
    props.size = 10;
    super(props);
    this.columns = [
      { key: 'title', title: '练习册名称', fixSort: true },
      {
        key: 'create_time',
        title: '做题时间',
        fixSort: true,
        render: (text, row, index) => {
          return (
            <div>
              <div className="t-2">
                2019-12-12
                {row.children && (
                  <Popover
                    trigger="click"
                    content={
                      <table className="user-report-history-overlay">
                        <tbody>
                          {row.children.map((child, i) => {
                            return (
                              <tr>
                                <td>{row.children.length - i}</td>
                                <td>2019-12-12 13:13:13</td>
                                <td>3/20</td>
                                <td>
                                  <Checkbox
                                    checked={!child.disabled}
                                    onChange={e => this.onChangeShowHistory(index, i, e.target.checked)}
                                  />
                                </td>
                              </tr>
                            );
                          })}
                        </tbody>
                      </table>
                    }
                  >
                    <Tooltip overlayClassName="gray" title="历史数据">
                      <span>
                        <Assets className="m-l-5" name="down_normal" />
                      </span>
                    </Tooltip>
                  </Popover>
                )}
              </div>
              <div className="t-6">13:13:13</div>
            </div>
          );
        },
      },
      { key: 'correct', title: '正确率', sort: true },
      { key: 'time', title: '平均耗时', sort: true },
      { key: 'progress', title: '完成度' },
      {
        key: 'report',
        title: '报告',
        render() {
          return <IconButton type="report" tip="report" />;
        },
      },
    ];
  }

  initState() {
    return {
      tab: 'exercise',
      timerange: 'today',
      filterMap: {},
      sortMap: {},
      list: [{ children: [{}, {}] }, {}, {}, {}],
      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 });
            });
          });
        });
    }
  }

  onChangeShowHistory(index, childIndex, show) {
    const { list } = this.state;
    list[index].children[childIndex].disabled = !show;
    this.setState({ list });
  }

  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
          even="children"
          columns={this.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>
    );
  }
}