<template>
  <div>
    <el-input-number style="width:150px;"
      v-show="row._edit"  :size="size" :min="min"
      :max="max" :step="step"
      v-model="row[col.prop]" v-on:keyup.native="KeyDownEvent"></el-input-number>
    <span v-show="!row._edit">{{ text }}</span>
  </div>
</template>

<script>
export default {
  props: {
    row: Object,
    col: Object,
    data: Array
    // KeyDownEvent: {
    //   type: Function,
    //   default: function (ev) {
    //   }
    // }
  },
  mounted () {
  },
  directives: {
    focus: {
      inserted: function (el, {value}) {
        el.focus()
      }
    }
  },
  methods: {
    KeyDownEvent (ev) {
      if (ev.code === 'Enter' || ev.code === 'NumpadEnter') {
        const idx = this.data.indexOf(this.row)
        if (idx !== this.data.length - 1) {
          this.$set(this.data[idx], '_edit', false)
          this.$set(this.data[idx + 1], '_edit', true)
        }
      }
    }
  },
  computed: {
    text () {
      return this.row[this.col.prop]
    },
    size () {
      return this.col.cptProperties.size
    },
    min () {
      return this.col.cptProperties.min
    },
    max () {
      return this.col.cptProperties.max
    },
    step () {
      return this.col.cptProperties.step
    }
  }
}
</script>