<template>
    <up-navbar :fixed="fixed" :border="border">
        <template #left>
            <slot name="left">
                <up-icon v-if="showBack" name="arrow-left" size="40rpx" color="#333" @click="handleBackClick" ></up-icon>
                <up-icon v-else name="home" size="40rpx" color="#333" @click="handleHomeClick" ></up-icon>
            </slot>
        </template>
        <template #center>
            <slot name="center">
                <text class="f-s-38 c-#333 f-w-500">{{ title }}</text>
            </slot>
        </template>
    </up-navbar>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
const props = withDefaults(defineProps<{
    title?: string;
    border?: boolean;
    fixed?: boolean;
    homeUrl?: string;
}>(), {
    title: '',
    border: true,
    fixed: true,
    homeUrl: '/pages/index/index'
});

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

const showBack = ref(false);
onMounted(() => {
    const pages = typeof getCurrentPages === 'function' ? getCurrentPages() : [];
    showBack.value = pages.length > 1;
});

function handleBackClick() {
    emit('back');
    const pages = typeof getCurrentPages === 'function' ? getCurrentPages() : [];
    if (pages.length > 1) {
        uni.navigateBack();
    } else {
        uni.switchTab({ url: props.homeUrl });
    }
}

function handleHomeClick() {
    emit('home');
    uni.switchTab({ url: props.homeUrl });
}
</script>