import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import { formatDate } from '@src/services/Tools';
import UserAction from '../../../components/UserAction';
import UserPagination from '../../../components/UserPagination';
import Tabs from '../../../components/Tabs';
import { OpenText } from '../../../components/Open';
import { Button } from '../../../components/Button';

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

  initState() {
    return {
      filterMap: {},
      list: [],
      tab: '1',
    };
  }

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

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

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

  onAction() {}

  delAsk(id) {
    console.log(id);
  }

  renderView() {
    const {
      tab,
      questionSubjectSelect,
      questionSubjectMap = {},
      oneSelect,
      twoSelectMap = {},
      filterMap = {},
      list = [],
    } = this.state;
    const { total, page } = this.state;
    return (
      <div>
        <div className="top content t-8">
          千行课堂 > 全部课程 > OG20综合刷题 > 课时3 > <span className="t-1">全部问答</span>
          <div className="f-r">返回课程</div>
        </div>
        <div className="center content">
          <div className="t-1 t-s-20 m-b-2">OG20综合刷题——第3课时:XXXXXXX</div>
          <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
            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,
                  },
                ],
              },
            ]}
            filterMap={filterMap}
            onFilter={value => this.onFilter(value)}
            onSearch={value => this.onSearch(value)}
          />
          {list.map(item => {
            return (
              <div className="answer-layout">
                <div className="t-2">课时1 01:00~05:00</div>
                <div className="t-2">课程内容: 单词 avoid 的使用场景应该出现在这些地方</div>
                {item.answerStatus === 0 && (
                  <div className="f-r">
                    <Button radius size="small" onClick={() => this.delAsk(item.id)}>
                      删除
                    </Button>
                  </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>{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>{item.answer}</OpenText>
                  </div>
                )}
              </div>
            );
          })}
          {total > 0 && list.length > 0 && (
            <UserPagination
              total={total}
              pageSize={this.state.search.size}
              current={page}
              onChange={p => this.onChangePage(p)}
            />
          )}
        </div>
      </div>
    );
  }
}