import React from 'react'; import { Breadcrumb } from 'antd'; import './index.less'; import Page from '@src/containers/Page'; import { asyncConfirm } from '@src/services/AsyncTools'; import { formatPercent, formatSeconds, formatDate } from '@src/services/Tools'; import Tabs from '../../../components/Tabs'; import Module from '../../../components/Module'; import ListTable from '../../../components/ListTable'; import ProgressText from '../../../components/ProgressText'; import IconButton from '../../../components/IconButton'; import { Main } from '../../../stores/main'; import { Question } from '../../../stores/question'; import { QuestionDifficult } from '../../../../Constant'; const LOGIC_NO = 'no'; const LOGIC_PLACE = 'place'; const LOGIC_DIFFICULT = 'difficult'; const LOGIC_ERROR = 'error'; export default class extends Page { initState() { this.columns = [{ 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.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> ); }, }]; this.placeList = []; this.inited = false; return { logic: LOGIC_NO, logicExtend: '', logics: [{ key: LOGIC_NO, title: '按顺序练习', }, { key: LOGIC_PLACE, title: '按考点练习', }, { key: LOGIC_DIFFICULT, title: '按难度练习', }, { key: LOGIC_ERROR, title: '按易错度练习', }], }; } init() { const { id } = this.params; Main.getExerciseParent(id).then(result => { const navs = result.map(row => { row.title = row.level > 2 ? row.titleZh : `${row.titleZh}${row.titleEn}`; return row; }); this.inited = true; this.setState({ navs }); }); } initData() { const data = Object.assign(this.state, this.state.search); this.setState(data); this.refreshData(); } refreshData(newLogic) { const { logic } = this.state; let handler = null; switch (newLogic || logic) { case LOGIC_PLACE: handler = this.refreshPlace(); break; case LOGIC_DIFFICULT: handler = this.refreshDifficult(); break; default: handler = Promise.resolve(); } handler.then(() => { this.refreshExercise(); }); } refreshPlace() { const { id } = this.params; let handler; if (this.placeList.length > 0) { this.setState({ logicExtends: this.placeList }); handler = Promise.resolve(); } else { handler = Question.getExercisePlace(id).then(result => { this.placeList = result.map(row => { return { name: row, key: row, }; }); this.setState({ logicExtends: this.placeList }); }); } return handler.then(() => { let { logicExtend } = this.state; if (logicExtend === '') { logicExtend = this.placeList[0].key; this.setState({ logicExtend }); } }); } refreshDifficult() { let { logicExtend } = this.state; this.setState({ logicExtends: QuestionDifficult.map(difficult => { difficult.name = difficult.label; difficult.key = difficult.value; return difficult; }), }); return Promise.resolve().then(() => { if (logicExtend === '') { logicExtend = QuestionDifficult[0].key; this.setState({ logicExtend }); } }); } refreshExercise() { const { logic, logicExtend } = this.state; Question.getExerciseList(Object.assign({ structId: this.params.id, logic, logicExtend }, this.state.search)) .then((result) => { this.setState({ list: result.list, total: result.total }); }); } onChangeTab(key, value) { const { logic } = this.state; const data = {}; if (key === 'logicExtend') { data.logic = logic; data.logicExtend = value; } else { data.logic = value; } // this.refreshData(tab); this.refreshQuery(data); } restart(item) { asyncConfirm('提示', '是否重置', () => { Question.restart(item.paper.id).then(() => { this.refresh(); }); }); } renderView() { const { logic, logicExtend, logics = [], logicExtends = [], list, search, navs } = this.state; const { finish } = search; return ( <div> <div className="content"> <Breadcrumb separator=">"> <Breadcrumb.Item href="/exercise">练习</Breadcrumb.Item> {(navs || []).map(row => { return <Breadcrumb.Item>{row.title}</Breadcrumb.Item>; })} </Breadcrumb> <Module className="m-t-2"> <Tabs active={logic} border width="180px" space="0" tabs={logics} onChange={(key) => { this.onChangeTab('logic', key); }} /> {logicExtends.length > 0 && <Tabs active={logicExtend} type="text" tabs={logicExtends} onChange={(key) => { this.onChangeTab('logicExtend', key); }} />} </Module> <ListTable filters={[ { 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={list} columns={this.columns} /> </div> </div> ); } }