<template>
  <ElTooltip
    popper-class="basic-help__wrap"
    :placement="placement"
  >
    <template #content>
      <div>
        <!-- 字符串直接渲染 -->
        <p v-if="isString(text)">{{ text }}</p>
        
        <!-- 数组循环渲染 -->
        <template v-else-if="isArray(text)">
          <p v-for="(item, index) in text" :key="item">
            <span>
              <template v-if="showIndex">{{ index + 1 }}. </template>
              {{ item }}
            </span>
          </p>
        </template>
      </div>
    </template>
    
    <!-- 默认插槽 -->
    <slot></slot>
    
    <!-- 问号图标 -->
    <div class="help-icon">
      <el-icon :style="tooltipStyle">
        <QuestionFilled />
      </el-icon>
    </div>
  </ElTooltip>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElTooltip, ElIcon } from 'element-plus'
import { QuestionFilled } from '@element-plus/icons-vue'
import { isString, isArray } from '@/utils/is'
import type { CSSProperties } from 'vue'

defineOptions({
  name: 'BasicHelp'
})

// 定义 Tooltip 的 placement 类型
type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';

interface Props {
  // 最大宽度
  maxWidth?: string;
  // 颜色
  color?: string;
  // 是否显示多行的序号比如1.xxxx2.xxxx
  showIndex?: boolean;
  // 字体
  fontSize?: number;
  // 弹窗位置
  placement?: Placement;
  // 文字提示字符或列表
  text?: string[] | string;
}

const props = withDefaults(defineProps<Props>(), {
  maxWidth: '600px',
  color: '#000',
  showIndex: true,
  fontSize: 15,
  placement: 'right'
})

// 计算tooltip样式
const tooltipStyle = computed(
  (): CSSProperties => ({ 
    color: props.color, 
    fontSize: `${props.fontSize}px` 
  })
)
</script>

<style lang="scss">
.basic-help__wrap {
  p {
    margin-bottom: 0;
  }
}
.help-icon {
  display: inline-block;
  margin-left: 3px;
  font-size: 14px;
  color: var(--el-table-text-color);
  cursor: pointer;
}
</style>
