import PropTypes from '../../_util/vue-types';
import { generateData, calcTotal } from './util';

const Gen = {
  props: {
    x: PropTypes.number.def(20),
    y: PropTypes.number.def(18),
    z: PropTypes.number.def(1),
  },
  data() {
    return {
      nums: '',
    };
  },

  mounted() {
    this.$refs.x.value = this.x;
    this.$refs.y.value = this.y;
    this.$refs.z.value = this.z;
    const vals = this.getVals();
    this.$emit('gen', generateData(vals.x, vals.y, vals.z));
  },
  methods: {
    onGen(e) {
      e.preventDefault();
      const vals = this.getVals();
      this.$emit('gen', generateData(vals.x, vals.y, vals.z));
      this.nums = calcTotal(vals.x, vals.y, vals.z);
    },
    getVals() {
      return {
        x: parseInt(this.$refs.x.value, 10),
        y: parseInt(this.$refs.y.value, 10),
        z: parseInt(this.$refs.z.value, 10),
      };
    },
  },

  render() {
    const { x, y, z } = this;
    return (
      <div style={{ padding: '0 20px' }}>
        <h2>big data generator</h2>
        <form onSubmit={this.onGen}>
          <span style={{ marginRight: '10px' }}>
            x: <input ref="x" type="number" min="1" required style={{ width: '50px' }} />
          </span>
          <span style={{ marginRight: '10px' }}>
            y: <input ref="y" type="number" min="1" required style={{ width: '50px' }} />
          </span>
          <span style={{ marginRight: '10px' }}>
            z: <input ref="z" type="number" min="1" required style={{ width: '50px' }} />
          </span>
          <button type="submit">Generate</button>
          <p>total nodes: {this.nums || calcTotal(x, y, z)}</p>
        </form>
        <p style={{ fontSize: '12px' }}>
          x：每一级下的节点总数。y：每级节点里有y个节点、存在子节点。z：树的level层级数（0表示一级）
        </p>
      </div>
    );
  },
};

export default Gen;