<template>
  <div class="editable-cell">
    <div v-if="editable" class="editable-cell-input-wrapper">
      <a-input ref="myInput" :value="value" @change="handleChange" @blur="handleBlur" />
    </div>
    <div v-else class="editable-cell-text-wrapper" @dblclick="handleCellClick">
      {{ value || ' ' }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    text: Number,
  },
  watch: {
    text(newValue, oldValue) {
      this.value = newValue
    }
  },
  data() {
    return {
      value: "",
      editable: false,
    }
  },
  methods: {
    handleCellClick() {
      this.editable = true
      this.$nextTick(() => {
        this.$refs.myInput.focus()
      })
    },
    handleChange(e) {
      this.value = e.target.value
    },
    handleBlur() {
      this.editable = false
      this.$emit('change', this.value)
    },
  },
}
</script>

<style lang="less" scoped>
/deep/.ant-input {
  padding: 0;
}
.editable-cell-text-wrapper {
  min-height: 32px;
  line-height: 32px;
}
</style>