<template>
  <div class="ps-information-item">
    <div class="ps-information--item-label">
      <label>{{ title }}</label>
      <el-tooltip
        class="item"
        effect="dark"
        :content="tooltip"
        placement="top"
      >
        <i :class="icon" v-if="icon"></i>
      </el-tooltip>
    </div>
    <div class="ps-information--item-content" ref="tooltipBlock">
      <el-tooltip
      :disabled="showTooltip"
        class="item"
        effect="dark"
        :content="content"
        placement="top"
      >
        <span ref="tooltipItem">{{ content }}</span>
      </el-tooltip>
      
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "PsInformationItem",
  props: {
    title: {
      type: String,
      default: null,
    },
    icon: {
      type: String,
      default: null,
    },
    tooltip: {
      type: String,
      default: null
    },
    content: {
      type: String,
      default: null,
    },
  },
  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
      console.log(boxWidth, itemWidth)
      this.showTooltip = boxWidth >= itemWidth
    }

  },
};
</script>

<style>
</style>
