<template>
  <div>
    <el-tooltip class="tooltip" v-bind="props">
      <slot></slot>
    </el-tooltip>
  </div>
</template>

<script lang="ts" setup>
import { withDefaults } from 'vue'

/* props类型声明 */
type TEffect = 'dark' | 'light'
type TTrigger = 'click' | 'hover' | 'focus' | 'contextmenu'
type TPlacement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'
  | 'right'
  | 'right-start'
  | 'right-end'
interface IProps {
  effect?: TEffect // Tooltip 主题，内置了 dark / light 两种
  content: string // 显示的内容，也可被 slot#content 覆盖
  placement?: TPlacement // Tooltip 组件出现的位置
  trigger?: TTrigger // 如何触发 tooltip (来显示)
  showArrow?: boolean // tooltip 的内容是否有箭头
  enterable?: boolean // 鼠标是否可进入到 tooltip 中
  hideAfter?: number // 延迟关闭，单位毫秒
}
// 带默认值
const props = withDefaults(defineProps<IProps>(), {
  effect: 'dark',
  content: '文字提示',
  placement: 'bottom',
  trigger: 'hover',
  showArrow: true,
  enterable: false,
  hideAfter: 200
})
</script>

<style scoped lang="scss">
.tooltip {
}
</style>
