import React from 'react';
import { Link } from 'react-router-dom';
import './index.less';
import Page from '@src/containers/Page';
import { timeRange, getMap, formatDate } from '@src/services/Tools';
import UserLayout from '../../../layouts/User';
import Button from '../../../components/Button';
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, AskTarget, QuestionType } from '../../../../Constant';
import { My } from '../../../stores/my';
import { OpenText } from '../../../components/Open';

const AskTargetMap = getMap(AskTarget, 'value', 'label');
const QuestionTypeMap = getMap(QuestionType, 'value', 'label');

const columns = [
  {
    key: 'questionType',
    width: 140,
    render(text, row) {
      return (
        <div className="group">
          <Link
            to={row.userQuestionId ? `/paper/question/${row.userQuestionId}` : `/question/detail/${row.questionNoId}`}
          >
            {QuestionTypeMap[text]}
          </Link>
        </div>
      );
    },
  },
  {
    key: 'title',
    width: 100,
    render(text, row) {
      return (
        <div className="group">
          <Link
            to={row.userQuestionId ? `/paper/question/${row.userQuestionId}` : `/question/detail/${row.questionNoId}`}
          >
            {text}
          </Link>
        </div>
      );
    },
  },
  {
    key: 'content',
    width: 540,
    render(text, row) {
      return (
        <div className="group text-hidden">
          <Link
            to={row.userQuestionId ? `/paper/question/${row.userQuestionId}` : `/question/detail/${row.questionNoId}`}
          >
            {text}
          </Link>
        </div>
      );
    },
  },
];

export default class extends Page {
  constructor(props) {
    props.size = 10;
    super(props);
  }

  initState() {
    return {
      filterMap: {},
      sortMap: {},
      list: [],
      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, questionTypes, 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 => {
          result.list = result.list.map(row => {
            row.group = true;
            row.questionType = row.question.questionType;
            row.title = row.questionNo.title;
            row.content = row.question.description;
            return row;
          });
          this.setState({ list: result.list, total: result.total, page: data.page });
        });
      });
    });
  }

  onTabChange(tab) {
    const data = { tab };
    this.refreshQuery(data);
  }

  onFilter(value) {
    this.search(value, false);
    this.initData();
  }

  onSearch(value) {
    this.search({ page: 1, keyword: value }, false);
    this.initData();
  }

  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 && value[keys[index]] ? keys[index] : null, direction: keys.length ? value[keys[index]] : null }, false);
    this.initData();
  }

  onChangePage(page) {
    this.search({ page }, false);
    this.initData();
  }

  onAction() { }

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

  delAsk(id) {
    My.delQuestionAsk(id).then(() => {
      this.refresh();
    });
  }

  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
          defaultSearch={filterMap.keyword}
          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)}
          onSearch={value => this.onSearch(value)}
        />
        <UserAction
          sortList={[
            { right: true, label: '提问时间', key: 'create_time' },
            { right: true, label: '回答时间', key: 'ask_time' },
          ]}
          sortMap={sortMap}
          left={
            <div className="email">
              只看已回答{' '}
              <Switch
                checked={Number(filterMap.answerStatus)}
                onChange={() => {
                  filterMap.answerStatus = Number(filterMap.answerStatus) ? null : 1;
                  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>{AskTargetMap[item.target]}</b>
                  {item.answerStatus === 0 && (
                    <div className="f-r">
                      <Button radius size="small" onClick={() => this.delAsk(item.id)}>
                        删除
                      </Button>
                    </div>
                  )}
                </div>
                <div>
                  <div className="small-tag">提问</div>
                  <div className="f-r t-2 t-s-12">{formatDate(item.createTime, 'YYYY-MM-DD HH:mm:ss')}</div>
                </div>
                <div className="desc">
                  <OpenText><div dangerouslySetInnerHTML={{ __html: item.content }} /></OpenText>
                </div>
                {item.answerStatus > 0 && (
                  <div>
                    <div className="small-tag">回答</div>
                    <div className="f-r t-2 t-s-12">{formatDate(item.answerTime, 'YYYY-MM-DD HH:mm:ss')}</div>
                  </div>
                )}
                {item.answerStatus > 0 && (
                  <div className="desc">
                    <OpenText><div dangerouslySetInnerHTML={{ __html: item.answerStatus === 2 ? '与题目内容无关，老师无法作出回答，敬请谅解。' : item.answer }} /></OpenText>
                  </div>
                )}
              </div>
            </div>
          );
        })}
        {total > 0 && list.length > 0 && (
          <UserPagination
            total={total}
            pageSize={this.state.search.size}
            current={page}
            onChange={p => this.onChangePage(p)}
          />
        )}
      </div>
    );
  }
}