<script setup lang="ts">
    import { has } from 'lodash-es'
    import { useSlots } from 'vue'

    defineProps({
        title: {
            type: String,
            default: '监测预报',
        },
        url: {
            type: String,
            default: '/static/warnforecast.png',
        },
        myStyle: {
            type: String,
            default: '',
        },
        bgColor: {
            type: String,
            default: '#1F8BF6',
        },
    })

    const isSlot = computed(() => has(toRaw(useSlots()), 'content'))
</script>

<template>
    <!-- 头部 -->
    <view
        :style="`background:${bgColor} url(${url}) no-repeat center bottom;background-size:100% 100%;${myStyle}`"
        class="h-171 bg-[url(/static/warnforecast.png)] text-c0 lh-32 text-center text-36 font-500 pos-relative"
    >
        <slot name="content"></slot>
        <text v-if="!isSlot"> {{ title }}</text>
    </view>
</template>
