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']; 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 }); }); } 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 } = this.state; return ( <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">千行GMAR</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]+)(m|min|h|hour|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]+)(m|min|h|hour|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 }} /> {this.renderSelect(question.content.question[0].select)} </div>, this.renderAnswer(), ]; } renderAnswer() { const { data = {} } = this.props; const { question = {}, note = {}, userAnswer = {} } = data; const { answer } = question; return ( <div className="detail-item-block"> <div className="title-item">答案</div> <div className="t-1 t-s-16 m-b-2"> {userAnswer && <span className="m-r-2">我的答案 {AnswerIndex[answer.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.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> ); } }