import React from 'react';
import './index.less';
import { Icon } from 'antd';
import Page from '@src/containers/Page';
import UserLayout from '../../../layouts/User';
import UserTable from '../../../components/UserTable';
import UserFilter from '../../../components/UserFilter';
import UserAction from '../../../components/UserAction';
import menu from '../index';
import Tabs from '../../../components/Tabs';

const columns = [
  { key: '', title: '题型' },
  { key: '', title: '题目ID' },
  { key: '', title: '内容' },
  { key: '', title: '耗时' },
  { key: '', title: '错误率' },
  { key: '', title: '最近做题' },
  { key: '', title: '' },
];

export default class extends Page {
  initState() {
    return {
      filterMap: {},
    };
  }

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

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

  renderTable() {
    const { filterMap = {} } = this.state;
    return (
      <div className="table-layout">
        <Tabs
          type="division"
          theme="theme"
          size="small"
          space={2.5}
          width={100}
          active={'1'}
          tabs={[{ key: '1', title: '练习' }, { key: '2', title: '模考' }]}
        />
        <UserFilter
          search
          data={[
            {
              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' }],
                },
              ],
            },
          ]}
          filterMap={filterMap}
          onFilter={value => this.onFilter(value)}
        />
        <UserAction
          allCheckbox
          help
          btnList={[
            { title: '移除', key: 'remove' },
            { title: '组卷', key: 'group', vip: true },
            { title: '导出', key: 'export', vip: true },
          ]}
          right={
            <div className="tip">
              2019-06-03 15：30 组卷50题，做对30题。<span>移除正确题目</span>
              <Icon type="close-circle" theme="filled" />
            </div>
          }
        />
        <UserTable select columns={columns} data={[{}]} />
      </div>
    );
  }
}