<template>
  <div :class="`${prefixCls}__title`">
    <span>{{ title }}</span>
    <BasicHelp :class="`${prefixCls}-help`" v-if="helpMessage" :text="helpMessage" />
  </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: 'ZtTableHeaderTitle',
  inheritAttrs: false
})
</script>
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-table__title;

.#{$prefix-cls} {
  display: flex;
  position: relative;
  align-items: center;
  padding-left: 7px;
  color: var(--el-table-text-color);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  cursor: pointer;
  user-select: none;
}
</style>
