import React, { Component } from 'react';
import './index.less';
import { Icon } from 'antd';
import { Main } from '../../stores/main';

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = { quant: 50 };
    this.time = 0;
    this.compute(props.value, 50);
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.value !== nextProps.value) {
      this.compute(nextProps.value, this.state.quant || 50);
    }
  }

  compute(value, quant) {
    if (value === this.props.value && quant === this.state.quant) return;
    console.log(quant);
    this.time += 1;
    const number = this.time;
    this.setState({ quant });
    Main.getScore(value, quant)
      .then(result => {
        if (number !== this.time) return;
        this.setState({ data: result });
      })
      .catch(() => {

      });
  }

  render() {
    const { value, onChange } = this.props;
    const { data = {} } = this.state;
    return (
      <div className="total-sort">
        <div className="total-sort-num">
          <Icon className="minus" type="minus" onClick={() => {
            onChange(Math.max(value - 10, 200));
          }} />
          <input value={value} />
          <Icon className="plus" type="plus" onClick={() => {
            onChange(Math.min(value + 10, 800));
          }} />
        </div>
        <div className="total-sort-desc">
          预计全球排名<b>{data.totalRank || 0}th</b>
        </div>
        <div className="total-sort-list">
          <div className="item">
            <div className="sort-num">
              <div className="sort-text">Quant :</div>
              <input value={this.state.quant} />
              <Icon className="up" type="caret-up" onClick={() => {
                this.compute(value, Math.min(this.state.quant + 1, 51));
              }} />
              <Icon className="down" type="caret-down" onClick={() => {
                this.compute(value, Math.max(this.state.quant - 1, 6));
              }} />
            </div>
            <div className="t2">
              排名<b>{data.quantRank || 0}th</b>
            </div>
          </div>
          <div className="item">
            <div className="sort-num">
              <div className="sort-text">Verbal :</div>
              <input value={data.verbalScore} />
              {/* <Icon className="up" type="caret-up" />
              <Icon className="down" type="caret-down" /> */}
            </div>
            <div className="t2">
              排名<b>{data.verbalRank || 0}th</b>
            </div>
          </div>
        </div>
      </div>
    );
  }
}