<template>
  <el-tooltip
    ref="tooltip"
    class="th-tooltip"
    :disabled="disabled"
    v-bind="getProps"
  >
    <template slot="content">
      <slot name="content" />
    </template>
    <slot />
  </el-tooltip>
</template>
<script>
export default {
  name: 'ThTooltip',
  props: {
    value: {
      validator() {
        return true
      },
      default: ''
    },
    props: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      disabled: false
    }
  },
  computed: {
    getProps() {
      return {
        effect: 'light',
        placement: 'top',
        ...this.props
      }
    }
  },
  watch: {
    value: {
      handler(newVal) {
        this.onDisabled()
      },
      immediate: true
    }
  },
  methods: {
    // 判断滚动高度与元素高度相等时表示不需要显示气泡提示
    onDisabled() {
      this.$nextTick(() => {
        const el = this.$refs.tooltip.$el
        if (el) {
          this.disabled = !(el.scrollHeight > el.offsetHeight)
        }
      })
    }
  }
}
</script>
