<template>
    <view class="navbar" :style="navbarStyle">
        <view class="navbar-status" :style="{ height: statusBarHeight + 'px' }"></view>
        <view class="navbar-bar" :style="{ height: navHeight + 'px' }">
            <view v-if="showBack" class="navbar-back" @click="onBack">
                <view class="navbar-back-arrow"></view>
            </view>

            <view class="navbar-title">
                <text>{{ title }}</text>
            </view>

            <slot name="right">
                <view class="navbar-right" :style="{ width: menuButtonWidthPx + 'px' }"></view>
            </slot>
        </view>
    </view>
</template>

<script setup lang="ts">
/**
 * 通用导航栏（竖屏专用）
 * - 自动适配状态栏与小程序胶囊按钮高度
 * - showBack 控制返回按钮显示
 */
import { computed, onMounted, ref } from 'vue';

interface Props {
    title?: string;
    showBack?: boolean;
    bg?: string;
    color?: string;
    transparent?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
    title: '',
    showBack: true,
    bg: '',
    color: '',
    transparent: false,
});

const emit = defineEmits<{
    (e: 'back'): void;
}>();

const statusBarHeight = ref(20);
const navHeight = ref(44);
const menuButtonWidthPx = ref(0);

onMounted(() => {
    try {
        const sys = uni.getSystemInfoSync();
        statusBarHeight.value = sys.statusBarHeight || 20;
        // #ifdef MP-WEIXIN
        const menu = uni.getMenuButtonBoundingClientRect();
        if (menu) {
            navHeight.value = (menu.top - statusBarHeight.value) * 2 + menu.height;
            menuButtonWidthPx.value = sys.windowWidth - menu.left + 8;
        }
        // #endif
    } catch (e) {
        console.warn('NavBar getSystemInfo error', e);
    }
});

const navbarStyle = computed(() => {
    const bg = props.transparent
        ? 'transparent'
        : props.bg || 'rgba(255,255,255,0.92)';
    return {
        background: bg,
        color: props.color || '#312E81',
        backdropFilter: props.transparent ? 'none' : 'blur(12px)',
    } as any;
});

const onBack = () => {
    emit('back');
    const pages = getCurrentPages();
    if (pages.length > 1) {
        uni.navigateBack();
    } else {
        uni.reLaunch({ url: '/pages/index/index' });
    }
};
</script>

<style lang="scss" scoped>
.navbar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    width: 100%;
    box-sizing: border-box;
}

.navbar-bar {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 24rpx;
}

.navbar-back {
    position: absolute;
    left: 24rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 64rpx;
    height: 64rpx;
    border-radius: 22rpx;
    background: #ffffff;
    box-shadow:
        0 6rpx 16rpx rgba(99, 102, 241, 0.18),
        inset 0 -4rpx 0 rgba(199, 210, 254, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 150ms ease, box-shadow 150ms ease;

    &:active {
        transform: translateY(-50%) scale(0.92);
        box-shadow: 0 2rpx 8rpx rgba(99, 102, 241, 0.18);
    }
}

.navbar-back-arrow {
    width: 18rpx;
    height: 18rpx;
    border-left: 5rpx solid #4f46e5;
    border-bottom: 5rpx solid #4f46e5;
    border-radius: 2rpx;
    transform: rotate(45deg);
    margin-left: 6rpx;
}

.navbar-title {
    flex: 1;
    text-align: center;
    font-size: 34rpx;
    font-weight: 700;
    color: inherit;
    letter-spacing: 1rpx;

    text {
        max-width: 60vw;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.navbar-right {
    height: 1rpx;
    flex-shrink: 0;
}
</style>
