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 } };
    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 });
      });
  }

  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();
      });
  }

  render() {
    const { step } = this.state;
    const { show, onClose } = this.props;
    return (
      <Modal
        className="examination-modal"
        show={show}
        width={460}
        {...this.stepProp[step]}
        onClose={() => onClose && onClose()}
      >
        <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={() => 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={() => 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={() => this.onNext()}>
            下一题
            <Icon type="right-circle" theme="filled" />
          </div>
        </div>
      </div>
    );
  }

  renderStep3() {
    const { data } = this.state;
    const { prepareScoreTime } = data;
    return (
      <div className="step-3-layout">
        <Date
          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>
    );
  }
}