const EditableCell = {
  template: `
      <div style="display:flex;align-items: center;justify-content: center;">
        <span>
        {{punit}} 
        </span>
        <div class="editable-cell-input-wrapper">
          <a-input-number 
          :size="size"
          :min="min" 
          :max="max" 
          :value="value" 
          :precision="precision"
          :step="step"
          @change="handleChange" 
          @pressEnter="check"/>
        </div>
        <a-icon
          type="check"
          slot="suffix"
          :title="editable?'保存':''"
          :style="{color: editable?'#08c':'#666', marginLeft: '5px' }"
          @click="check"
        />
      </div>
    `,
  props: {
    text: Number,
    precision: {
      type: [Number],
      default: 2
    },
    step: {
      type: [Number],
      default: 1
    },
    min: {
      type: [Number],
      default: 0
    },
    max: {
      type: [Number],
      default: 99999999
    },
    size: {
      type: String,
      default: 'default'
    },
    punit: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      value: this.text,
      editable: false,
    };
  },
  watch:{
    text(newVal,oldVal){
      this.value = newVal
    }
  },
  methods: {
    handleChange(value) {
      this.value = value;
      this.editable = true
    },
    check() {
      if(this.editable){
        this.editable = false;
        this.$emit('change', this.value);
      }
    },
  },
};

export default EditableCell