<template>
    <div class="editable-cell">
        <div
                v-if="editable.isEdit"
                class="editable-cell-input-wrapper"
        >
            <span>
                <a-input
                        v-model="value"
                        @change="handleChange1"
                        @pressEnter="check1"
                />
            </span>
            <a-icon
                    style="margin-right: 20px;margin-top:5px;"
                    type="check"
                    class="editable-cell-icon-check"
                    @click="check1"
            />
            <a-icon
                    style="margin-top:5px;"
                    type="close"
                    class="editable-cell-icon-check"
                    @click="close1"
            />
        </div>
        <div
                v-else
                style="height:32px"
                class="editable-cell-text-wrapper"
        >
            <span>{{ text || ' ' | ellipsis(10)}}</span>
            <a-icon
                    style="top: 8px;"
                    type="edit"
                    class="editable-cell-icon"
                    @click="edit1"
            />
        </div>
    </div>
</template>

<script>
  export default {
    name: 'editable-name-cell',
    props: {
      text: String,
      editable: Object,
      record: null
    },
    data () {
      return {
        value: ''
      }
    },
    watch: {
      ['editable.isEdit'] () {
        this.value = this.text
      }
    },
    methods: {
      handleChange1 (e) {
        const value = e.target.value
        this.value = value
      },
      close1 () {
        this.$emit('close', this.record)
      },
      check1 () {
        this.$emit('change', this.value)
      },
      edit1 () {
        this.editable.isEdit = true
      }
    }
  }
</script>

<style scoped>

</style>