import React from 'react';
import { Link } from 'react-router-dom';
import './index.less';
import Page from '@src/containers/Page';
import UserLayout from '../../../layouts/User';
import UserTable from '../../../components/UserTable';
import UserAction from '../../../components/UserAction';
import Switch from '../../../components/Switch';
import menu from '../index';
import Tabs from '../../../components/Tabs';

const columns = [
  {
    key: 'title',
    title: '笔记对象',
    width: 140,
    render(text, row) {
      return row.group ? (
        <div className="group">
          <Link to="">{text}</Link>
        </div>
      ) : (
        <div className="sub">{text}</div>
      );
    },
  },
  {
    key: 'date',
    title: '更新时间',
    width: 100,
    render(text, row) {
      return row.group ? (
        <div className="group">
          <Link to="">{text}</Link>
        </div>
      ) : (
        <div className="sub">
          <div className="date">{text.split(' ')[0]}</div>
          <div className="date">{text.split(' ')[1]}</div>
        </div>
      );
    },
  },
  {
    key: 'content',
    title: '内容',
    width: 540,
    render(text, row) {
      return row.group ? (
        <div className="group">
          <Link to="">{text}</Link>
        </div>
      ) : (
        <div className="sub">{text}</div>
      );
    },
  },
];

export default class extends Page {
  initState() {
    return {
      filterMap: {},
      sortMap: {},
      data: [
        {
          group: true,
          title: '语法',
          date: ' OG18 #678',
          content: '「图形」None of the attempts to specify the causes of crime explains why most of the p',
          list: [
            {
              title: '题目',
              ask:
                '从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，从比较对象和句子结构我们能把DE排除掉',
              answer:
                '从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，',
            },
            {
              title: '题目',
              ask:
                '从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，从比较对象和句子结构我们能把DE排除掉',
              answer:
                '从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，',
            },
          ],
        },
        {
          group: true,
          title: '语法',
          date: ' OG18 #678',
          content: '「图形」None of the attempts to specify the causes of crime explains why most of the p',
          list: [
            {
              title: '题目',
              ask:
                '从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，从比较对象和句子结构我们能把DE排除掉',
              answer:
                '从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，',
            },
            {
              title: '题目',
              ask:
                '从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，从比较对象和句子结构我们能把DE排除掉',
              answer:
                '从比较对象和句子结构我们能把DE排除掉，D选项中fat和livestock不是比较对象，E选项中and 后面的句子太凌乱is of a kind ….is…结构出现了重大问题，',
            },
          ],
        },
      ],
      selectList: [],
      tab: '1',
      page: 1,
      total: 1,
    };
  }

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

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

  onSort(value) {
    this.setState({ sortMap: value });
  }

  onDataChange(page) {
    this.setState({ page, allChecked: false, selectList: [] });
  }

  onAction() {}

  onSelect(selectList) {
    this.setState({ selectList });
  }

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

  renderTable() {
    const { tab, filterMap = {}, sortMap = {}, data = [] } = 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: '模考' }]}
          onChange={key => this.onTabChange(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,
              select: [{ title: '123', key: '1' }, { title: '123', key: '2' }, { title: '123', key: '2' }],
            },
          ]}
          filterMap={filterMap}
          onFilter={value => this.onFilter(value)}
        />
        <UserAction
          sortList={[{ right: true, label: '提问时间', key: '1' }, { right: true, label: '回答时间', key: '2' }]}
          sortMap={sortMap}
          left={
            <div className="email">
              只看已回答 <Switch />
            </div>
          }
          onSort={value => this.onSort(value)}
        />
        {data.map(item => {
          return (
            <div className="group">
              <UserTable border={false} size="small" columns={columns} data={[item]} header={false} />
              {item.list &&
                item.list.map(_item => {
                  return (
                    <div className="answer-layout">
                      <div className="title">
                        提问区域: <b>{_item.title}</b>
                      </div>
                      <div className="small-tag">提问</div>
                      <div className="desc">{_item.ask}</div>
                      <div className="small-tag">回答</div>
                      <div className="desc">{_item.answer}</div>
                    </div>
                  );
                })}
            </div>
          );
        })}
      </div>
    );
  }
}