<template>
  <div :class="`${prefixCls}__head-cell`">
    <span>{{ title }}</span>
    <BasicHelp :class="`${prefixCls}-help`" v-if="helpMessage" :text="helpMessage" placement="top"/>
  </div>
</template>
<script lang="ts" setup>
import { BasicHelp } from '@/components/helpMessage'
import { useDesign } from '@/hooks/web/useDesign'

const props = withDefaults(
  defineProps<{
    title?: string | ((data: Recordable) => string) //标题
    helpMessage?: string | string[]
  }>(),
  {
    title: '',
    helpMessage: ''
  }
)

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('table')

defineOptions({
  name: 'ZtTableHeaderHelp',
  inheritAttrs: false
})
</script>
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-table__head-cell;

.#{$prefix-cls} {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  padding-left: 7px;
  color: currentColor;

  font-weight: 500;
  line-height: 24px;
  cursor: pointer;
  user-select: none;
}
</style>
