import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import UserLayout from '../../../layouts/User';
import Tabs from '../../../components/Tabs';
import UserAction from '../../../components/UserAction';
import UserTable from '../../../components/UserTable';
import IconButton from '../../../components/IconButton';
import menu from '../index';

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

export default class extends Page {
  initState() {
    return {
      tab: '1',
      filterMap: {},
      sortMap: {},
      data: [{}, {}],
      selectList: [],
      allChecked: false,
      page: 1,
      total: 1,
    };
  }

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

  onFilter(value) {
    this.setState({ filterMap: value });
  }

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

  renderTable() {
    const { tab, filterMap = {}, sortMap = {}, selectList = [], data = [], 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: '1', title: '练习' },
            { key: '2', title: '模考' },
            { key: '3', title: '错题组卷' },
            { key: '4', title: '收藏组卷' },
          ]}
          onChange={key => this.onChangeTab(key)}
        />
        <UserAction
          search
          selectList={[
            {
              label: '123',
              children: [
                {
                  key: 'one',
                  default: '1',
                  select: [{ title: '123', key: '1' }, { title: '123', key: '2' }, { title: '123', key: '2' }],
                },
                {
                  key: 'two',
                  be: 'one',
                  placeholder: '全部',
                  selectMap: [{ title: '123', key: '1' }, { title: '123', key: '2' }, { title: '123', key: '2' }],
                },
              ],
            },
            {
              label: '123',
              right: true,
              children: [
                {
                  key: 'one',
                  default: '1',
                  select: [{ title: '123', key: '1' }, { title: '123', key: '2' }, { title: '123', key: '2' }],
                },
                {
                  key: 'two',
                  be: 'one',
                  placeholder: '全部',
                  selectMap: [{ title: '123', key: '1' }, { title: '123', key: '2' }, { title: '123', key: '2' }],
                },
              ],
            },
          ]}
          filterMap={filterMap}
          onFilter={value => this.onFilter(value)}
          onChange={key => this.onChangeTab(key)}
        />
        <UserTable
          columns={columns}
          sortMap={sortMap}
          data={data}
          current={page}
          total={total}
          selectList={selectList}
          onSelect={l => this.onSelect(l)}
          onSort={v => this.onSort(v)}
          onChange={p => this.onDataChange(p)}
        />
      </div>
    );
  }
}