<template>
  <div class="ps-text" ref="tooltipBlock" v-if="isMore">
    <el-tooltip
        :disabled="showTooltip"
        class="item"
        effect="dark"
        :content="$slots.default[0].text"
        placement="top"
      >
        <span ref="tooltipItem" :class="['ps-info-span', type]">
          <font><slot></slot></font>
        </span>
      </el-tooltip>      
  </div>
  <div class="ps-text" v-else>
    <span :class="['ps-info-more', type]">
      <font><slot></slot></font>
    </span>
  </div>
</template>

<script>
export default {
  name: "PsText",
  props: {
    type: {
      type: String,
      default: null,
    },
    icon: {
      type: String,
      default: null,
    },
    tooltip: {
      type: String,
      default: null
    },
    content: {
      type: String,
      default: null,
    },
    isMore: {
      type: Boolean,
      default: true,
    }
  },
  watch: {
    content: {
      handler () {
        this.contentElse = this.content
        this.$nextTick(() => this.checkWidth())
      },
      immediate: true
    }
  },

  data() {
    return {
      contentElse: null,
      showTooltip: true

    };
  },
  created() {},
  mounted() {},
  methods: {
    checkWidth () {
      const boxWidth = this.$refs.tooltipBlock.offsetWidth
      const itemWidth = this.$refs.tooltipItem.offsetWidth + 10
      this.showTooltip = itemWidth >= boxWidth ? false : true
    }

  },
};
</script>

<style>
</style>
