<template>
  <div>
    <div v-if="t" class="div-cls2" @click="divFun">{{ newValue }}</div>
    <el-input
      v-else
      ref="inputRef"
      :value="_value"
      class="input-cls"
      @blur="bindBlur"
      @input="bindInput"
    />
  </div>
</template>

<script>
// import {validNumber} from '@/utils/validate'
export default {
  name: 'TextTransformInput',
  props: {
    newValue: {
      type: [String, Number],
      default: ''
    },
    disable: {
      type: [Boolean],
      default: false
    },
    inputType: {
      type: String,
      default: 'Normal'
    },
    setData: {
      type: Function,
      default: () => { }
    }
  },
  data() {
    return {
      t: true
    }
  },
  computed: {
    _value: {
      get() {
        return this.newValue
      }
    }
  },
  mounted() {
    // console.log(this.setData)
  },
  methods: {
    divFun() {
      if (this.disable) return
      this.t = false
      this.$nextTick(() => {
        this.$refs.inputRef.focus()
      })
    },
    bindBlur() {
      if (this.disable) return
      this.t = true
    },
    bindInput(v) {
      this.setData(v)
    }
  }
}
</script>
<style lang="scss" scoped>
.div-cls2 {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 25px;
  line-height: 25px;
}
</style>
