<template>
    <!-- #ifdef MP-WEIXIN || MP-XHS -->
    <view class="wxNavbar" :style="{ height: `${state.navHeight}px` }">
        <view v-if="state.navHeight" class="title" :style="{ 'margin-top': `${state.statusBarHeight}px` }">{{ props.title }}</view>
    </view>
    <!-- #endif -->
</template>

<script setup>
    // #ifdef MP-WEIXIN || MP-XHS
    import { reactive, onMounted } from "vue";
    import { navbarHeightAndStatusBarHeight } from "@/utils/common.js";
    const props = defineProps({
        title: {
            type: String,
            default: "EliteSys"
        }
    });

    let state = reactive({
        navHeight: 0,
        statusBarHeight: 0,
    });
    onMounted(() => {
        const heightData  = navbarHeightAndStatusBarHeight();
        state.navHeight = heightData.navbarHeight;
        state.statusBarHeight = heightData.statusBarHeight;
    });
    // #endif
</script>

<style lang="scss" scoped>
    .wxNavbar {
        z-index: 999999;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-color);
        background: linear-gradient(to left, var(--left-linear), var(--right-linear));

        &::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            bottom: -2px;
            background: linear-gradient(to left, var(--left-linear), var(--right-linear));
        }
    }
</style>