<template>
  <div class="text-xs-center" @click="changeStatus">
    <input ref="inp" v-show="inputStatus" v-model="inputText" @blur="changeStatus" class="table_in_input" />
    <span v-show="!inputStatus">{{ item }}</span>
  </div>
</template>

<script>
import helper from "@/services/helper";
export default {
  props: ["item", "header", "rowId"],
  data: () => ({
    inputStatus: false,
    inputText: ""
  }),
  methods: {
    changeStatus() {
      this.inputStatus = !this.inputStatus;
      if (this.inputStatus) {
        // 聚焦事件需要延时
        setTimeout(() => {
          this.$refs.inp.focus();
        }, 100);
        this.inputText = this.item;
      } else {
        this.$emit("changeInputValue", {
          rowId: this.rowId,
          header: this.header,
          inputValue: this.inputText
        });
      }
    }
  }
};
</script>
<style scoped>
.text-xs-center {
  height: 24px;
}
.text-xs-center input {
  width: 100%;
}
.table_in_input {
  text-align: center;
  font-size: 14px;
}
</style>