<template>
  <div>
    <template class="input" v-if="row._edit"> 
    <input class="input__inner"
       type="text" icon="close" :on-icon-click="function(){row[col.prop] = ''}"
      v-model="row[col.prop]" @keypress="KeyDownEvent($event)" v-focus="col.isFocus"></input>
      </template>
    <span v-if="!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}) {
        if (value) {
          el.focus()
        }
      }
    }
  },
  methods: {
    KeyDownEvent (ev) {
      if (this.col.eventKey) {
        if (this.col.eventKey(ev, this.row)) {
          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)
            } else {
              this.$set(this.data[idx], '_edit', false)
            }
          }
        }
      } else {
        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)
          } else {
            this.$set(this.data[idx], '_edit', false)
          }
        }
      }
    }
  },
  computed: {
    text () {
      return this.row[this.col.prop]
    },
    focusStatus () {
      if (this.row._edit) {
        return this.col.isFocus
      }
      return false
    }
  }
}
</script>
<style>
@import './tableInput.css';
</style>