sourcecode/front/project/www/components/Examination/index.js

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 => {
          result.stat = result.stat || {};
          if (!result.stat.status) {
            result.stat.status = [];
          }
          if (!result.stat.goal) {
            result.stat.goal = [];
          }
          if (!result.stat.examinationTime) {
            result.stat.examinationTime = [];
          }
          if (!result.stat.scoreTime) {
            result.stat.scoreTime = [];
          }
          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>
    );
  }
}