import React, { Component } from 'react'; import './index.less'; import { Icon } from 'antd'; import { getMap, formatDate, formatPercent } from '@src/services/Tools'; import moment from 'moment'; import { SpecialRadioGroup } from '../Radio'; import Modal from '../Modal'; import Button from '../Button'; import TotalSort from '../TotalSort'; import Date from '../Date'; import Ratio from '../Ratio'; import { My } from '../../stores/my'; import { PrepareStatus, PrepareExaminationTime, PrepareScoreTime } from '../../../Constant'; const PrepareStatusMap = getMap(PrepareStatus, 'value', 'short'); const PrepareExaminationTimeMap = getMap(PrepareExaminationTime, 'value', 'label'); const PrepareScoreTimeMap = getMap(PrepareScoreTime, 'value', 'label'); export default class extends Component { constructor(props) { super(props); this.statusColors = ['#41A6F3', '#3F86EA', '#41A6F3', '#6DC0FF', '#9BD4FF']; this.examinationTimeColors = ['#6865FD', '#322EF2', '#8F65FF', '#8C8AFF']; this.goalColors = ['#2754E0', '#3F86EA', '#41A6F3', '#6DC0FF']; this.scoreTimeColors = ['#6865FD', '#322EF2', '#8F65FF', '#8C8AFF', '#8F65FF', '#C3C1D1']; this.stepProp = { 0: { title: '我的身份', }, 1: { title: '下次考试时间', }, 2: { title: '目标成绩', }, 3: { title: '最晚出分时间(选填)', }, 4: { title: '备考信息', onConfirm: props.onConfirm, onCancel: () => { this.setState({ step: 0 }); }, confirmText: '关闭', cancelText: '修改', }, }; this.state = { step: 0, data: { prepareGoal: 650 } }; } componentWillReceiveProps(nextProps) { if (nextProps.show && !this.init) { this.init = true; My.getPrepare() .then(result => { const statusTotal = result.stat.status.reduce((p, n) => { return p + n.value; }, 0); const goalTotal = result.stat.goal.reduce((p, n) => { return p + n.value; }, 0); const examinationTimeTotal = result.stat.examinationTime.reduce((p, n) => { return p + n.value; }, 0); const scoreTimeTotal = result.stat.scoreTime.reduce((p, n) => { return p + n.value; }, 0); const stat = { status: result.stat.status.map((row, index) => { row.value = formatPercent(row.value, statusTotal); row.label = `${PrepareStatusMap[row.key]}; ${row.value}%`; row.color = this.statusColors[index]; return row; }), goal: result.stat.goal.map((row, index) => { row.value = formatPercent(row.value, goalTotal); row.label = `${row.key}+; ${row.value}%`; row.color = this.goalColors[index]; return row; }), examinationTime: result.stat.status.map((row, index) => { row.value = formatPercent(row.value, examinationTimeTotal); row.label = `${PrepareExaminationTimeMap[row.key]}; ${row.value}%`; row.color = this.examinationTimeColors[index]; return row; }), scoreTime: result.stat.scoreTime.map((row, index) => { row.value = formatPercent(row.value, scoreTimeTotal); row.label = `${PrepareScoreTimeMap[row.key]}; ${row.value}%`; row.color = this.scoreTimeColors[index]; return row; }), }; result.prepareGoal = result.prepareGoal || 650; result.prepareScoreTime = result.prepareScoreTime ? moment(result.prepareScoreTime) : null; this.setState({ data: result, stat, first: !result.prepareStatus, step: !result.prepareStatus ? 0 : 4, info: result.info }); }); } } onChange(type, key) { const { data } = this.state; data[type] = key; this.setState({ data }); } onPrev() { const { step } = this.state; this.setState({ step: step - 1 }); } onNext() { const { step } = this.state; this.setState({ step: step + 1 }); } submitPrepare() { const { data } = this.state; My.editPrepare(data).then(result => { this.setState({ result }); this.onNext(); }); } onClose() { const { onClose } = this.props; if (onClose) onClose(); this.setState({ step: 0 }); } render() { const { step, info } = this.state; const { show } = this.props; return ( <Modal className="examination-modal" show={show} width={460} {...this.stepProp[step]} onClose={() => this.onClose()} > {info && <div className="examination-modal-wrapper">{this[`renderStep${step}`]()}</div>} </Modal> ); } renderStep0() { const { data } = this.state; const { prepareStatus } = data; return ( <div className="step-0-layout"> <SpecialRadioGroup list={PrepareStatus} value={prepareStatus} width={190} space={10} onChange={key => this.onChange('prepareStatus', key)} /> <div className="action-layout"> <div className="next" onClick={() => prepareStatus && this.onNext()}> 下一题 <Icon type="right-circle" theme="filled" /> </div> </div> </div> ); } renderStep1() { const { data } = this.state; const { prepareExaminationTime } = data; return ( <div className="step-1-layout"> <SpecialRadioGroup list={PrepareExaminationTime} value={prepareExaminationTime} width={195} space={10} onChange={key => this.onChange('prepareExaminationTime', key)} /> <div className="action-layout"> <div className="prev" onClick={() => this.onPrev()}> <Icon type="left-circle" theme="filled" /> 上一题 </div> <div className="next" onClick={() => prepareExaminationTime && this.onNext()}> 下一题 <Icon type="right-circle" theme="filled" /> </div> </div> </div> ); } renderStep2() { const { data } = this.state; const { prepareGoal } = data; return ( <div className="step-2-layout"> <TotalSort value={prepareGoal} onChange={goal => { this.onChange('prepareGoal', goal); }} /> <div className="action-layout"> <div className="prev" onClick={() => this.onPrev()}> <Icon type="left-circle" theme="filled" /> 上一题 </div> <div className="next" onClick={() => prepareGoal && this.onNext()}> 下一题 <Icon type="right-circle" theme="filled" /> </div> </div> </div> ); } renderStep3() { const { data, info, step } = this.state; const { prepareScoreTime } = data; return ( <div className="step-3-layout"> {info && <a href={info.link} className="a-l" target='_blank'>{info.title}</a>} <Date show={step === 3} theme="filled" value={prepareScoreTime} onChange={date => { this.onChange('prepareScoreTime', date); }} /> <div className="action-layout"> <div className="prev" onClick={() => this.onPrev()}> <Icon type="left-circle" theme="filled" /> 上一题 </div> <Button size="lager" radius onClick={() => { this.submitPrepare(); }} > 提交 </Button> </div> </div> ); } renderStep4() { const { first, data, stat = {} } = this.state; return ( <div className="step-4-layout"> {first && ( <div className="tip"> <Icon type="check" /> 7天VIP权限已赠送至您的账户。 </div> )} <Ratio text="身份" subtext={PrepareStatusMap[data.prepareStatus]} values={stat.status || []} /> <Ratio text="考试时间" subtext={PrepareExaminationTimeMap[data.prepareExaminationTime]} values={stat.examinationTime || []} /> <Ratio text="目标成绩" subtext={`${data.prepareGoal}分`} values={stat.goal || []} /> <Ratio text="出分日期" subtext={`${formatDate(data.prepareScoreTime, 'YYYY-MM')}`} values={stat.scoreTime || []} /> </div> ); } }