<template>
  <wd-navbar
    :title="title"
    custom-class="!bg-transparent"
    :left-arrow="showBack"
    :bordered="false"
    safeAreaInsetTop
    @click-left="handleClickLeft"
  >
    <template #right>
      <slot name="right" />
    </template>
  </wd-navbar>
</template>

<script lang="ts" setup>
import { getLastPage } from '@/utils'
const props = defineProps({
  titleColor: {
    type: String,
    default: '#fff',
  },
  title: {
    type: String,
    default: '',
  },
})
const title = computed(() => {
  return props.title || getLastPage().$page.meta.navigationBar.titleText
})
const showBack = getCurrentPages().length > 1
const handleClickLeft = () => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
:deep(.wd-navbar) {
  --wot-navbar-title-font-size: 32rpx;
  --wot-navbar-color: v-bind('titleColor');
}
</style>
