<template>
    <el-tooltip
      v-bind="mergedProps"
      :disabled="disabled"
      :visible="controlledVisible"
      @show="handleShow"
      @hide="handleHide"
    >
      <slot></slot>
      
      <!-- 用于自定义提示内容 -->
      <template v-if="$slots.content" #content>
        <slot name="content"></slot>
      </template>
    </el-tooltip>
  </template>
  
  <script>
  export default {
    name: 'EnhancedTooltip',
    props: {
      content: String,
      placement: {//位置
        type: String,
        default: 'top'
      },
      effect: {//主题颜色
        type: String,
        default: 'dark'
      },
      disabled: Boolean,
      // 控制模式，如果为true则需要手动控制显示/隐藏
      manual: Boolean,
      // 延迟显示/隐藏（毫秒）
      openDelay: {
        type: Number,
        default: 0
      },
      closeDelay: {
        type: Number,
        default: 0
      },
      // 是否在点击后隐藏（适用于点击触发）
      hideAfterClick: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        controlledVisible: false
      }
    },
    computed: {
      mergedProps() {
        return {
          effect: this.effect,
          placement: this.placement,
          content: this.content,
          openDelay: this.openDelay,
          closeDelay: this.closeDelay,
          hideAfterClick: this.hideAfterClick,
          ...this.$attrs
        }
      }
    },
    methods: {
      handleShow() {
        if (this.manual) {
          this.controlledVisible = true
        }
        this.$emit('show')
      },
      handleHide() {
        if (this.manual) {
          this.controlledVisible = false
        }
        this.$emit('hide')
      },
      // 手动显示方法
      show() {
        if (this.manual && !this.disabled) {
          this.controlledVisible = true
        }
      },
      // 手动隐藏方法
      hide() {
        if (this.manual) {
          this.controlledVisible = false
        }
      },
      // 切换显示/隐藏状态
      toggle() {
        if (this.manual && !this.disabled) {
          this.controlledVisible = !this.controlledVisible
        }
      }
    }
  }
  </script>
  
  <style scoped>
  /* 可以添加一些自定义样式 */
  </style>