<template>
  <span class="title-wrap">
    <BasicTitle :helpMessage="helpMessage" class="!font-semibold">
      {{ title }}
    </BasicTitle>
    <span v-if="!helpMessage && subTitle" class="subTitle">{{ subTitle }}</span>
  </span>
</template>
<script lang="ts">
  import type { PropType } from 'vue';
  import { defineComponent } from 'vue';
  import { BasicTitle } from '/@/components/Basic';

  export default defineComponent({
    name: 'BasicModalHeader',
    components: { BasicTitle },
    props: {
      helpMessage: {
        type: [String, Array] as PropType<string | string[]>,
      },
      title: { type: String },
      subTitle: { type: String },
    },
    emits: ['dblclick'],
  });
</script>
<style scoped>
  .title-wrap {
    display: inline-flex;
    align-items: baseline;
  }

  .subTitle {
    font-size: 14px;
    font-weight: 400;
    color: #8290ac;
    margin-left: 4px;
  }
</style>
