<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-03-06 15:52:40
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-03-07 14:19:16
 * @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(${bgImageUrl})`, 'background-size': 'cover', 'background-repeat': 'no-repeat', 'background-position': 'left bottom' }">
        <!-- 左侧标题区域 -->
        <div class="flex items-center left-section pl-[23px]">
            <img src="@/assets/header/before_icon.png" class="w-[14px] h-[14px]">
            <div class="text-lg font-medium text-white">
                <slot name="title"></slot>
            </div>
        </div>
        <!-- 右侧内容 -->
        <div>
            <slot name="extra"></slot>
        </div>
    </div>
</template>

<script lang="ts" setup>
// import { computed } from 'vue';
import Bg1855 from '@/assets/header/bg_1855.png';
import Bg918 from '@/assets/header/bg_918.png';
import Bg800 from '@/assets/header/bg_800.png';
import Bg450 from '@/assets/header/bg_450.png';
// 定义组件 props
const props = withDefaults(defineProps<{
    bgLayout: number; // 背景样式 1855 918 800 450 
}>(), {
    bgLayout: 1855,
});

// 计算是否显示右侧内容
const bgImageUrl = computed(() => {
    switch (Number(props.bgLayout)) {
        case 1855:
            return Bg1855;
        case 918:
            return Bg918;
        case 800:
            return Bg800;
        case 450:
            return Bg450;
        default:
            return Bg1855;

    }
});
</script>

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