import React from 'react';
import { Link } from 'react-router-dom';
import './index.less';
import Page from '@src/containers/Page';
import Footer from '../../../components/Footer';
import { Contact } from '../../../components/Other';
import Select from '../../../components/Select';
import UserTable from '../../../components/UserTable';
import { Textbook } from '../../../stores/textbook';
import { Main } from '../../../stores/main';
import { TextbookSubject, TextbookQuality, TextbookType } from '../../../../Constant';
import { getMap, formatDate } from '../../../../../src/services/Tools';

const TextbookSubjectMap = getMap(TextbookSubject, 'value', 'label');
const TextbookQualityMap = getMap(TextbookQuality, 'value', 'label');
const TextbookTypeMap = getMap(TextbookType, 'value', 'label');

export default class extends Page {
  initState() {
    return {
      subject: TextbookSubject[0].value,
      textbookSubject: TextbookSubject.map(row => {
        return {
          title: row.label,
          key: row.value,
        };
      }),
      textbookQuality: TextbookQuality.map(row => {
        return {
          title: row.label,
          key: row.value,
        };
      }),
      textbookType: TextbookType.map(row => {
        return {
          title: row.label,
          key: row.value,
        };
      }),
    };
  }

  init() {
    Main.getBase()
      .then(result => {
        this.setState({ base: result });
      });
    Textbook.getInfo()
      .then(result => {
        if (!result.hasService) {
          linkTo('/textbook');
        }
        this.setState({ data: result });
      });
  }

  initData() {
    const { subject } = this.params;
    const data = Object.assign(this.state, this.state.search);
    if (data.order) {
      data.sortMap = { [data.order]: data.direction };
    }
    data.filterMap = this.state.search;
    this.setState(data);
    Textbook.listTopic(Object.assign({ latest: true, subject, order: 'no', direction: 'desc' }, this.state.search, { isOld: !!this.state.search.month }))
      .then(result => {
        if (this.state.search.page === 1) {
          result.list = result.list.map(row => {
            row.new = '';
            return row;
          });
        }
        this.setState({ list: result.list, total: result.total });
      });
  }

  filter(data) {
    this.search(data);
  }

  changeSubject(subject) {
    linkTo(`/textbook/topic/list/${subject}`);
  }

  renderView() {
    const { subject } = this.params;
    const { base = {}, textbookSubject, textbookQuality, textbookType, keyword, quality, month, data = {}, list = [], page, total } = this.state;
    const { latest = {} } = data;
    return (
      <div>
        <div className="top content t-8">
          机经 > 本期机经 > <span className="t-1">{TextbookSubjectMap[subject]}</span>
          <Select className="f-r m-t-1" size="small" theme="white" value={subject} list={textbookSubject} onChange={({ key }) => this.changeSubject(key)} />
        </div>
        <div className="center content">
          <div className="t-1 t-s-18 m-b-1">
            【{TextbookSubjectMap[subject]}】{latest.startDate && formatDate(latest.startDate, 'MMDD')} 起{TextbookSubjectMap[subject]}机经整理
            <Select className="f-r m-l-1" size="small" theme="default" value={quality} placeholder={'机经质量'} list={textbookQuality} onChange={({ key }) => this.filter({ quality: key })} />
            <Select
              className="f-r m-l-1"
              size="small"
              theme="default"
              value={month}
              list={[{ title: '本月', key: '' }, { title: '考古', key: '1' }]}
              onChange={({ key }) => this.filter({ month: key })}
            />
            {subject === 'quant' && <Select
              className="f-r m-l-1"
              size="small"
              theme="default"
              value={keyword}
              list={textbookType}
              placeholder={'题型'}
              onChange={({ key }) => this.filter({ keyword: key })}
            />}
          </div>
          <UserTable
            size="small"
            data={list}
            current={page}
            pageSize={this.state.search.size}
            total={total}
            jump
            columns={[
              {
                title: '文章编号',
                key: 'no',
                sort: true,
                render: (text) => {
                  return <Link to={`/textbook/topic/detail/${subject}?no=${text}`}>{text}</Link>;
                },
              },
              { title: '关键词', key: 'keyword', render: (text) => (subject === 'quant' ? TextbookTypeMap[text] : text) },
              { title: '机经质量', key: 'quality', render: (text) => TextbookQualityMap[text] || '' },
            ]}
          />
        </div>
        <Contact data={base.contact} />
        <Footer />
      </div>
    );
  }
}