<template>
    <!-- 全局自定义navbar -->
    <view class="mocp-navbar">
        <up-navbar :title="title" :fixed="false" :bgColor="bgColor" :safeAreaInsetTop="false" :titleStyle="getTitleStyle" :leftIconSize="0">
            <template #left>
                <slot name="left"></slot>
            </template>
            <template #right>
                <slot name="right"></slot>
            </template>
        </up-navbar>
    </view>
</template>

<script setup>
import { computed } from 'vue'

const es = defineEmits(['handleLeftClick', 'handleRightClick', 'handleFooterClick'])
const ps = defineProps({
    title: {
        type: String,
        default: ''
    },
    bgColor: {
        type: String,
        default: '#f7f8fa'
    },
    size: {
        type: [String, Number],
        default: 34
    },
    color: {
        type: String,
        default: '#4e5969'
    },
    titleStyle: {
        type: Object,
        default: () => {
            return {}
        }
    },
    navBarBackground: {
        type: String,
        default: '#f00'
    }
})
const getTitleStyle = computed(() => {
    return {
        color: ps.color,
        fontSize: ps.size + 'rpx',
        ...ps.titleStyle
    }
})
</script>
<style lang="scss" scoped></style>
