<template>
  <div>
    <el-tooltip v-if="content.length > length" class="item" effect="dark" placement="top-start">
      <div slot="content">
        <div v-for="(item, index) in clipStr(content)" :key="index">
          <div>{{ item }}</div>
        </div>
      </div>
      <div>
        {{ content.length > length ? `${content.substring(0, this.length)}...` : content }}
      </div>
    </el-tooltip>
    <div v-else>{{ content }}</div>
  </div>
</template>

<script>
export default {
  name: "textTooltip",
  props: {
    length: {default: 50, required: false},
    content: {default: '', required: true},
    empty: {default: '', required: false},
    tipWidth: {default: 40, required: false},
  },
  watch: {
    content(val) {
      console.log(val)
    }
  },
  methods: {
    clipStr(str) {
      const clip = []
      const tipWidth = Number(this.tipWidth)
      if (str && str.length > tipWidth) {
        for (let i = 0; i < Math.ceil(str.length / tipWidth); i++) {
          clip.push(str.slice(i * tipWidth, (i * tipWidth) + tipWidth))
        }
        return clip
      }
      return clip
    },
  }
}
</script>

<style scoped>
.toolTipImg {
  margin-bottom: -5px;
  margin-right: 10px;
}
</style>
