import React, { PureComponent } from "react";
import { connect } from "dva";
import styles from "./index.less";

class GoodsBuyIpt extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      val: this.props.num
    };
  }
  numChange(e) {
    e.preventDefault();
    const value = e.target.value == "" ? 0 : e.target.value;
    this.setState({
      val: value
    });
    this.props.onChange(value);
  }
  lessHandle() {
    let { val } = this.state;
    if (val < 1) {
      val = 0;
    } else {
      val--;
    }
    this.setState({
      val: val
    });
    this.props.onChange(val);
  }
  addHandle() {
    let { val } = this.state;
    if (val > 99) {
      val = 99;
    } else {
      val++;
    }
    this.setState({
      val: val
    });
    this.props.onChange(val);
  }
  render() {
    return (
      <div className={styles.goodsBuyIpt}>
        <span className={styles.subBtn} onClick={this.lessHandle.bind(this)}>
          -
        </span>
        <span className={styles.addBtn} onClick={this.addHandle.bind(this)}>
          +
        </span>
        <input
          className={styles.ipt}
          value={this.state.val}
          onChange={this.numChange.bind(this)}
        />
      </div>
    );
  }
}
export default GoodsBuyIpt;
