import React, { Component } from 'react';
import './index.less';
import { Checkbox } from 'antd';
import Page from '@src/containers/Page';
import Modal from '../../../components/Modal';
import HardInput from '../../../components/HardInput';
import AnswerCheckbox from '../../../components/AnswerCheckbox';
import { formatDate, getMap, formatPercent, formatSeconds } from '../../../../../src/services/Tools';
import { My } from '../../../stores/my';
import { User } from '../../../stores/user';

import { SentenceOption } from '../../../../Constant';

const ExportType = [
  { label: '收藏', value: 'question_collect' },
  { label: '错题', value: 'question_error' },
  { label: '笔记', value: 'note_question' },
  { label: '笔记', value: 'note_course' },
];
const ExportTypeMap = getMap(ExportType, 'value', 'label');
const AnswerIndex = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'];
const width = 595;
const height = 1050;
const top = 72;
const left = 93;
const size = 10;
export default class extends Page {
  initState() {
    const { info } = this.props.user;
    return {
      showTip: !info.exportTips,
      nextTips: true,
    };
  }

  initData() {
    const { id } = this.params;
    My.exportDetail(id)
      .then(result => {
        this.setState({ data: result });
        setTimeout(() => {
          const { waters } = result;
          const waterList = [];
          const pageSize = Math.ceil(this.view.offsetHeight / height);
          console.log(pageSize, this.view.offsetHeight);
          for (let i = 0; i < pageSize; i += 1) {
            const a = [top, (height / 2 - top) / 2 - size / 2 + top, height / 2 - size / 2, (height / 2 + (height - top - height / 2) / 2) - size / 2, height - top - size];
            for (let j = 0; j < 5; j += 1) {
              waterList.push({
                style: { left, top: a[j] + height * i, textAlign: 'left' },
                text: waters[0],
              });
              waterList.push({
                style: { left: width / 2, top: a[j] + height * i, textAlign: 'center' },
                text: waters[1],
              });
              waterList.push({
                style: { left: width - left, top: a[j] + height * i, textAlign: 'right' },
                text: waters[0],
              });
            }
          }
          this.setState({ waterList });
        }, 1000);
      });
  }

  closeTips() {
    this.setState({ showTip: false });
    const { nextTips } = this.state;
    if (!nextTips) return;
    My.exportTips()
      .then(() => {
        const { info } = this.props.user;
        info.exportTips = 1;
        User.infoHandle(info);
      });
  }

  renderView() {
    const { data = {}, showTip, nextTips, waterList = [] } = this.state;
    return (
      <div ref={(ref) => {
        if (ref) this.view = ref;
      }}>
        {waterList.map(row => {
          return <div className="water" style={row.style}>{row.text}</div>;
        })}
        {this.renderHead()}
        {data.type !== 'note_course' && this.renderQuestion()}
        {data.type === 'note_course' && this.renderNote()}

        <Modal
          show={showTip}
          title="导出方法"
          onConfirm={() => this.closeTips()}
          confirmText="好的,知道了"
          btnAlign="center"
        >
          <div className="t-2 t-s-18">鼠标右键点击打印后，可直接保存为PDF或打印。</div>
          <div className="t-2 t-s-14"><Checkbox checked={nextTips} onClick={() => this.setState({ nextTips: !nextTips })} />下次进入时不再提醒。</div>
        </Modal>
      </div>
    );
  }

  renderHead() {
    const { data = {} } = this.state;
    const { content = {} } = data;
    const { info } = this.props.user;
    return (
      <div className="head-layout">
        <div className="content p-r">
          <div className="t-1 t-s-30">千行GMAT</div>
          <div className="t-1 t-s-18">
            <span>{info.nickname}</span> <span>ID {info.id}</span>
          </div>
          <div className="t-2 t-s-12">* 请勿外传或商用！</div>
          <div style={{ right: 0, top: 20 }} className="p-a t-r">
            <div className="t-2">第{data.no || 0}次导出{ExportTypeMap[data.type]}</div>
            <div className="t-2">本次导出 {(content.list || []).length} 道 </div>
            <div className="t-2">{formatDate(data.createTime, 'YYYY-MM-DD HH:mm:ss')}</div>
          </div>
        </div>
      </div>
    );
  }

  renderQuestion() {
    const { data } = this.state;
    const { content = {} } = data;
    const { list = [] } = content;
    return (
      <div className="detail-layout">
        <div className="content">
          {list.map(item => {
            return [this.renderTotal(item), item.question.questionType === 'sentence' ? <SentenceDetail data={item} /> : <BaseDetail data={item} />];
          })}
        </div>
      </div>
    );
  }

  renderTotal(item) {
    const { questionNo = {}, userTime, userPaper } = item;
    return (
      <div className="total-block p-l-2">
        <span className="m-l-1 t-1 t-s-20 f-w-b m-r-2"> {questionNo.title}</span>
        {userPaper && <span className="t-1 t-s-20 f-w-b m-r-2">{userPaper.title}</span>}
        <span className="t-1">ID:{questionNo.title}</span>
        <div className="f-r m-r-1">
          {userTime && <span className="t-1 m-r-2">
            用时:
            <span
              dangerouslySetInnerHTML={{
                __html: formatSeconds(userTime).replace(
                  /([0-9]+)(min|m|hour|h|s)/g,
                  '<span class="t-4">$1</span>$2',
                ),
              }}
            />
          </span>}
          <span className="t-1 m-r-2">
            全站:
            <span
              dangerouslySetInnerHTML={{
                __html: formatSeconds(questionNo.totalTime / questionNo.totalNumber).replace(
                  /([0-9]+)(min|m|hour|h|s)/g,
                  '<span class="t-4">$1</span>$2',
                ),
              }}
            />
          </span>
          <span className="t-1">
            <span className="t-4">{formatPercent(item.questionNo.totalCorrect, item.questionNo.totalNumber)}</span>%
          </span>
        </div>
      </div>
    );
  }

  renderNote() {
    const { data } = this.state;
    const { content = {} } = data;
    const { list = [] } = content;
    return (
      <div className="detail-layout">
        <div className="content">
          {list.map(item => {
            return <NoteDetail data={item} />;
          })}
        </div>
      </div>
    );
  }
}

class BaseDetail extends Component {
  render() {
    return (
      <div className="detail-item">
        {this.renderQuestion()}
        {this.renderOfficial()}
        {this.renderQx()}
        {this.renderConnect()}
        {this.renderAsk()}
      </div>
    );
  }

  renderQuestion() {
    const { data = {} } = this.props;
    const { question = {} } = data;
    if (!question.stem) return null;
    return [
      <div className="detail-item-block">
        <div className="t-1 t-s-16 m-b-2" dangerouslySetInnerHTML={{ __html: question.stem }} />
        {question.content.questions.map(q => {
          return [q.description && <div className="t-1 t-s-16 m-b-2" dangerouslySetInnerHTML={{ __html: q.description }} />, this.renderSelect(q.select)];
        })}
      </div>,
      this.renderAnswer(),
    ];
  }

  renderAnswer() {
    const { data = {} } = this.props;
    const { question = {}, note = {}, userAnswer } = data;
    const { answer } = question;
    let a = true;
    if (!answer.questions[0].single) a = false;
    return (
      <div className="detail-item-block">
        {a && <div className="title-item">答案</div>}
        {a && <div className="t-1 t-s-16 m-b-2">
          <span className="m-r-2">我的答案 {userAnswer && AnswerIndex[userAnswer.questions[0].single.indexOf(true)]}</span>
          <span>正确答案 {AnswerIndex[answer.questions[0].single.indexOf(true)]}</span>
        </div>}
        {this.renderNote('题目', note.questionContent)}
      </div>
    );
  }

  renderOfficial() {
    const { data = {} } = this.props;
    const { question = {}, note = {} } = data;
    if (!question.officialContent) return null;
    return (
      <div className="detail-item-block">
        <div className="title-item">官方解析</div>
        <div className="t-1 t-s-16 m-b-2" dangerouslySetInnerHTML={{ __html: question.officialContent }} />
        {this.renderNote('官方解析', note.officialContent)}
      </div>
    );
  }

  renderQx() {
    const { data = {} } = this.props;
    const { question = {}, note = {} } = data;
    if (!question.qxContent) return null;
    return (
      <div className="detail-item-block">
        <div className="title-item">千行解析</div>
        <div className="t-1 t-s-16 m-b-2" dangerouslySetInnerHTML={{ __html: question.qxContent }} />
        {this.renderNote('千行解析', note.qxContent)}
      </div>
    );
  }

  renderConnect() {
    const { data = {} } = this.props;
    const { associations = [], note = {} } = data;
    if (!associations || associations.length === 0) return null;
    return (
      <div className="detail-item-block">
        <div className="title-item">题源联想</div>
        {associations.filter(row => row).map((item, index) => {
          return (
            <div className="m-b-2">
              <div className="t-1 t-s-16  m-b-1">
                <span className="t-4 t-s-14 m-r-5">例题 {index + 1}</span><div dangerouslySetInnerHTML={{ __html: item.stem }} />
              </div>
              {this.renderSelect(item.content.questions[0].select)}
            </div>
          );
        })}
        {this.renderNote('题源联想', note.associationContent)}
      </div>
    );
  }

  renderAsk() {
    const { data = {} } = this.props;
    const { asks = [], note = {} } = data;
    if (!asks || asks.length === 0) return null;
    return (
      <div className="detail-item-block">
        <div className="title-item">相关问答</div>
        {asks.map((item) => {
          return (
            <div className="m-b-1 b-b p-b-1">
              <div className="ask-tag">提问</div>
              <div className="t-1 t-s-16 m-b-1" dangerouslySetInnerHTML={{ __html: item.content }} />
              <div className="ask-tag">回答</div>
              <div className="t-1 t-s-16 m-b-1" dangerouslySetInnerHTML={{ __html: item.answer }} />
            </div>
          );
        })}
        {this.renderNote('相关问答', note.qaContent)}
      </div>
    );
  }

  renderSelect(list) {
    return (
      <div className="select-item">
        {list.map((item) => {
          return (
            <div className="p-r m-b-2">
              <div className="select-icon p-a" />
              <div className="p-l-2 t-1 t-s-16">{item}</div>
            </div>
          );
        })}
      </div>
    );
  }

  renderNote(title, content) {
    if (!content) return null;
    return (
      <div className="note-item">
        <div className="t t-1 m-b-1">我的笔记-{title}</div>
        <div className="t-1 t-s-16">{content}</div>
      </div>
    );
  }
}

class SentenceDetail extends Component {
  render() {
    return (
      <div className="detail-item">
        {this.renderQuestion()}
        {this.renderDetail()}
        {this.renderChinese()}
      </div>
    );
  }

  renderQuestion() {
    const { data = {} } = this.props;
    const { question = {}, userAnswer = {} } = data;
    const { answer = {} } = question;
    return (
      <div className="detail-item-block">
        <div className="t-1 t-s-16 m-b-2" dangerouslySetInnerHTML={{ __html: question.stem }} />
        <div className="hard-body m-b-2">
          <div className="hard-row">
            <div className="label">主语</div>
            <div className="input">
              <HardInput show list={userAnswer.subject || []} answer={answer.subject} />
            </div>
          </div>
          <div className="hard-row">
            <div className="label">谓语</div>
            <div className="input">
              <HardInput show list={userAnswer.predicate || []} answer={answer.predicate} />
            </div>
          </div>
          <div className="hard-row">
            <div className="label">宾语</div>
            <div className="input">
              <HardInput show list={userAnswer.object || []} answer={answer.object} />
            </div>
          </div>
        </div>
        <div className="hard-select">
          <div className="t-2 t-s-12 m-b-2">本句存在以下哪种逻辑关系？（可多选）</div>
          <AnswerCheckbox
            show
            list={SentenceOption}
            selected={userAnswer.options}
            answer={answer.options}
          />
        </div>
      </div>
    );
  }

  renderDetail() {
    const { data = {} } = this.props;
    const { question = {} } = data;
    return (
      <div className="detail-item-block">
        <div className="title-item">解析详情</div>
        <div className="t-1 t-s-16" dangerouslySetInnerHTML={{ __html: question.qxContent }} />
      </div>
    );
  }

  renderChinese() {
    const { data = {} } = this.props;
    const { question = {} } = data;
    return (
      <div className="detail-item-block">
        <div className="title-item">中文语意</div>
        <div className="t-1 t-s-16" dangerouslySetInnerHTML={{ __html: question.chineseContent }} />
      </div>
    );
  }
}

class NoteDetail extends Component {
  render() {
    const { data } = this.props;
    return (
      <div className="detail-item">
        <div className="title-item">
          课时{data.courseNo.no} {data.courseNo.title}<div className="f-r t-6 t-s-12 t-r f-w-d">{formatDate(data.updateTime, 'YYYY-MM-DD HH:mm:ss')}</div>
        </div>

        <div className="t-1 t-s-16">{data.content}</div>
      </div>
    );
  }
}