<template>
  <el-tooltip v-if="type === 'text' && byteLength > 26" :content="textValue">
    <el-input :class="{'common-input' :type === 'text', append}" :type="type" :value="textValue" disabled v-bind="$attrs">
      <template slot="append" v-if="append">{{append}}</template>
    </el-input>
  </el-tooltip>
  <el-input v-else :class="{'common-input' :type === 'text', append}" :type="type" :value="textValue" disabled v-bind="$attrs">
    <template slot="append" v-if="append">{{append}}</template>
  </el-input>
</template>

<script>
export default {
  props: {
    text: {},
    append: {
      type: String,
    },
    type: {
      type: String,
      default: "text",
    },
  },
  computed: {
    textValue() {
      if (this.text === 0) {
        return 0;
      }
      return this.text || (this.type === "text" ? "-" : "无");
    },
    byteLength() {
      var length = 0;
      Array.from(this.text || "").map(function (char) {
        if (char.charCodeAt(0) > 255) {
          //字符编码大于255，说明是双字节字符
          length += 2;
        } else {
          length++;
        }
      });

      return length;
    },
  },
};
</script>
<style>
.common-text-input,
.common-input > .el-input,
.common-input.el-input > .el-input__inner {
  width: 220px !important;
}
</style>
