<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 });
}
onLoad(() => {
    const currentPage = getCurrentPages().pop();
    console.log(currentPage, 'currentPage');
});
</script>
