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