<!--
 * @Author: micky
 * @Date: 2024-08-12 11:04:56
 * @LastEditors: micky
 * @LastEditTime: 2024-08-16 16:11:25
 * @FilePath: \chargingpile-uniapp\src\components\widgets\navbarComp\navbarComp.vue
-->
<template>
    <view class="navBarBox">
        <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
        <view class="navBar" :style="barStyle">
            <slot name="left" />
            <slot name="title" v-if="isSlotTitle" />
            <view class="title" v-else :style="setStyle">{{ title }}</view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, computed, useSlots } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const props = defineProps({
    title: String,
    titleStyle: {
        type: Object,
        default: () => {}
    }
})

const statusBarHeight = ref(30)
const navBarHeight = ref(30)
const barStyle = computed(() => {
    return {
        height: navBarHeight.value + 'px',
        lineHeight: navBarHeight.value + 'px',
        'text-align': 'center'
    }
})
const slots = useSlots()
const setStyle = computed(() => {
    return {
        ...props.titleStyle,
        width: slots.left ? '80%' : '100%'
    }
})
const isSlotTitle = computed(() => slots.title)
onLoad(() => {
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    statusBarHeight.value = menuButtonInfo.top
    navBarHeight.value = menuButtonInfo.height
})
</script>
<style scoped lang="scss">
.navBar {
    @include flex-align;
    .title {
        width: 80%;
    }
}
</style>
