<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>
        <span>{{ content.length > length ? `${content.substring(0, this.length)}...` : content}}</span>
      </el-tooltip>
      <span v-else>{{content}}</span>
    </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 = []
      if(str && str.length > this.tipWidth) {
        for (let i = 0; i < Math.ceil(str.length / this.tipWidth); i++) {
          clip.push(str.slice(i * this.tipWidth,i * this.tipWidth + this.tipWidth))
        }
        return clip
      }
      return clip
    },
  }
}
</script>

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