<!--
 * @Description: 
 * @Author: Format-qi 283810417@qq.com
 * @Date: 2022-05-10 17:21:00
 * @LastEditors: Format-qi 283810417@qq.com
 * @LastEditTime: 2022-06-24 13:12:42
-->
<template>
  <span :class="getClass">
    <slot></slot>
    <BzHelp :class="`${prefixCls}-help`" v-if="helpMessage" :text="helpMessage" />
  </span>
</template>
<script lang="ts">
  export default {
    name: 'BzTitle',
  };
</script>
<script lang="ts" setup>
  import type { PropType } from 'vue';
  import { useSlots, computed } from 'vue';
  import BzHelp from './BzHelp.vue';
  import { useDesign } from '/@/hooks/web/useDesign';

  const props = defineProps({
    /**
     * 标题右侧帮助按钮信息
     * @default: ''
     */
    helpMessage: {
      type: [String, Array] as PropType<string | string[]>,
      default: '',
    },
    /**
     * 是否显示标题左侧蓝色色块
     * @default: false
     */
    span: { type: Boolean },
    /**
     * 将文字默认化，不加粗
     * @default: false
     */
    normal: { type: Boolean },
  });

  const { prefixCls } = useDesign('basic-title');
  const slots = useSlots();
  const getClass = computed(() => [
    prefixCls,
    { [`${prefixCls}-show-span`]: props.span && slots.default },
    { [`${prefixCls}-normal`]: props.normal },
  ]);
</script>
