<template>
  <div class="editable-label">
    <span v-if="!isEdit">{{content}}</span>
    <Input v-model="editContent" autofocus v-else @on-blur="handleComplete" autofocus :style="'width:'+textWidth+'px;'" @on-change="getWidth()"/>
    <p id="test"></p>
  </div>
</template>

<script>
    export default {
    name: 'EditableLabel',
    props: ['content'],
    data() {
      return {
        editContent: '',
        isEdit: false,
        textWidth: 20
      }
    },
    created() {
      // this.content = content;
    },
    methods: {
      getWidth() {
        let dom = document.getElementById('test')
        dom.innerText = this.editContent
        this.textWidth = dom.clientWidth + 25
      },
      handleEdit() {
        this.isEdit = true
        this.editContent = this.content
         let dom = document.getElementById('test')
        dom.innerText = this.editContent
        this.textWidth = dom.clientWidth + 25
      },

      handleComplete() {
        this.isEdit = false
        this.$emit('editComplete', this.editContent)
      }
    }
    }
</script>
<style>
  .editable-label {
    display:inline-block;
    /*width:80%;*/
  }
    #test {
        position: absolute;
        left: 0px;
        top: 0px;
        font-size:18px;
        visibility: hidden;
        border: 1px solid black;
        width: fit-content;
    }
    .editable-label .ivu-input {
      background:#565656;
      border-color:transparent;
      font-size:18px;
      font-weight:bold;
      color:#fff;
      height:23px;
      padding-left:5px;
    }
</style>
