<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-03-06 15:52:40
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-09-05 14:00:15
 * @FilePath: \vite-ai\data-dashboard\src\components\contentHeader.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="flex items-center justify-between content_header_wrap"
        :style="{ 'background-image': `url(${sub_title_bg})`, 'background-size': 'cover', 'background-repeat': 'no-repeat', 'background-position': 'left bottom' }">
        <!-- 左侧标题区域 -->
        <div class="flex items-center left-section pl-[16px]">
            <img src="@/assets/common/sub_title_icon.png" class="w-[20px] h-[20px]">
            <div class="fg-title ml-[12px]">
                {{ title }}
                <slot name="title"></slot>
            </div>
        </div>
        <!-- 右侧内容 -->
        <div>
            <slot name="extra"></slot>
        </div>
    </div>
</template>

<script lang="ts" setup>
import sub_title_bg from '@/assets/home/sub_title_bg.png';
// 定义组件 props
const props = withDefaults(defineProps<{
    // bgLayout: number | string; // 背景样式 1855 918 800 450 
    title: string; // 标题
}>(), {
    // bgLayout: 1855,
    title: ""
});

// 计算是否显示右侧内容
// const bgImageUrl = computed(() => {
//     switch (Number(props.bgLayout)) {
//         default:
//             return sub_title_bg;
//     }
// });
</script>

<style scoped lang="scss">
.content_header_wrap {
    width: 431px;
    height: 38px;
    // border-image: linear-gradient(90deg, rgba(25, 61, 72, 0), rgba(67, 215, 226, 1), rgba(29, 65, 76, 0)) 1 1;
}
</style>