import React from 'react';
import './index.less';
import { Modal } from 'antd';
// import { Link } from 'react-router-dom';
import Page from '@src/containers/Page';
import { asyncConfirm } from '@src/services/AsyncTools';
import { formatTreeData, formatSeconds, formatDate, formatPercent, getMap } from '@src/services/Tools';
import { AnswerCarousel, Comment } from '../../../components/Other';
import Continue from '../../../components/Continue';
import Step from '../../../components/Step';
import Panel from '../../../components/Panel';
import List from '../../../components/List';
import Tabs from '../../../components/Tabs';
import Module from '../../../components/Module';
import Input from '../../../components/Input';
import Button from '../../../components/Button';
import AnswerButton from '../../../components/AnswerButton';
import Division from '../../../components/Division';
import { Card1 } from '../../../components/Card';
import ListTable from '../../../components/ListTable';
import ProgressText from '../../../components/ProgressText';
import IconButton from '../../../components/IconButton';
import QAList from '../../../components/QAList';
import { Main } from '../../../stores/main';
import { My } from '../../../stores/my';
import { Sentence } from '../../../stores/sentence';
import { Question } from '../../../stores/question';
import { Course } from '../../../stores/course';
import { User } from '../../../stores/user';
import { CourseModuleShow, CourseModule } from '../../../../Constant';
import { Order } from '../../../stores/order';

const SENTENCE = 'sentence';
const PREVIEW = 'preview';
const PREVIEW_COURSE = 'PREVIEW_COURSE';
const PREVIEW_LIST = 'PREVIEW_LIST';

const CourseModuleMap = getMap(CourseModule, 'value', 'label');
const CourseSorted = getMap([{ value: 'sc', sort: 1 }, { value: 'rc', sort: 2 }, { value: 'cr', sort: 3 }], 'value', 'sort');

const exerciseColumns = [{
  title: '练习册',
  width: 250,
  align: 'left',
  render: record => {
    let progress = 0;
    if (record.report) {
      progress = formatPercent(record.report.userNumber, record.report.questionNumber);
    }
    return (
      <div className="table-row">
        <div className="night f-s-16">{record.title}</div>
        <div>
          <ProgressText progress={progress} times={record.paper ? record.paper.times : 0} size="small" />
        </div>
      </div>
    );
  },
}, {
  title: '正确率',
  width: 150,
  align: 'left',
  render: item => {
    return (
      <div className="table-row">
        <div className="night f-s-16 f-w-b">--</div>
        <div className="f-s-12">{formatPercent(item.stat.totalCorrect, item.stat.totalNumber, false)}</div>
      </div>
    );
  },
}, {
  title: '全站用时',
  width: 150,
  align: 'left',
  render: record => {
    let time = '--';
    if (record.paper) {
      time = formatSeconds(record.paper.report.userTime / record.paper.report.userNumber);
    }
    return (
      <div className="table-row">
        <div className="night f-s-16 f-w-b">{time}</div>
        <div className="f-s-12">全站{formatSeconds(record.stat.totalTime / record.stat.totalNumber)}</div>
      </div>
    );
  },
}, {
  title: '最近做题',
  width: 150,
  align: 'left',
  render: (record) => {
    const time = record.report ? record.report.updateTime : record.paper ? record.paper.latestTime : null;
    return (
      <div className="table-row">
        <div>{time && formatDate(time, 'YYYY-MM-DD')}</div>
        <div>{time && formatDate(time, 'HH:mm')}</div>
      </div>
    );
  },
}, {
  title: '操作',
  width: 180,
  align: 'left',
  render: record => {
    return (
      <div className="table-row p-t-1">
        {!record.report && <IconButton type="start" tip="Start" onClick={() => {
          Question.startLink('exercise', record);
        }} />}
        {(record.report && !record.report.isFinish) && <IconButton className="m-r-2" type="continue" tip="Continue" onClick={() => {
          Question.continueLink('exercise', record);
        }} />}
        <IconButton type="restart" tip="Restart" onClick={() => {
          this.restart(record);
        }} />
      </div>
    );
  },
}, {
  title: '报告',
  width: 30,
  align: 'right',
  render: record => {
    return (
      <div className="table-row p-t-1">
        {record.report && record.report.isFinish && <IconButton type="report" tip="Report" onClick={() => {
          Question.reportLink(record);
        }} />}
      </div>
    );
  },
}];

export default class extends Page {
  constructor(props) {
    super(props);
    this.sentenceColums = [{
      title: '练习册',
      width: 250,
      align: 'left',
      render: record => {
        let progress = 0;
        if (record.report) {
          progress = formatPercent(record.report.userNumber, record.report.questionNumber);
        }
        return (
          <div className="table-row">
            <div className="night f-s-16">{record.title}</div>
            <div>
              <ProgressText progress={progress} times={record.paper ? record.paper.times : 0} size="small" />
            </div>
          </div>
        );
      },
    }, {
      title: '正确率',
      width: 150,
      align: 'left',
      render: record => {
        let correct = '--';
        if (record.report) {
          correct = formatPercent(record.report.userCorrect, record.report.userNumber, false);
        }
        return (
          <div className="table-row">
            <div className="night f-s-16 f-w-b">{correct}</div>
            <div className="f-s-12">
              全站{formatPercent(record.stat.totalCorrect, record.stat.totalNumber, false)}
            </div>
          </div>
        );
      },
    }, {
      title: '全站用时',
      width: 150,
      align: 'left',
      render: record => {
        let time = '--';
        if (record.report) {
          time = formatSeconds(record.report.userTime / record.report.userNumber);
        }
        return (
          <div className="table-row">
            <div className="night f-s-16 f-w-b">{time}</div>
            <div className="f-s-12">全站{formatSeconds(record.stat.totalTime / record.stat.totalNumber)}</div>
          </div>
        );
      },
    }, {
      title: '最近做题',
      width: 150,
      align: 'left',
      render: record => {
        const time = record.report ? record.report.updateTime : record.paper ? record.paper.latestTime : null;
        return (
          <div className="table-row">
            <div>{time && formatDate(time, 'YYYY-MM-DD')}</div>
            <div>{time && formatDate(time, 'HH:mm')}</div>
          </div>
        );
      },
    }, {
      title: '操作',
      width: 180,
      align: 'left',
      render: record => {
        return (
          <div className="table-row p-t-1">
            {!record.report && (
              <IconButton
                type="start"
                tip="Start"
                onClick={() => {
                  User.needLogin()
                    .then(() => {
                      Question.startLink('sentence', record);
                    });
                }}
              />
            )}
            {record.report && !record.report.isFinish && (
              <IconButton
                className="m-r-2"
                type="continue"
                tip="Continue"
                onClick={() => {
                  User.needLogin()
                    .then(() => {
                      Question.continueLink('sentence', record);
                    });
                }}
              />
            )}
            {record.report && !!record.report.isFinish && (
              <IconButton
                type="restart"
                tip="Restart"
                onClick={() => {
                  User.needLogin()
                    .then(() => {
                      this.restart(record);
                    });
                }}
              />
            )}
          </div>
        );
      },
    }, {
      title: '报告',
      width: 30,
      align: 'right',
      render: record => {
        return (
          <div className="table-row p-t-1">
            {record.report && record.report.isFinish > 0 && <IconButton type="report" tip="Report" onClick={() => {
              User.needLogin()
                .then(() => {
                  Question.reportLink(record);
                });
            }} />}
          </div>
        );
      },
    }];
  }

  initState() {
    this.code = null;
    this.columns = exerciseColumns;
    this.exerciseProgress = {};
    this.courseProgress = {};
    this.inited = false;
    return {
      tab1: SENTENCE,
      tab2: '',
      tab3: 'faq',
      previewType: PREVIEW_COURSE,
      tabs: [],
      allCourse: [],
      courseProgress: {},
    };
  }

  init() {
    Main.getExercise().then(result => {
      const list = result.map(row => {
        row.title = `${row.titleZh}${row.titleEn}`;
        row.key = row.extend;
        return row;
      });
      const tabs = formatTreeData(list, 'id', 'title', 'parentId');
      // 课程顶级分类
      const courseStructs = result.filter(row => row.isCourse && row.level === 1);
      courseStructs.unshift({ key: '', name: '全部' });
      tabs.push({ key: PREVIEW, name: '预习作业' });
      this.courseStructMap = getMap(courseStructs, 'id', 'title');
      this.setState({
        tabs,
        courseStructs,
        courseTabs: CourseModuleShow.map(row => {
          row.title = row.label;
          row.key = row.value;
          return row;
        }),
      });
      this.inited = true;
      this.refreshData();
    });
    Main.getContract('course')
      .then(result => {
        this.setState({ contract: result });
      });
  }

  initData() {
    const { info = {} } = this.props.user;
    if (info.latestExercise) {
      // 获取最后一次做题记录
      Question.baseReport(info.latestExercise).then(result => {
        this.setState({ latest: result });
      });
    }
    const data = Object.assign(this.state, this.state.search);
    if (!data.tab1) {
      data.tab1 = SENTENCE;
    }
    if (data.recordId) {
      // 作业列表
      data.previewType = PREVIEW_LIST;
    }
    this.setState(data);
    if (this.inited) this.refreshData();
  }

  refreshData(tab) {
    const { tab1 } = this.state;
    switch (tab || tab1) {
      case SENTENCE:
        this.refreshSentence();
        break;
      case PREVIEW:
        this.refreshPreview();
        break;
      default:
        this.refreshExercise(tab || tab1);
    }
  }

  refreshSentence() {
    const { sentence } = this.state;
    if (!sentence) {
      User.clearSentenceTrail();
      Sentence.getInfo()
        .then(result => {
          // result.code = '123123';
          // result.trailPages = 20;
          this.setState({ sentence: result });
          if (result.dataId) {
            Main.listComment({ page: 1, size: 100, channel: 'course_data', position: result.dataId }).then(r => {
              this.setState({ comments: r.list });
            });
          }
          return result;
        })
        .then(({ code, trailPages, chapters }) => {
          return Sentence.listArticle().then(result => {
            const chapterSteps = [];
            const chapterMap = {};
            const map = {};
            const trailArticles = [];
            let totalPage = 0;
            let introduction = null;
            let exerciseChapter = null;
            let index = 0;
            let lastChapter = -1;

            chapters.forEach(row => {
              chapterMap[row.value] = row;
              if (row.exercise) exerciseChapter = row;
            });

            result.forEach(article => {
              if (article.chapter === 0) introduction = article;
              if (!map[article.chapter]) {
                map[article.chapter] = [];
              }
              article.startPage = totalPage + 1;
              article.endPage = totalPage + article.pages;
              if (article.chapter) {
                article.position = `Part ${article.part}`;
              } else {
                // 设置list中的样式
                article.style = 'introduction';
              }
              totalPage += article.pages;
              if (article.startPage < trailPages) {
                if (lastChapter !== article.chapter) {
                  lastChapter = article.chapter;
                  trailArticles.push(Object.assign({ articles: [] }, chapterMap[article.chapter] || {}));
                }
                trailArticles[trailArticles.length - 1].articles.push(article);
              }
              map[article.chapter].push(article);
            });

            if (!code) {
              chapterSteps.push('试用');
            }
            // 添加前言
            if (introduction) {
              chapterSteps.push(`${introduction.title}`);
              chapterMap[0] = {
                title: introduction.title,
                value: 0,
              };
            }
            index += 1;
            chapters.forEach(row => {
              chapterSteps.push(`「${index}」${row.short}`);
              index += 1;
            });
            this.setState({ articleMap: map, trailArticles, chapterSteps, introduction, chapterMap, exerciseChapter });
          });
        })
        .then(() => {
          return Sentence.listPaper().then(result => {
            this.setState({ paperList: result, paperFilterList: result });
          });
        });
      Main.listFaq({ page: 1, size: 100, channel: 'exercise-sentence' }).then(result => {
        this.setState({ faqs: result.list });
      });
    }
  }

  refreshPreview() {
    const { previewType } = this.state;
    switch (previewType) {
      case PREVIEW_LIST:
        this.refreshListPreview();
        break;
      case PREVIEW_COURSE:
      default:
        this.refreshCourseProcess();
        break;
    }
  }

  refreshCourseProcess() {
    const { courseTabs, courseStructs, struct } = this.state;
    let { tab2 } = this.state;
    let tab;
    if (tab2 === '') {
      tab2 = courseTabs[0].key;
      this.setState({ tab2 });
      ([tab] = courseTabs);
    } else {
      ([tab] = courseTabs.filter(row => row.key === tab2));
    }
    const [courseStruct] = courseStructs.filter(row => row.key === struct);
    Course.progress(tab.value, courseStruct ? courseStruct.id : null).then(result => {
      const courseMap = {};
      // 排序：sc，rc，cr
      result = result.map(row => {
        row.sort = CourseSorted[row.course.extend] || 10;
        return row;
      });
      result.sort((a, b) => {
        return a.sort < b.sort ? -1 : (a.sort > b.sort ? 1 : 0);
      });
      const now = new Date().getTime();
      courseMap.open = result.filter(row => !row.isUsed && (!row.useEndTime || new Date(row.useEndTime).getTime() > now));
      courseMap.end = result.filter(row => (!row.isSuspend || (row.isSuspend && row.restoreTime)) && new Date(row.useEndTime).getTime() < now);
      courseMap.process = result.filter(row => row.isUsed && ((!row.isSuspend && new Date(row.useEndTime).getTime() >= now) || (row.isSuspend && !row.restoreTime)));
      this.setState({ courseMap });
    });

    Main.listFaq({ page: 1, size: 100, channel: 'exercise-preview' }).then(result => {
      this.setState({ faqs: result.list });
    });
  }

  refreshListPreview() {
    const { recordId, endTime, finish } = this.state;
    Course.listPreview({ recordId, endTime, finish }).then(result => {
      this.setState({ previews: result.list });
    });
    Course.record(recordId).then(result => {
      this.setState({ record: result });
    });
  }

  refreshExercise(tab) {
    const { tabs, tab1 } = this.state;
    let { tab2 } = this.state;
    if (!tabs) {
      // 等待数据加载
      return;
    }
    const [subject] = tabs.filter(row => row.key === tab);
    // 切换tab1的情况
    if (tab2 === '' || tab1 !== tab) {
      tab2 = subject.children[0].key;
      this.setState({ tab2 });
    }
    const [type] = subject.children.filter(row => row.key === tab2);
    Question.getExerciseProgress(type.id).then(result => {
      // const exerciseProgress = getMap(r, 'id');
      result = result.map(row => {
        row.info = [
          {
            title: '已做',
            number: row.userNumber || '-',
            unit: '题',
          },
          {
            title: '剩余',
            number: row.userNumber ? row.questionNumber - row.userNumber : '-',
            unit: '题',
          },
          {
            title: '总计',
            number: row.questionNumber || 0,
            unit: '题',
          },
        ];
        if (row.userStat) {
          row.correct = formatPercent(row.userStat.userCorrect, row.userStat.userNumber, false);
        } else {
          row.correct = '--';
        }
        row.progress = formatPercent(row.questionNumber - row.userNumber || 0, row.questionNumber);
        row.totalCorrect = formatPercent(row.stat.totalCorrect, row.stat.totalNumber, false);

        row.pieValue = formatPercent(row.userNumber, row.questionNumber);
        row.pieText = formatPercent(row.userNumber, row.questionNumber, false);
        row.pieSubText = `共${row.questionNumber}题`;

        row.children = row.children.map(r => {
          r.title = r.title || r.titleZh;
          r.progress = formatPercent(r.userNumber, r.questionNumber);
          return r;
        });
        return row;
      });
      this.setState({ exerciseProgress: result });
    });
  }

  onChangeTab(level, tab) {
    const { tab1 } = this.state;
    const data = {};
    if (level > 1) {
      data.tab1 = tab1;
      data.tab2 = tab;
    } else {
      data.tab1 = tab;
    }
    // this.refreshData(tab);
    this.refreshQuery(data);
  }

  onChangeCourse(struct) {
    const { tab1, tab2 } = this.state;
    const data = {
      tab1, tab2, struct,
    };
    this.refreshQuery(data);
  }

  onPreviewCourse() {
    const { tab1, tab2, struct } = this.state;
    const data = {
      tab1, tab2, struct,
    };
    this.refreshQuery(data);
  }

  onPreviewList(recordId) {
    const { tab1, tab2, struct } = this.state;
    const data = {
      tab1, tab2, struct, recordId,
    };
    this.refreshQuery(data);
  }

  previewAction(type, item) {
    switch (type) {
      case 'start':
        Question.startLink('preview', item);
        break;
      case 'restart':
        this.restart(item);
        break;
      case 'continue':
        Question.continueLink('preview', item);
        break;
      default:
        break;
    }
  }

  // 开通课程
  open(recordId) {
    Order.useRecord(recordId).then(() => {
      this.refresh();
    });
  }

  restart(item) {
    asyncConfirm('提示', '是否重置', () => {
      Question.restart(item.paper.id).then(() => {
        this.refresh();
      });
    });
  }

  exerciseList(item) {
    User.needLogin().then(() => {
      linkTo(`/exercise/list/${item.id}`);
    });
  }

  activeSentence() {
    User.needLogin().then(() => {
      Sentence.active(this.code)
        .then(() => {
          // 重新获取长难句信息
          User.clearSentenceTrail();
          this.setState({ sentence: null, articleMap: null, paperList: null });
          this.refresh();
        })
        .catch(err => {
          this.setState({ sentenceError: err.message });
        });
    });
  }

  trailSentence() {
    User.needLogin().then(() => {
      User.sentenceTrail();
      this.setState({ sentenceError: null });
    });
  }

  sentenceRead(article) {
    if (article) {
      linkTo(`/sentence/read?chapter=${article.chapter}&part=${article.part}`);
    } else {
      linkTo('/sentence/read');
    }
  }

  sentenceFilter(value) {
    const { paperChecked, paperList } = this.state;
    value = paperChecked === value ? null : value;
    const list = paperList.filter(row => {
      const finish = row.paper ? row.paper.times > 0 : false;
      if (value === 0) {
        return !finish;
      } if (value === 1) {
        return finish;
      }
      return true;
    });
    this.setState({ paperFilterList: list, paperChecked: value });
  }

  clearExercise() {
    My.clearLatestExercise()
      .then(() => {
        const { info } = this.props.user;
        info.latestExercise = 0;
        User.infoHandle(info);
      });
    this.setState({ latest: null });
  }

  renderView() {
    const { tab1, tab2, tabs, latest, sentenceModel, previewType, courseTabs = [] } = this.state;
    const [subject] = tabs.filter(row => row.key === tab1);
    const children = (subject && subject.children) ? subject.children : (tab1 === 'preview' && previewType === PREVIEW_COURSE ? courseTabs : []);
    return (
      <div>
        {latest && (
          <Continue
            data={latest}
            onClose={() => {
              this.clearExercise();
            }}
            onContinue={() => {
              Question.continueLink('exercise', { id: latest.originId, report: latest });
            }}
            onRestart={() => {
              this.restart(latest);
              Question.startLink('exercise', { id: latest.originId, report: latest });
            }}
            onNext={() => {
              Question.continueLink('exercise', { id: latest.originId, report: latest });
            }}
          />
        )}
        <div className="content">
          <Module className="m-t-2">
            <Tabs
              type="card"
              active={tab1}
              tabs={tabs}
              onChange={key => {
                this.onChangeTab(1, key);
              }}
            />
            {children && children.length > 1 && (
              <Tabs active={tab2} tabs={children} onChange={key => this.onChangeTab(2, key)} />
            )}
          </Module>
          {tab1 !== SENTENCE && tab1 !== PREVIEW && this.renderExercise()}
          {tab1 === SENTENCE && this.renderSentence()}
          {tab1 === PREVIEW && this.renderPreview()}

          {tab1 !== SENTENCE && this.state.faqs && <QAList data={this.state.faqs} active={'faq'} tabs={[{ key: 'faq', name: 'FAQs' }]} />}
        </div>
        {tab1 === SENTENCE && this.renderSentenceInfo()}
        {sentenceModel && this.renderInputCodeModel()}
      </div>
    );
  }

  renderPreview() {
    const { previewType } = this.state;
    switch (previewType) {
      case PREVIEW_COURSE:
        return this.renderPreviewCourse();
      case PREVIEW_LIST:
        return this.renderPreviewList();
      default:
        return <div />;
    }
  }

  renderPreviewCourse() {
    const { courseStructs, struct, tab2, courseTabs, courseMap = {}, contract = {} } = this.state;
    return (
      <div className="work-body">
        <div className="work-nav" hidden={courseTabs && courseTabs.length > 0 && tab2 !== courseTabs[0].key}>
          <Tabs
            type="tag"
            active={struct || ''}
            space={5}
            tabs={courseStructs}
            onChange={key => {
              this.onChangeCourse(key);
            }}
          />
        </div>
        <div className="work-nav">
          <div className="left">学习中</div>
        </div>
        <Division col="3">
          {(courseMap.process || []).map(row => {
            return <Card1
              title={`${row.course.title}${row.vsNo > 0 ? `V${row.vsNo}` : ''}${row.number > 0 ? `(${row.number}课时)` : ''}`}
              tag={CourseModuleMap[row.course.courseModule]}
              status={row.isSuspend && !row.restoreTime ? 'stop' : 'ing'}
              list={(row.papers || []).map(r => {
                let progress = 0;
                if (r.report) {
                  progress = formatPercent(r.report.userNumber, r.report.questionNumber);
                }
                r.progress = progress;
                return r;
              })}
              data={row}
              onPreview={() => {
                this.onPreviewList(row.id);
              }}
              previewAction={(type, item) => {
                this.previewAction(type, item);
              }}
            />;
          })}
        </Division>
        <div className="work-nav">
          <div className="left">待开通</div>
        </div>
        <Division col="3">
          {(courseMap.open || []).map(row => {
            return <Card1
              title={`${row.course.title}${row.vsNo > 0 ? `V${row.vsNo}` : ''}${row.number > 0 ? `(${row.number}课时)` : ''}`}
              tag={CourseModuleMap[row.course.courseModule]}
              contract={contract}
              status='open'
              data={row}
              onOpen={() => {
                this.open(row.id);
              }}
            />;
          })}
        </Division>
        <div className="work-nav">
          <div className="left">已结束</div>
        </div>
        <Division col="3">
          {(courseMap.end || []).map(row => {
            return <Card1
              title={`${row.course.title}${row.vsNo > 0 ? `V${row.vsNo}` : ''}${row.number > 0 ? `(${row.number}课时)` : ''}`}
              tag={CourseModuleMap[row.course.courseModule]}
              status='end'
              data={row}
              onPreview={() => {
                this.onPreviewList(row.id);
              }}
            />;
          })}
        </Division>
      </div>
    );
  }

  renderPreviewList() {
    const { previews = [], record = {}, search = {} } = this.state;
    const { finish, endTime } = search;
    let finishTime = '';
    if (endTime) {
      const endTimeD = new Date(endTime);
      const now = new Date();
      if ((now.getTime() + 86400000) > endTimeD.getTime()) {
        finishTime = 'today';
      } else {
        finishTime = 'tomorrow';
      }
    }
    return (
      <div className="work-body">
        <div className="work-nav">
          <div className="left">{`${(record.course || {}).title || ''}${record.vsNo > 0 ? `V${record.vsNo}` : ''}${record.number > 0 ? `(${record.number}课时)` : ''}`}全部作业</div>
          <div className="right theme c-p" onClick={() => this.onPreviewCourse()}>
            我的课程 >
          </div>
        </div>
        <ListTable
          filters={[
            {
              type: 'radio',
              checked: finishTime,
              list: [{ key: 'today', title: '今日需完成' }, { key: 'tomorrow', title: '明日需完成' }],
              onChange: (item) => {
                if (item.key === finishTime) {
                  this.search({ endTime: null });
                } else if (item.key === 'today') {
                  const a = new Date();
                  a.setDate(a.getDate() + 1);
                  a.setHours(0);
                  a.setMinutes(0);
                  a.setMilliseconds(0);
                  a.setSeconds(0);
                  this.search({ endTime: formatDate(a, 'YYYY-MM-DD') });
                } else if (item.key === 'tomorrow') {
                  const a = new Date();
                  a.setDate(a.getDate() + 2);
                  a.setHours(0);
                  a.setMinutes(0);
                  a.setMilliseconds(0);
                  a.setSeconds(0);
                  this.search({ endTime: formatDate(a, 'YYYY-MM-DD') });
                } else {
                  this.search({ endTime: null });
                }
              },
            },
            {
              type: 'radio',
              checked: finish,
              list: [{ key: '0', title: '未完成' }, { key: '1', title: '已完成' }],
              onChange: (item) => {
                if (item.key === finish) {
                  this.search({ finish: null });
                } else if (item.key === '0') {
                  this.search({ finish: '0' });
                } else if (item.key === '1') {
                  this.search({ finish: '1' });
                } else {
                  this.search({ finish: null });
                }
              },
            },
          ]}
          data={previews}
          columns={this.columns}
        />
      </div>
    );
  }

  renderSentence() {
    const { sentence = {} } = this.state;
    const { sentenceTrail } = this.props.user;
    if (sentence.code || sentenceTrail) {
      return this.renderSentenceArticle();
    }
    return this.renderInputCode();
  }

  renderSentenceInfo() {
    const { sentence = {}, tab3, sentenceInfo = {}, faqs = [], comments = [] } = this.state;
    const { sentenceTrail } = this.props.user;
    if (sentence.code || sentenceTrail) {
      return null;
    }
    return <div className='bottom-info'>
      <div className='content'>
        <Tabs active={tab3} space={7.5} type='tag' theme='white' tabs={[{ key: 'faq', title: '千行长难句' }, { key: 'code', title: '关于CODE' }, { key: 'comment', title: '考生评价' }]} onChange={(key) => {
          this.setState({ tab3: key });
        }} />
        {tab3 === 'faq' && <AnswerCarousel
          hideBtn
          list={faqs}
          onFaq={() => User.needLogin().then(() => this.setState({ showFaq: true, faq: { channel: 'exercise-sentence' } }))}
        />}
        {tab3 === 'code' && <div dangerouslySetInnerHTML={{ __html: sentenceInfo.detail }} />}
        {tab3 === 'comment' && (comments || []).map((item) => {
          return <Comment data={item} />;
        })}
      </div>
    </div>;
  }

  renderSentenceArticle() {
    const {
      sentence = {},
      introduction,
      chapterSteps,
      chapterStep = 1,
      exerciseChapter = {},
      chapterMap = {},
      articleMap = {},
      trailArticles = [],
      paperFilterList = [],
      paperList = [],
      paperChecked,
      sentenceInfo = {},
    } = this.state;
    const { sentenceTrail } = this.props.user;
    let maxStep = 0;
    if (sentenceTrail) {
      // 试用只能访问第一step
      maxStep = 1;
      // 查找练习章节
    }
    // 减去前言计算chapter
    const chapter = introduction ? chapterStep - 1 : chapterStep;
    const chapterInfo = chapterMap[chapter] || {};
    let isExercise = false;
    if (chapterInfo && chapterInfo.exercise) {
      isExercise = true;
    }
    return (
      <div>
        {sentence.code && <div className="sentence-code">CODE: {sentence.code}</div>}
        {sentenceTrail && (
          <div className="sentence-code">
            CODE: <a href={sentenceInfo.link} target="_blank">去获取</a>
            <a
              onClick={() => {
                this.setState({ sentenceModel: true });
              }}
            >
              输入
            </a>
          </div>
        )}
        <Module>
          <Step
            list={chapterSteps}
            step={chapterStep}
            onClick={step => {
              this.setState({ chapterStep: step });
            }}
            message="请购买后访问"
            maxStep={maxStep}
          />
        </Module>
        {/* 正常前言 */}
        {sentence.code && chapter === 0 && (
          <List
            // title={chapterInfo.title}
            list={[introduction]}
            onClick={() => {
              this.sentenceRead();
            }}
          />
        )}
        {/* 正常文章 */}
        {sentence.code && chapter > 0 && !isExercise && (
          <List
            position={`Chapter${chapter}`}
            title={chapterInfo.title}
            list={articleMap[chapter]}
            onClick={part => {
              this.sentenceRead(part);
            }}
          />
        )}
        {/* 正常练习 */}
        {sentence.code && isExercise && (
          <ListTable
            position={`Chapter${chapter}`}
            title={chapterInfo.title}
            filters={[
              {
                type: 'radio',
                checked: paperChecked,
                list: [{ key: 0, title: '未完成' }, { key: 1, title: '已完成' }],
                onChange: item => {
                  this.sentenceFilter(item.key);
                },
              },
            ]}
            data={paperFilterList}
            columns={this.sentenceColums}
          />
        )}
        {/* 试读文章 */}
        {sentenceTrail &&
          trailArticles.map(info => {
            return (
              <List
                position={info.value ? `Chapter${info.value}` : null}
                title={info.title}
                list={info.articles}
                onClick={part => {
                  this.sentenceRead(part);
                }}
              />
            );
          })}
        {/* 试练 */}
        {sentenceTrail && (
          <ListTable
            position={`Chapter${exerciseChapter.value}`}
            title={exerciseChapter.title}
            data={paperList}
            columns={this.sentenceColums}
          />
        )}
      </div>
    );
  }

  renderInputCode() {
    const { sentenceError, sentenceInfo = {} } = this.state;
    return (
      <Module className="code-module">
        <div className="title">输入《千行GMAT长难句》专属 Code，解锁在线练习功能。</div>
        <div className="input-block">
          <Input
            size="lager"
            placeholder="请输入CODE"
            onChange={value => {
              this.code = value;
            }}
          />
          <Button
            size="lager"
            onClick={() => {
              this.activeSentence();
            }}
          >
            解锁
          </Button>
          {sentenceError && <div className="error">{sentenceError}</div>}
        </div>
        <div className="tip">
          {/* <Link to="/" className="left link">
            什么是CODE？
          </Link> */}
          <span>没有 CODE？</span>
          <a href={sentenceInfo.link} target="_blank" className="theme">
            去获取 >
          </a>
          <span> 或 </span>
          <a
            onClick={() => {
              this.trailSentence();
            }}
            className="theme"
          >
            试用 >
          </a>
        </div>
      </Module>
    );
  }

  renderInputCodeModel() {
    const { sentenceError } = this.state;
    return (
      <Modal visible closable={false} footer={false} title={false}>
        <div className="code-module-modal">
          <div className="title">请输入CODE</div>
          <div className="desc">
            <Input
              onChange={value => {
                this.code = value;
              }}
            />
            {sentenceError && <div className="error">{sentenceError}</div>}
            {/* <div className="tip">
              <Link to="/" className="right link">
                什么是CODE？
              </Link>
            </div> */}
          </div>
          <div className="btn-list">
            <AnswerButton size="lager" theme="confirm" width={150} onClick={() => this.activeSentence()}>
              确认
            </AnswerButton>
            <AnswerButton
              size="lager"
              theme="cancel"
              width={150}
              onClick={() => this.setState({ sentenceModel: false })}
            >
              取消
            </AnswerButton>
          </div>
        </div>
      </Modal>
    );
  }

  renderExercise() {
    const { exerciseProgress = [] } = this.state;
    return (
      <div>
        <Division col={2}>
          {(exerciseProgress || []).map(struct => {
            const [first] = struct.children;
            let col = 3;
            if (first && first.type === 'paper') {
              col = 5;
            }
            return (
              <Panel
                title={struct.titleEn}
                message={struct.description}
                data={struct}
                col={col}
                onClick={item => {
                  User.needLogin()
                    .then(() => {
                      if (item.type === 'paper') {
                        if (item.progress === 0) {
                          Question.startLink('exercise', item);
                        } else if (item.progress === 100) {
                          Question.startLink('exercise', item);
                        } else {
                          Question.continueLink('exercise', item);
                        }
                      } else {
                        this.exerciseList(item);
                      }
                    });
                }}
              />
            );
          })}
        </Division>
      </div>
    );
  }
}