import React from 'react';
import { Link } from 'react-router-dom';
import './index.less';
import Page from '@src/containers/Page';
import { timeRange } from '@src/services/Tools';
import UserLayout from '../../../layouts/User';
import UserTable from '../../../components/UserTable';
import UserAction from '../../../components/UserAction';
import UserPagination from '../../../components/UserPagination';
import Switch from '../../../components/Switch';
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: '笔记对象',
  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 {
  constructor(props) {
    props.size = 10;
    super(props);
  }

  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: 'exercise',
      timerange: 'today',
    };
  }

  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);
    refreshQuestionType(this, data.subject, data.questionType, { all: true, needSentence: false, allSubject: true })
      .then(({ questionTypes }) => {
        return refreshStruct(this, data.tab, data.one, data.two, {
          all: true, needPreview: false, needTextbook: true,
        })
          .then(({ structIds, latest, year }) => {
            My.listQuestionAsk(Object.assign({ module: data.tab, questionTypes, structIds, latest, year, 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 });
  }

  onAction() { }

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

  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 { total, page } = 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: '模考' }]}
          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)}
        />
        <UserAction
          sortList={[{ right: true, label: '提问时间', key: 'create_time' }, { right: true, label: '回答时间', key: 'ask_time' }]}
          sortMap={sortMap}
          left={
            <div className="email">
              只看已回答 <Switch checked={filterMap.askStatus} onChange={() => {
              filterMap.askStatus = !filterMap.askStatus;
              this.onFilter(filterMap);
            }} />
            </div>
          }
          onSort={value => this.onSort(value)}
        />
        {list.map(item => {
          return (
            <div className="group">
              <UserTable border={false} size="small" columns={columns} data={[item]} header={false} />
              <div className="answer-layout">
                <div className="title">
                  提问区域: <b>{item.target}</b>
                </div>
                <div className="small-tag">提问</div>
                <div className="desc">{item.content}</div>
                <div className="small-tag">回答</div>
                <div className="desc">{item.answer}</div>
              </div>
            </div>
          );
        })}
        {total && list.length > 0 && <UserPagination total={total} current={page} onChange={(p) => this.onChangePage(p)} />}
      </div>
    );
  }
}