<template>
    <div class="hc-title-box">
        <div v-if="isSlotBar" class="title-bar">
            <slot />
        </div>
        <div v-else class="title-bar">{{ title }}</div>
        <div v-if="isSlotExtra" class="extra-bar">
            <slot name="extra" />
        </div>
    </div>
</template>

<script setup>
import { ref, useSlots } from 'vue'
defineProps({
    title: {
        type: String,
        default: '',
    },
})

defineOptions({
    name: 'HcTitle',
})

//判断<slot>是否有传值
const slots = useSlots()
const isSlotBar = ref(!!slots.default)
const isSlotExtra = ref(!!slots.extra)
</script>

<style scoped lang="scss">
.hc-title-box {
    position: relative;
    margin-top: 24px;
    margin-bottom: 14px;
    display: flex;
    align-items: flex-end;
    .title-bar {
        position: relative;
        font-size: 16px;
        font-weight: 500;
        color: #555555;
        display: flex;
        align-items: center;
    }
    .extra-bar {
        position: relative;
        flex: 1;
        display: flex;
        justify-content: end;
        align-items: center;
    }
}
</style>

